JavaScript+XML实现垂直树形导航菜单资源-CSDN下载

共7个文件

gif：4个

htm：3个

JavaScript,XML,树形菜单

4星 · 超过85%的资源需积分: 14 131 浏览量 2008-01-21 11:47:39 上传评论 4 收藏 7KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

vsens_JavaScript+XML.rar （7个子文件）

viewBBSIndex.htm 607B

bbsMain.htm 307B

image

endnode.gif 859B

collapse.gif 91B

expand.gif 88B

bbsTitleBack.gif 4KB

bbsMenu.htm 5KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> DSTree </TITLE> <style> body,td{font:12px verdana; height:50px;} #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> <script> 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).childNodes[2]); } 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=image/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")?"image/expand.gif":"image/collapse.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 ="image/collapse.gif"; } for(i=0;i<nodes.length;cn.appendChild(createTree(nodes[i++],sd+1))); nodeObj.appendChild(cn); } else{ upobj.all.tags("img")[0].src ="image/endnode.gif"; } return nodeObj; } window.onload = initTree; </script> <script> function contextMenuHandle(){ event.returnValue = false; var treeId = this.getAttribute("treeId"); // your code here } function clickHandle(){ window.open(this.href,"mainFrame"); } </script> </HEAD> <BODY> <xml id=menuXML> <?xml version="1.0" encoding="GB2312"?> <DSTreeRoot text="华盛社区" open="true" href="http://" treeId="123"> <DSTree text="产品交流" open="false" href="" target="_self" treeId="12"> <DSTree text="产品交流子节点" href="http://www.baidu.com" target="_blank" treeId="4353" /> <DSTree text="产品交流子节点" href="http://www.jnunet.cn/assets" target="box" treeId="543543" /> <DSTree text="产品交流子节点" href="" target="box" treeId="543543" /> </DSTree> <DSTree text="产品销售" open="false" href="" treeId="213"> <DSTree text="产品销售子节点" href="http://www.baidu.com" treeId="4353" /> <DSTree text="产品销售子节点" href="" treeId="543543" /> </DSTree> <DSTree text="渠道物流" open="false" href="" treeId="432"> <DSTree text="渠道物流子节点" href="" treeId="4353" /> <DSTree text="渠道物流子节点" href="" treeId="543543" /> </DSTree> <DSTree text="市场推广" open="false" href="" target="box" treeId="213"> <DSTree text="市场推广子节点" href="" treeId="4353" /> <DSTree text="市场推广子节点" href="" treeId="543543" /> </DSTree> </DSTreeRoot> </xml> <table style="position:absolute;left:0;top:0;"> <tr> <td id=treeBox style="width:250px;height:600px;;border:1px solid #cccccc;padding:45 3 3 5; background-image:url(image/bbsTitleBack.gif); background-position:top; background-repeat:repeat-x; padding-right:65px; " valign=top></td> </tr> </table> </BODY> </HTML>

评论收藏

内容反馈