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 = "expand.gif" + 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 全部选择 提示:你可先修改部分代码,再按运行]

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值