将属性表显示为x3dom对象的弹出框

我是该字段的新手，并且一直在尝试使用x3dom对象。我现在面临的问题是如何以弹出窗口的形式显示x3dom对象的属性。我已经看到了x3dom网站上给出的例子，但还没有找到任何相关的例子。如果有人举例分享，我会很高兴。先谢谢你。将属性表显示为x3dom对象的弹出框

来源

2012-12-17 user1879084

您可以使用attributes属性（如document.getElementById("id").attributes），这里的显示属性的表为例，当您单击按钮：

<!DOCTYPE html> 
<html lang="en"> 
<head> 

    <meta charset="utf-8"> 
    <title>X3DOM</title> 
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet" /> 

</head> 
<body class="container"> 


    <X3D width="100%" height="300px"> 
     <Scene> 
      <Shape id="myShape"> 
       <Appearance> 
        <Material id="myMaterial" diffuseColor="0.6 0.6 0.6" specularColor="0.8 0.8 0.8" shininess="0.145" ambientIntensity="0.2" emissiveColor="0,0,0"/> 
       </Appearance> 
       <Sphere /> 
      </Shape> 
     </Scene> 
    </X3D> 


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="http://x3dom.org/x3dom/release/x3dom.js"></script> 
    <script> 
    function displayAttributes(objectId){ 
     var code = ''; 
     var attributes = document.getElementById(objectId).attributes; 
     $.each(attributes, function(index, attr) { 
      code += '<tr><th>' + attr.name +'</th><td>' + attr.value + '</td></tr>'; 
     }); 
     $("#attributesTable").html(code); 
    } 
    </script> 


    <button onclick="displayAttributes('myShape')" class="btn btn-large">Attributes of the shape</button> 
    <button onclick="displayAttributes('myMaterial')" class="btn btn-large">Attributes of the material</button> 

    <table id="attributesTable" class="table table-striped table-bordered" style="margin-top:50px"></table> 


</body> 
</html>

要点：https://gist.github.com/4329304

来源

2012-12-18 16:14:10 wildpeaks

非常感谢你的回复。它为我澄清了一些要点。然而，我正在寻找的是点击对象，并获得它的属性信息弹出而不是按钮。再一次感谢你.. – user1879084

正是你正在尝试为不清楚这是否有帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="stylesheet" type="text/css" href="http://x3dom.org/x3dom/example/x3dom.css"></link> 
<script type="text/javascript" src = "http://x3dom.org/x3dom/example/x3dom.js"></script> 
</head> 
<body> 
<X3D showLog='true' width="400px" height="400px"><Scene> 
<Shape><Box size="2 2 2" onclick="alert_attributes();" /></Shape> 
</Scene></X3D> 
<script> 
function alert_attributes() 
{ 
var size = document.getElementsByTagName("Box")[0].getAttribute('size'); 
x3dom.debug.logInfo(size); 
alert(size); 

} 
</script> 
</body> 
</html>

来源

2012-12-23 09:53:05 drfrog

将属性表显示为x3dom对象的弹出框

回答

相关问题