• dTree是一个易于使用的JavaScript树形菜单控件

  • 支持无限分级，可以在同一个页面中放置多个dTree，可以为每个节点指定不同的图标。


使用方式：

  1. 引入dtree.css样式

  2. 引入dtree.js脚本文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type=
"text/javascript"
>
  
<!--
  
d = 
new 
dTree(
'd'
);
  
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'
);
  
document.write(d);
  
//-->
  
</script>

参数介绍：

名字

类型    

描述

id

Number

唯一的ID号

pid

Number

判定父节点的数字,根节点的值为 -1

name

String    

节点的文本标签 

url

String

节点的Url

title

String

节点的Title

target

String    

节点的target 

icon

String

用做节点的图标,节点没有指定图标时使用默认值

iconOpen

String    

用做节点打开的图标,节点没有指定图标时使用默认值

open

Boolean 

判断节点是否打开