位置：首页>> 网络编程>> JavaScript>> XML+ JS创建树形菜单

XML+ JS创建树形菜单

作者：starsjz　　发布时间：2013-08-22 08:30:17　

标签：

简单说明:
思路:
从数据岛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-7var 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=http://www.blueidea.com/tech/web/2004/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")?"http://www.blueidea.com/tech/web/2004/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 全部选择提示：你可先修改部分代码，再运行]

投稿

XML+ JS创建树形菜单

猜你喜欢