xml制作html树形菜单,XML+ JS创建树形菜单

DSTree

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;}

//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 = "" + 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","
")

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

nodeObj.appendChild(cn);

}

else{

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

}

return nodeObj;

}

window.onload = initTree;

function clickHandle(){

// your code here

}

function contextMenuHandle(){

event.returnValue = false;

var treeId = this.getAttribute("treeId");

// your code here

}

by sTar 2003-4-8

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]