dtree是一個由JavaScript編寫成的簡單的樹形菜單組件，目前免費並且開源。
目前有很多的樹形菜單組件(比如ext)，dtree是一種簡單易懂的js組件，
不需要複雜的操作即可生產，同時支持動態從數據庫引入數據
解壓後有以下幾部分：
img文件夾： 包含樹形菜單顯示需要的圖標
api.html ： 作者寫的dtree幫助文檔
dtree.css： 樹形菜單的樣式
dtree.js ： js核心文件，代碼都在其中
example01.html：樹形菜單實例 dtree主要方法介紹：
dtree主要方法介紹：
add(parameters)：添加一個樹節點，實際參數有9個add(id,pid,name,url,title,target,icon,iconOpen,open);
位置 參數別名 類型 功能
1 id int 節點自身的id(唯一)
2 pid int 節點的父節點id
3 name string 節點顯示在頁面上的名稱
4 url string 節點的鏈接地址
5 title string 鼠標放在節點上顯示的提示信息
6 target string 節點鏈接所打開的目標frame
7 icon string 節點關閉狀態時顯示的圖標
8 iconOpen string 節點打開狀態時顯示的圖標
9 open bool 節點第一次加載是否打開
註：dtree.js文件中是一些默認圖片的路徑，可以自己配置圖片和路徑，我下載的在44~57行
openAll()打開全部節點，可在樹對象創建前或創建後調用
closeAll()關閉全部節點，可在樹對象創建前或創建後調用
openTo(id,select)打開指定id的節點，可以傳兩個參數：
id 指定需要打開的節點的唯一id
select 是否讓該節點處於選中狀態
config配置
變量 類型 默認值 描述
target string 所有節點的target
folderLinks bool true 文件夾可被鏈接
useSelection bool true 節點可被選擇高亮
useCookies bool true 樹可以使用cookie記住狀態
useLines bool true 創建帶結構連接線的樹
useIcons bool true 創建帶有圖表的樹
useStatusText bool false 用節點名替代顯示在狀態欄的節點url
closeSameLevel bool false 同級節點只允許一個節點處於打開狀態
inOrder bool false 加速父節點樹的顯示
例如：tree.config.closeSameLevel=true;表示打開某級節點時，該級其他處於打開狀態的同級節點會被關閉
示例代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tree</title>
<link rel="StyleSheet" href="dtree.css" type="text/css" /><!-- 引入css樣式表 -->
<script type="text/javascript" src="dtree.js"></script><!-- 引入js腳本 -->
</head>
<body>
<div class="dtree"><!--創建一個div層，指定class為「dtree」，此時該層就引用了dtree的樣式 -->
<script type="text/javascript">
d = new dTree('d');//new一個樹對象
//設置樹的節點及其相關屬性
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
//config配置，設置文件夾不能被鏈接，即有子節點的不能被鏈接。
d.config.folderLinks=false;
document.write(d);
</script>
</div>
</body>
</html>
目前有很多的樹形菜單組件(比如ext)，dtree是一種簡單易懂的js組件，
不需要複雜的操作即可生產，同時支持動態從數據庫引入數據
解壓後有以下幾部分：
img文件夾： 包含樹形菜單顯示需要的圖標
api.html ： 作者寫的dtree幫助文檔
dtree.css： 樹形菜單的樣式
dtree.js ： js核心文件，代碼都在其中
example01.html：樹形菜單實例 dtree主要方法介紹：
dtree主要方法介紹：
add(parameters)：添加一個樹節點，實際參數有9個add(id,pid,name,url,title,target,icon,iconOpen,open);
位置 參數別名 類型 功能
1 id int 節點自身的id(唯一)
2 pid int 節點的父節點id
3 name string 節點顯示在頁面上的名稱
4 url string 節點的鏈接地址
5 title string 鼠標放在節點上顯示的提示信息
6 target string 節點鏈接所打開的目標frame
7 icon string 節點關閉狀態時顯示的圖標
8 iconOpen string 節點打開狀態時顯示的圖標
9 open bool 節點第一次加載是否打開
註：dtree.js文件中是一些默認圖片的路徑，可以自己配置圖片和路徑，我下載的在44~57行
openAll()打開全部節點，可在樹對象創建前或創建後調用
closeAll()關閉全部節點，可在樹對象創建前或創建後調用
openTo(id,select)打開指定id的節點，可以傳兩個參數：
id 指定需要打開的節點的唯一id
select 是否讓該節點處於選中狀態
config配置
變量 類型 默認值 描述
target string 所有節點的target
folderLinks bool true 文件夾可被鏈接
useSelection bool true 節點可被選擇高亮
useCookies bool true 樹可以使用cookie記住狀態
useLines bool true 創建帶結構連接線的樹
useIcons bool true 創建帶有圖表的樹
useStatusText bool false 用節點名替代顯示在狀態欄的節點url
closeSameLevel bool false 同級節點只允許一個節點處於打開狀態
inOrder bool false 加速父節點樹的顯示
例如：tree.config.closeSameLevel=true;表示打開某級節點時，該級其他處於打開狀態的同級節點會被關閉
示例代碼：
複製代碼代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tree</title>
<link rel="StyleSheet" href="dtree.css" type="text/css" /><!-- 引入css樣式表 -->
<script type="text/javascript" src="dtree.js"></script><!-- 引入js腳本 -->
</head>
<body>
<div class="dtree"><!--創建一個div層，指定class為「dtree」，此時該層就引用了dtree的樣式 -->
<script type="text/javascript">
d = new dTree('d');//new一個樹對象
//設置樹的節點及其相關屬性
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
//config配置，設置文件夾不能被鏈接，即有子節點的不能被鏈接。
d.config.folderLinks=false;
document.write(d);
</script>
</div>
</body>
</html>
沒有留言:
張貼留言