| 導購 | 订阅 | 在线投稿
分享
 
 
 

dtree

來源:互聯網網民  2010-07-08 18:47:08  評論

簡介dtree是一個由JavaScript編寫成的簡單的樹形菜單組件,目前免費並且開源。

dtree
dtree

目前有很多的樹形菜單組件(比如ext),dtree是一種簡單易懂的js組件,不需要複雜的操作即可生産,同時支持動態從數據庫引入數據。

dTree可以不用添加任何頁面而直接用代碼實現多個欄目,並可以實現無限分級,下面是官方介紹的優點:

- Unlimited number of levels(無限分級)

- Can be used with or without frames(可用于框架或非框架頁面)

- Remembers the state of the tree between pages(在不同頁面之間可記住當前狀態)

- Possible to have as many trees as you like on a page(可以得到你想要數量的樹型)

- All major browsers suported(支持的浏覽器)

Internet Explorer 5+ Netscape 6+ Opera 7+ Mozilla

- Generates XHTML 1.0 strict validated output(嚴格支持XHTML 1.0)

- Alternative images for each node(每個節點用圖片代替)

創建dtree1)從官網上下載dtree的源文件壓縮包「dtree.zip」,包內包含以下幾個文件:

img文件夾: 包含樹形菜單顯示需要的圖標

api.html : 作者寫的dtree幫助文檔

dtree.css: 樹形菜單的樣式

dtree.js : js核心文件,代碼都在其中

example01.html:樹形菜單實例

2)將壓縮包內的文件拷貝到項目webroot下(example01.html可以不拷貝)

3)新建一個web文件(*.html、*.jsp...都可以),首先引入css和js文件:

<link rel="StyleSheet" href="dtree.css" type="text/css" />

<script type="text/javascript" src="dtree.js"></script>

然後在<body>裏創建一個div層,指定class爲「dtree」,此時該層就引用了dtree的樣式

<div class="dtree">

<script type="text/javascript">

tree = new dTree('tree');

......

</script>

</div>

注:具體代碼可以參照example01.html

4)最後保存執行即可看到一個樹形菜單。

常用方法和配置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文件中約87-113行是一些默認圖片的路徑,可以自己配置圖片和路徑。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;表示打開某級節點時,該級其他處于打開狀態的同級節點會被關閉。

具體配置功能請參照官網實例。

參數規範dtree大多數方法都有一個以上的參數,大多數參數都含有默認值,因此不需要每次都把全部參數傳進入

例:dtree.add(id,pid,name,url); 後面5個參數被省略,會采用默認配置

如果是有間隔的默認值,中間需要加引號:

例:dtree.add(id,pid,name,'','','','','',true);第4-8個參數省略,第9個參數自定義

特殊:add()方法如果需要設置第5個參數(彈出提示信息),則第4個參數不能爲默認,否則是沒有效果的。

例:dtree.add(id,pid,name,url,title); 如果url設置爲「''」,不能彈出提示信息

 
特别声明:以上内容(如有图片或视频亦包括在内)为网络用户发布,本站仅提供信息存储服务。
 
   簡介  dtree是一個由JavaScript編寫成的簡單的樹形菜單組件,目前免費並且開源。[url=/baike/detail_1644792.html][img]http://image.wangchao.net.cn/baike/1278586027705.jpg[/img][/url]dtree   目前有很多的樹形菜單組件(比如ext),dtree是一種簡單易懂的js組件,不需要複雜的操作即可生産,同時支持動態從數據庫引入數據。   dTree可以不用添加任何頁面而直接用代碼實現多個欄目,並可以實現無限分級,下面是官方介紹的優點:   - Unlimited number of levels(無限分級)   - Can be used with or without frames(可用于框架或非框架頁面)   - Remembers the state of the tree between pages(在不同頁面之間可記住當前狀態)   - Possible to have as many trees as you like on a page(可以得到你想要數量的樹型)   - All major browsers suported(支持的浏覽器)   Internet Explorer 5+ Netscape 6+ Opera 7+ Mozilla   - Generates XHTML 1.0 strict validated output(嚴格支持XHTML 1.0)   - Alternative images for each node(每個節點用圖片代替) 創建dtree  1)從官網上下載dtree的源文件壓縮包「dtree.zip」,包內包含以下幾個文件:   img文件夾: 包含樹形菜單顯示需要的圖標   api.html : 作者寫的dtree幫助文檔   dtree.css: 樹形菜單的樣式   dtree.js : js核心文件,代碼都在其中   example01.html:樹形菜單實例   2)將壓縮包內的文件拷貝到項目webroot下(example01.html可以不拷貝)   3)新建一個web文件(*.html、*.jsp...都可以),首先引入css和js文件:   <link rel="StyleSheet" href="dtree.css" type="text/css" />   <script type="text/javascript" src="dtree.js"></script>   然後在<body>裏創建一個div層,指定class爲「dtree」,此時該層就引用了dtree的樣式   <div class="dtree">   <script type="text/javascript">   tree = new dTree('tree');   ......   </script>   </div>   注:具體代碼可以參照example01.html   4)最後保存執行即可看到一個樹形菜單。 常用方法和配置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文件中約87-113行是一些默認圖片的路徑,可以自己配置圖片和路徑。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;表示打開某級節點時,該級其他處于打開狀態的同級節點會被關閉。   具體配置功能請參照官網實例。 參數規範  dtree大多數方法都有一個以上的參數,大多數參數都含有默認值,因此不需要每次都把全部參數傳進入   例:dtree.add(id,pid,name,url); 後面5個參數被省略,會采用默認配置   如果是有間隔的默認值,中間需要加引號:   例:dtree.add(id,pid,name,'','','','','',true);第4-8個參數省略,第9個參數自定義   特殊:add()方法如果需要設置第5個參數(彈出提示信息),則第4個參數不能爲默認,否則是沒有效果的。   例:dtree.add(id,pid,name,url,title); 如果url設置爲「''」,不能彈出提示信息
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有