以前做網站，樹形菜單一般都很簡單，自己定義風格樣式，簡單的js控制，後來原來網上很多文章都在討論Js樹型菜單，看了幾個實例，發現dtree樹比較簡單好用。
這個無限級可刷新Js樹型菜單 dTree
1、可設置無限級菜單
2、不必使用框架
3、可刷新，多頁面內跳轉不會影響菜單
4、可限級創造子樹
5、支持目前主流浏覽器：IE5，6，7
6、節點圖片可設置切換圖片效果
下載
解壓縮treemenu.rar 包。
dtree目錄下包括這些文件：example01.html 、 hovertreedtree.js 、 api.html 、 hovertreedtree.css 和img目錄
注意：除了api.html之外，其它的文件都是必須拷貝的。api.html是dtree的函數介紹。
打開example01.html文件 http://hovertree.com/texiao/js/9.htm
<div class="dtree">
<p><a href="javascript: hovertreemenu.openAll();">全部展開</a> | <a href="javascript: hovertreemenu.closeAll();">全部收起</a></p>
<script type="text/javascript">
<!--
var hovertreemenu = new dTree('hovertreemenu');
hovertreemenu.add(0, -1, '何問起樹形菜單');
hovertreemenu.add(1,0,'節點 1','http://hovertree.com');
hovertreemenu.add(2, 0, '節點 2', 'http://tool.hovertree.com/');
hovertreemenu.add(3, 1, '節點 1.1', 'http://hovertree.com/hvtart/bjae/pmdo4lfd.htm');
hovertreemenu.add(4, 0, '節點 3', 'http://hovertree.com/hvtart/bjae/q3etb2qv.htm');
hovertreemenu.add(5, 3, '節點 1.1.1', 'http://hovertree.com/hvtart/bjae/l59bo21o.htm');
hovertreemenu.add(6, 5, '節點 1.1.1.1', 'http://hovertree.com/hvtart/bjae/lhnydfey.htm');
hovertreemenu.add(7, 0, '節點 4', 'http://hovertree.com/hvtart/bjae/k4085k8v.htm');
hovertreemenu.add(8, 1, '節點 1.2', 'http://hovertree.com/hvtart/bjae/m8wrrmrw.htm');
hovertreemenu.add(9, 0, '圖片', 'http://hovertree.com/hvtimg/', 'Pictures I\'ve taken over the years', '', '', 'http://hovertree.com/texiao/js/9/img/imgfolder.gif');
hovertreemenu.add(10, 9, '歡迎您！', 'http://hovertree.com/hvtart/bjae/onxw4ahp.htm', 'Pictures of Gullfoss and Geysir');
hovertreemenu.add(11, 9, '雪花飛舞', 'http://hovertree.com/hvtart/bjae/79mtsd1t.htm');
hovertreemenu.add(12, 0, '回收站', 'http://hovertree.com/texiao/', '', '', 'http://hovertree.com/texiao/js/9/img/trash.gif');
document.write(hovertreemenu);
//-->
</script>
</div>
API：
http://hovertree.com/texiao/js/9/api.htm
d.add(0,-1,’My example tree’);
這一句為樹添加了一個根節點，顯示名稱為’My example tree’ d.add(1,0,’Node 1’,’example01.html’);
這一句在樹的根節點下面添加了一個子節點。（d.add（）方法的參數具體含義可參見api.html文件）
常用的：
第一個參數，表示當前節點的ID
第二個參數，表示當前節點的父節點的ID,根節點的值為 -1
第三個參數，節點要顯示的文字
第四個參數，節點的Url
第五個參數，鼠標移至該節點時節點的Title
第六個參數，節點的target
第七個參數，用做節點的圖標,節點沒有指定圖標時使用默認值
第八個參數，用做節點打開的圖標,節點沒有指定圖標時使用默認值
第九個參數，判斷節點是否打開
屬性菜單使用說明
函數
add()
向樹裡添加一個節點
只能在樹被創建之前調用.
必須 id, pid, name
參數
名字 類型 描述
id Number 唯一的ID號
pid Number 判定父節點的數字,根節點的值為 -1
name String 節點的文本標簽
url String 節點的Url
title String 節點的Title
target String 節點的target
icon String 用做節點的圖標,節點沒有指定圖標時使用默認值
iconOpen String 用做節點打開的圖標,節點沒有指定圖標時使用默認值
open Boolean 判斷節點是否打開
例子
mytree.add(1, 0, ’My node’, ’node.html’, ’node title’, ’mainframe’, ’img/musicfolder.gif’);
openAll()
打開所有節點
可在樹被創建以前或以後調用.
例子
mytree.openAll();
closeAll()
關閉所有節點
可在樹被創建以前或以後調用.
例子
mytree.closeAll();
openTo()
Opens the tree to a certain node and can also select the node.
只能在樹被創建以後調用..
參數
名字 類型 描述
id Number 節點唯一的ID號
select Boolean 判斷節點是否被選擇
例子
mytree.openTo(4, true);
配置
變量 類型 默認值 描述
target String true 所有節點的target
folderLinks Boolean true 文件夾可鏈接
useSelection Boolean true 節點可被選擇(高亮)
useCookies Boolean true 樹可以使用cookies記住狀態
useLines Boolean true 創建帶線的樹
useIcons Boolean true 創建帶有圖標的樹
useStatusText Boolean false 用節點名替代顯示在狀態欄的節點url
closeSameLevel Boolean false 只有一個有父級的節點可以被展開,當這個函數可用時openAll() 和 closeAll() 函數將不可用
inOrder Boolean false 如果父級節點總是添加在子級節點之前,使用這個參數可以加速菜單顯示.
例子
mytree.config.target = "mytarget";
完整代碼：
<!DOCTYPE html>
<html>
<head>
<title>JS樹形菜單Tree - 何問起</title><base target="_blank" />
<link rel="StyleSheet" href="http://hovertree.com/texiao/js/9/hovertreedtree.css" type="text/css" />
<script type="text/javascript" src="http://hovertree.com/texiao/js/9/hovertreedtree.js"></script>
<style>body{font-family:'Times New Roman', Times, serif}a{color:black}</style>
</head>
<body>
<h1><a href="http://hovertree.com/">hovertreemenu</a> » <a href="http://hovertree.com/menu/javascript/">JavaScripts</a> » <a href="http://hovertree.com/hvtart/bjae/pmdo4lfd.htm">Tree</a></h1>
<h2>何問起樹形菜單</h2>
<div class="dtree">
<p><a href="javascript: hovertreemenu.openAll();">全部展開</a> | <a href="javascript: hovertreemenu.closeAll();">全部收起</a></p>
<script type="text/javascript">
<!--
var hovertreemenu = new dTree('hovertreemenu');
hovertreemenu.add(0, -1, '何問起樹形菜單');
hovertreemenu.add(1,0,'節點 1','http://hovertree.com');
hovertreemenu.add(2, 0, '節點 2', 'http://tool.hovertree.com/');
hovertreemenu.add(3, 1, '節點 1.1', 'http://hovertree.com/hvtart/bjae/pmdo4lfd.htm');
hovertreemenu.add(4, 0, '節點 3', 'http://hovertree.com/hvtart/bjae/q3etb2qv.htm');
hovertreemenu.add(5, 3, '節點 1.1.1', 'http://hovertree.com/hvtart/bjae/l59bo21o.htm');
hovertreemenu.add(6, 5, '節點 1.1.1.1', 'http://hovertree.com/hvtart/bjae/lhnydfey.htm');
hovertreemenu.add(7, 0, '節點 4', 'http://hovertree.com/hvtart/bjae/k4085k8v.htm');
hovertreemenu.add(8, 1, '節點 1.2', 'http://hovertree.com/hvtart/bjae/m8wrrmrw.htm');
hovertreemenu.add(9, 0, '圖片', 'http://hovertree.com/hvtimg/', 'Pictures I\'ve taken over the years', '', '', 'http://hovertree.com/texiao/js/9/img/imgfolder.gif');
hovertreemenu.add(10, 9, '歡迎您！', 'http://hovertree.com/hvtart/bjae/onxw4ahp.htm', 'Pictures of Gullfoss and Geysir');
hovertreemenu.add(11, 9, '雪花飛舞', 'http://hovertree.com/hvtart/bjae/79mtsd1t.htm');
hovertreemenu.add(12, 0, '回收站', 'http://hovertree.com/texiao/', '', '', 'http://hovertree.com/texiao/js/9/img/trash.gif');
document.write(hovertreemenu);
//-->
</script>
</div>
<p><a href="http://hovertree.com/">©何问起</a></p>
</body>
</html>