XML+ JS创建树形菜单.docx

XML+ JS创建树形菜单 简单说明： 思路：从数据岛menuXML中读取数据，从树的根节点开始分析树，利用 hasChildNodes（） 方法：是否含有子节点 判断当前节点是否有子节点，如果有子节点继续向下分析 childNodes 对象：子节点对象集合 ，否则返回当前分析结果（树结点对象）。 主要的函数：createTree（thisn /*树结点*/ ， sd/*树深度*/） 运行代码 DSTree body,tdfont:12px verdana#treeBoxbackground-color:#fffffa;#treeBox .ecmargin:0 5 0 5;#treeBox .hasItemsfont-weight:bold;height:20px;padding:3 6 0 6;margin:2px;cursor:hand;color:#555555;border:1px solid #fffffa;#treeBox .Itemsheight:20px;padding:3 6 0 6;margin:1px;cursor:hand;color:#555555;border:1px solid #fffffa;/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 = + thisn.getAttribute(text) +; onmousedown = function() if(event.button != 1) return; if(this.getAttribute(cn) this.setAttribute(open,!this.getAttribute(open); .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;inodes.length;cn.appendChild(createTree(nodesi+,sd+1); nodeObj.appendChild(cn);else upobj.all.tags(img)0.src =endnode.gif;return nodeObj;window.onload = initTree;function clickHandle()/ yo