採用JavaScript+XML實現具有樹形選單功能的論壇側邊導航欄

webstandards發表於2020-04-04
JavaScriptXML

核心頁面程式碼：

(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 

相關文章