采用JavaScript+XML实现具有树形菜单功能的论坛侧边导航栏

来源：互联网发布：信掌柜软件下载编辑：程序博客网时间：2024/05/17 23:35

核心页面代码：

(bbsMenu.htm)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> VsensBBS </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>

其中，

function clickHandle(){window.open(this.href,"mainFrame");}

为鼠标点击某一节点后执行的动作。全部代码来源于我近期的一个项目，客户要求论坛必须有侧边导航栏，我于是想到用框架来实现。"mainFrame"是主显框架的ID及name属性。读者可灵活修改。

附上框架全部代码及图片打包下载：
http://download.csdn.net/source/340556