XML+ JS创建树形菜单

　XML+ JS创建树形菜单

作者：starsjz　时间： 2004-02-15　文档类型：原创　来自：蓝色理想

简单说明:

思路:
从数据岛menuXML中读取数据,从树的根节点开始分析树,
利用 hasChildNodes() [方法:是否含有子节点 ] 判断当前
节点是否有子节点,如果有子节点继续向下分析 childNodes
[对象:子节点对象集合] ,否则返回当前分析结果(树结点对象)。

主要的函数:
createTree(thisn /*树结点*/ , sd/*树深度*/)
运行代码框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> DSTree </TITLE> <META NAME="Author" CONTENT="sTarsjz@hotmail.com" > <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> <base href="http://vip.5d.cn/star/dstree/" /> <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.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> <script> function clickHandle(){ // your code here } function contextMenuHandle(){ event.returnValue = false; var treeId = this.getAttribute("treeId"); // your code here } </script> </HEAD> <BODY> <xml id=menuXML> <?xml version="1.0" encoding="GB2312"?> <DSTreeRoot text="根节点" open="true" href="http://" treeId="123"> <DSTree text="技术论坛" open="false" treeId=""> <DSTree text="5DMedia" open="false" href="http://" target="box" treeId="12"> <DSTree text="网页编码" href="http://" target="box" treeId="4353" /> <DSTree text="手绘" href="http://" target="box" treeId="543543" /> <DSTree text="灌水" href="http://" target="box" treeId="543543" /> </DSTree> <DSTree text="BlueIdea" open="false" href="http://" target="box" treeId="213"> <DSTree text="DreamWeaver & JS" href="http://" target="box" treeId="4353" /> <DSTree text="FlashActionScript" href="http://" target="box" treeId="543543" /> </DSTree> <DSTree text="CSDN" open="false" href="http://" target="box" treeId="432"> <DSTree text="JS" href="http://" target="box" treeId="4353" /> <DSTree text="XML" href="http://" target="box" treeId="543543" /> </DSTree> </DSTree> <DSTree text="资源站点" open="false" treeId=""> <DSTree text="素材屋" href="http://" target="box" treeId="12" /> <DSTree text="桌面城市" open="false" href="http://" target="box" treeId="213"> <DSTree text="壁纸" href="http://" target="box" treeId="4353" /> <DSTree text="字体" href="http://" target="box" treeId="543543" /> </DSTree> <DSTree text="MSDN" open="false" href="http://" target="box" treeId="432"> <DSTree text="DHTML" href="http://" target="box" treeId="4353" /> <DSTree text="HTC" href="http://" target="box" treeId="543543" /> <DSTree text="XML" href="" target="box" treeId="2312" /> </DSTree> </DSTree> </DSTreeRoot> </xml> <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 <font color=#660000>sTar</font><br> 2003-4-8</td></tr> </table> </BODY> </HTML>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

出处：蓝色理想
责任编辑：cnbruce

◎进入论坛网页制作、网站综合版块参加讨论

相关文章

跟我学XSL（二）

作者文章

XML+ JS创建树形菜单

个性化的Calendar


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule