XML+ JS創(chuàng)建樹(shù)形菜單.docx

XML+ JS創(chuàng)建樹(shù)形菜單 簡(jiǎn)單說(shuō)明： 思路：從數(shù)據(jù)島menuXML中讀取數(shù)據(jù)，從樹(shù)的根節(jié)點(diǎn)開(kāi)始分析樹(shù)，利用 hasChildNodes（） 方法：是否含有子節(jié)點(diǎn) 判斷當(dāng)前節(jié)點(diǎn)是否有子節(jié)點(diǎn)，如果有子節(jié)點(diǎn)繼續(xù)向下分析 childNodes 對(duì)象：子節(jié)點(diǎn)對(duì)象集合 ，否則返回當(dāng)前分析結(jié)果（樹(shù)結(jié)點(diǎn)對(duì)象）。 主要的函數(shù)：createTree（thisn /*樹(shù)結(jié)點(diǎn)*/ ， sd/*樹(shù)深度*/） 運(yùn)行代碼 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