XML+ JS创建树形菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> DSTree </TITLE>

<style>

body,td{font:12px verdana}

#treeBox{background-color:#fffffa;}

#treeBox .ec{margin:0 5 0 5;}

#treeBox .hasItems{font-weight:bold;height:20px;padding:3 6 0 6;margin:2px;cursor:hand;color:#555555;border:1px solid #fffffa;}

#treeBox .Items{height:20px;padding:3 6 0 6;margin:1px;cursor:hand;color:#555555;border:1px solid #fffffa;}

</style>

//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.appendChild(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 = "<img src=expand.gif class=ec>" + 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",true);

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("beforeEnd","<br>")

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",(thisn.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<nodes.length;cn.appendChild(createTree(nodes[i++],sd+1)));

nodeObj.appendChild(cn);

}

else{

upobj.all.tags("img")[0].src ="endnode.gif";

}

return nodeObj;

}

window.onload = initTree;

</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"?>

</DSTree>

</DSTree>

</DSTree>

</DSTree>

</DSTree>

</DSTreeRoot>

</xml>

</table>

</BODY>

</HTML>

posted on 2006-12-02 22:01 ipusr 阅读(261) 评论(0) 收藏举报