用dtree實現樹形選單 dtree使用說明

NO IMAGE

準備工作:
請從指令碼之家//www.jb51.net/jiaoben/31974.html下載dtree.zip檔案
dtree.zip壓縮包介紹:
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>

您可能感興趣的文章:

一個簡單的js樹形選單以前寫的兩個CSS樹形選單JS無限極樹形選單,json格式、陣列格式通用示例winform樹形選單無限級分類例項輕鬆學習jQuery外掛EasyUI EasyUI建立樹形選單無限級CSS樹形選單 Ver2.0json jQuery實現的無限級樹形選單效果程式碼Android提高之多級樹形選單的實現方法CSS TreeMenu 二級樹形選單示例Java遞迴如何正確輸出樹形選單