N 層樹枝狀選單


X.T 發表



不限層數,類似檔案總館

<!-------------------------------------------------------------------------------
我不太會說明,請自行參考附註說明
-------------------------------------------------------------------------------->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<meta http-equiv="Content-Language" content="zh-tw">
<title>Content</title>
<base target="frmMain">
<script language="JavaScript">
<!--

//Description/////////////////////////////////////////////////////////////////
//1. Branch: 具備下層選單結構者稱為分支 (亦即資料夾)
//2. Item: 樹狀結構的最下層,包含超連結者,稱為項目
//3. 分支計數用來統計選單並製作選單及節點圖片的 ID
//4. 項目計數用來統計超連結 (錨物件)


//Global Variable/////////////////////////////////////////////////////////////

var GstrTreeStructor=""; //樹狀結構輸出字串
var GintBranchCount=0;  //分支計數
var GintItemCount=0;  //項目計數

//images path
//圖片請自行準備
var GstrBookClose="../icon/book.Sky/book.close.gif";
var GstrBookOpen="../icon/book.Sky/book.open.gif";
var GstrPage="../icon/book.Sky/page.gif";

 

//Function Set////////////////////////////////////////////////////////////////


function objItem(n,k) {
//自訂超連結項目物件
 this.name=n;
 this.link=k;
 }//end of objItem()


function menuExpend(id) {
//開啟或是收縮下層選單
 top.focus();
 var img=eval("document.all.img"+id);
 var tab=eval("document.all.tab"+id);
 if(tab.style.display=="none") {
  tab.style.display="block";
  img.src=GstrBookOpen; }
 else {
  tab.style.display="none";
  img.src=GstrBookClose; }
 }// end of menuExpend()

 

function treeBuild(obj,pos) {
//建構樹狀目錄,輸出 HTML 碼

 if(pos=="end" && obj.constructor!=Array)
  GstrTreeStructor+="<tr><td style='padding-top:5; padding-bottom:8;'>";
 else
  GstrTreeStructor+="<tr><td style='padding-top:5;'>";

 if(obj.constructor==Array) {
  //新的分支 (使用遞迴呼叫)
  GintBranchCount++;

  var tabID="tab"+GintBranchCount;
  var imgID="img"+GintBranchCount;

  GstrTreeStructor+=
  "<a href='exp:" + imgID + "' target=_self" +
  " onclick=\"javascript: menuExpend(" + GintBranchCount + "); return false;\">" +
  "<img align=absMiddle border=0 id=" + imgID +
  " src=" + GstrBookClose + " valign=middle>" +
  "</a>" +
  obj[0] +
  "<table id=" + tabID + " border=0 cellpadding=0 cellspacing=0" +
  " style=\"position:relative; left:18; display:none;\">" ;

  for(var i=1; i<obj.length; i++)
   if(i==(obj.length-1)) treeBuild(obj[i],"end");
   else treeBuild(obj[i],"mid");

  GstrTreeStructor+="</table>";
  }

 else {
  //超連結項目
  GintItemCount++;
  GstrTreeStructor+=
  "<img align=absMiddle border=0 src=" + GstrPage + ">" +
  "<a id=lnk" + GintItemCount + " href=" + obj.link + ">" + obj.name + "</a>";
  }

 GstrTreeStructor+="</td></tr>";

}//end of treeBuild()

 

function treeCreate() {
//整個選單結構記錄在這裡
//使用多維陣列,輸入時注意陣列足標不要重複
//遇到一個新的分支,就會多出一個維度
//如果是一個資料夾(新的分支,包含下層選單),宣告成 new Array()
//如果是一個超連結項目(最底層),宣告成 new objItem()

 var arTree=new Array();

 //Root
 var i=-1;

 i++;
 arTree[i]="My Papers";

 i++;
 arTree[i]=new Array();
 arTree[i][0]="網站資訊";
 arTree[i][1]=new objItem("網站導覽","../inform/guide.htm");
 arTree[i][2]=new objItem("網站歷史","../inform/history.htm");
 arTree[i][3]=new objItem("更新紀錄","../inform/update/update.htm");
 arTree[i][4]=new objItem("About Me ..","../inform/me.htm");

 i++;
 arTree[i]=new Array();
 arTree[i][0]="程式設計";
 arTree[i][1]=new Array();
 arTree[i][1][0]="IIS Development";
 arTree[i][1][1]=new objItem("Server Variables","../program/iisdevelop/variables.htm");
 arTree[i][1][2]=new objItem("SSI Directives","../program/iisdevelop/ssi/ssi.htm");
 arTree[i][2]=new objItem("程式設計原則","../program/principle/020103.principle.htm");
 arTree[i][3]=new objItem("Script 語言","../program/script.htm");
 arTree[i][4]=new objItem("w3 JMail Reference","../program/w3jmail/w3jmail.htm");

 i++;
 arTree[i]=new Array();
 arTree[i][0]="技術零件";
 arTree[i][1]=new Array();
 arTree[i][1][0]="DHTML";
 arTree[i][1][1]=new objItem("HTML技巧","../part/dhtml/html.tec.htm");
 arTree[i][1][2]=new objItem("取消右鍵功能","../part/dhtml/nocontent.htm");
 arTree[i][1][3]=new objItem("沒有邊界的視窗","../part/dhtml/borderless.htm");
 arTree[i][1][4]=new objItem("關閉廣告視窗","../part/dhtml/banner.cancel.htm");
 arTree[i][1][5]=new objItem("取得物件屬性","../part/dhtml/obj.property.htm");
 arTree[i][2]=new Array();
 arTree[i][2][0]="ASP";
 arTree[i][3]=new objItem("Ping 指令簡介","../part/ping.htm");
 arTree[i][4]=new objItem("PGP 簡介","../part/pgp.htm");

 i++;
 arTree[i]=new Array();
 arTree[i][0]="程式範例";
 arTree[i][1]=new objItem("身份證驗證程式","../example/id.check.htm");
 arTree[i][2]=new objItem("Indexing 搜尋引擎","../example/indexing.htm");

 i++;
 arTree[i]=new Array();
 arTree[i][0]="伺服器";
 arTree[i][1]=new Array();
 arTree[i][1][0]="Windows";
 arTree[i][1][1]=new objItem("事件檢視","../server/windows/event/event.htm");
 arTree[i][2]=new Array();
 arTree[i][2][0]="w3 JMailServer";

 i++;
 arTree[i]=new Array();
 arTree[i][0]="附錄文件";
 arTree[i][1]=new objItem("ASCII Code","../appendix/ascii.htm");
 arTree[i][2]=new objItem("網路資源","../appendix/resource.htm");
 arTree[i][3]=new objItem("檔案備份","../appendix/archive.htm");
 arTree[i][4]=new objItem("參考文獻","../appendix/reference.htm");

 i++;
 arTree[i]=new Array();
 arTree[i][0]="其他主題";
 arTree[i][1]=new objItem("帕海貝爾 卡農","../miscellanea/canon/canon.htm");

 

 GstrTreeStructor="<table id=tabTree border=0 cellspacing=0 cellpadding=0";
 GstrTreeStructor+=" style=\"position:relative; left:6; visibility=hidden;\" >";

 //從 arTree 的子選單 arTree[1] 開始輸出
 for(i=1; i<arTree.length-1; i++) treeBuild(arTree[i],"mid");
 treeBuild(arTree[arTree.length-1],"end");

 //從 arTree 根目錄開始輸出
 //treeBuild(arTree,"mid");

 GstrTreeStructor+="</table>";
 document.write(GstrTreeStructor);
 document.all.img1.click();
 document.all.tabTree.style.visibility="visible";

 }//end of treeCreate()


//-->
</script>
</head>

<body>
<script language="javascript">treeCreate();</script>
 <br>
</body>

</html>

 

最後更新日期: 5/21/2004 11:48:15 AM