当前页面: 开发资料首页 → Javascript 专题 → XML+ JS创建树形菜单
XML+ JS创建树形菜单
摘要: XML+ JS创建树形菜单
思路:
从数据岛menuXML中读取数据,从树的根节点开始分析树,
利用 hasChildNodes() [方法:是否含有子节点 ] 判断当前
节点是否有子节点,如果有子节点继续向下分析 childNodes
[对象:子节点对象集合] ,否则返回当前分析结果(树结点对象)。
主要的函数:
createTree(thisn /*树结点*/ , sd/*树深度*/)
HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<script>
//code by star 20003-4-7
var HC = "color:#990000;border:1px solid #cccccc";
var SC = "background-color:#efefef;border:1px solid #cccccc;color:#000000;";
var IO = null;
function initTree(){
var rootn = document.all.menuXML.documentElement;
var sd = 0;
document.onselectstart = function(){return false;}
document.all.treeBox.appendChi ld(createTree(rootn,sd));
}
function createTree(thisn,sd){
var nodeObj = document.createElement("span");
var upobj = document.createElement("span");
with(upobj){
style.marginLeft = sd*10;
className = thisn.hasChildNodes()?"hasItems":"Items";
innerHTML = "" + thisn.getAttribute("text") +"";
onmousedown = function(){
if(event.button != 1) return;
if(this.getAttribute("cn")){
this.setAttribute("open",!this.getAttribute("open"));
this.cn.style.display = this.getAttribute("open")?"inline":"none";
this.all.tags("img")[0].src = this.getAttribute("open")?"expand.gif":"contract.gif";
}
if(IO){
IO.runtimeStyle.cssText = "";
IO.setAttribute("selected",false);
}
IO = this;
this.setAttribute("selected",t rue);
this.runtimeStyle.cssText = SC;
}
onmouseover = function(){
if(this.getAttribute("selected "))return;
this.runtimeStyle.cssText = HC;
}
onmouseout = function(){
if(this.getAttribute("selected "))return;
this.runtimeStyle.cssText = "";
}
oncontextmenu = contextMenuHandle;
onclick = clickHandle;
}
if(thisn.getAttribute("treeId" ) != null){
upobj.setAttribute("treeId",thisn.getAttribute("treeId"));
}
if(thisn.getAttribute("href") != null){
upobj.setAttribute("href",thisn.getAttribute("href"));
}
if(thisn.getAttribute("target" ) != null){
upobj.setAttribute("target",thisn.getAttribute("target"));
}
nodeObj.appendChild(upobj);
nodeObj.insertAdjacentHTML("be foreEnd","
")
if(thisn.hasChildNodes()){
var i;
var nodes = thisn.childNodes;
var cn = document.createElement("span");
upobj.setAttribute("cn",cn);
if(thisn.getAttribute("open") != null){
upobj.setAttribute("open",(thi sn.getAttribute("open")=="true"));
upobj.getAttribute("cn").style .display = upobj.getAttribute("open")?"inline":"none";
if( !upobj.getAttribute("open"))upobj.all.tags("img")[0].src ="contract.gif";
}
for(i=0;i
}
else{
upobj.all.tags("img")[0].src ="endnode.gif";
}
return nodeObj;
}
window.onload = initTree;
</script>
<script>
function clickHandle(){
// your code here
}
function contextMenuHandle(){
event.returnValue = false;
var treeId = this.getAttribute("treeId");
// your code here
}
</script>
</head>
<body>
<?xml version="1.0" encoding="GB2312"?>
<table style="position:absolute;left:100;top:100;">
<tr><td id=treeBox style="width:400px;height:200px;border:1px solid #cccccc;padding:5 3 3 5;" valign=top></td></tr>
<tr><td style="font:10px verdana;color:#999999" align=right>by sTar
2003-4-8</td></tr>
</table>
</body>
</td> </tr> </table>
↑返回目录
前一篇: 用javascript作消息提示框（类似于QQ用户上线的消息提
后一篇: 利用JS获取IE客户端IP及MAC的实现