樹狀選單

 

 

 

 

下載程式

 

 

89/04/24
林朝敏

 

樹狀選單(javascript)
說明:

一個文字的選單,類似檔案總管左方的樹狀目錄,很合適有大量鏈結的畫面。適用在分割畫面。(範例:我的個人網頁)

檔案解開後有使用範例,你可以詳細去查看。另我也提供我的網頁中的主要部份內容及簡單說明。

<title>選單</title>
<SCRIPT LANGUAGE
="JavaScript1.2">

<!--
window.onload = loadTrees;
// load Tree component
if (document.layers) {
document.writeln('<SCRIPT SRC="tree_n4.js"><
/SCRIPT>');
} else if (document.all) {
document.writeln('
<SCRIPT SRC="tree.js"></SCRIPT>');
}

//這兒和範例中的不太相同

function goURL(url, win) {
win = win || window;
if (top.bottom)
         //bottom 為分割畫面,要放的地方(頁框名稱)
win = top.bottom;
if (url)
win.location.href = url ; //"?cp=smithTree";   
(這後半段有些問題,cgi連結會出錯)
}

// load my trees

//次選項1

function loadTrees() {
     window.mySubTree = new Tree("程式作品");
     mySubTree.addTreeItem("學校行政", "goURL('indexa.htm')");
     mySubTree.addTreeItem("網路實驗", "goURL('http://sy3es.tnc.edu.tw/teaching/network.htm')");
     mySubTree.addTreeItem("delphi作品");
     mySubTree.addTreeItem("vb作品");

//次選項2

      window.mySubTree2 = new Tree("國小教材");
     mySubTree2.addTreeItem("網路文件", "goURL('http://sy3es.tnc.edu.tw/teaching/netdoc.htm')");
     mySubTree2.addTreeItem("鄉土教學", "goURL('indexb.htm')");
     mySubTree2.addTreeItem("其他手冊", "goURL('other.htm')");

//主選項

 window.myTree = new Tree();
    myTree.addTreeItem( "最新消息", "goURL('http://sy3es.tnc.edu.tw/php/newspost/news.php3?room=prolin')" );
   
myTree.addTreeItem(mySubTree);
    myTree.addTreeItem(mySubTree2);
  
  myTree.addTreeItem( "作者介紹", "goURL('author.htm')" );
    myTree.addTreeItem( "同學通訊錄", "goURL('78Class.html')" );
   
myTree.addTreeItem( "鏈結網頁", "goURL('utladd.htm')" );
   
myTree.addTreeItem( "留言版", "goURL('http://sy3es.tnc.edu.tw/cgi-bin/gbk?gbkid=prolin')" );

     // myTree.showTree(5,35);
   
showTree(window.myTree,0,48);
}

//-->

</SCRIPT>

<base target="bottom">

<meta name="Microsoft Theme" content="sumipntg 1011, default">

</head>

 

使用時要把tree_n4.js 及tree.js 及image/目錄放在你的網頁目錄下(和選單頁同),就可以正確使用了。

附註:

另有一個彈出式選單也不錯,你可以試試。其中有一個menu1.htm是我做試驗簡化內容。下載menu.zip