dtree地址：http://destroydrop.com/javascripts/tree/
Key features
- 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
- Alternative images for each node
Dtree的源码非常短，可以分析下。
http://destroydrop.com/javascripts/tree/api/
add()
Adds a node to the tree.
Can only be called before the tree is drawn.
id, pid and name are required.
Parameters
| Name | Type | Description |
|---|---|---|
| id | Number | Unique identity number. |
| pid | Number | Number refering to the parent node. The value for the root node has to be -1. |
| name | String | Text label for the node. |
| url | String | Url for the node. |
| title | String | Title for the node. |
| target | String | Target for the node. |
| icon | String | Image file to use as the icon. Uses default if not specified. |
| iconOpen | String | Image file to use as the open icon. Uses default if not specified. |
| open | Boolean | Is the node open. |
Example
mytree.add(1, 0, ‘My node‘, ‘node.html‘, ‘node title‘, ‘mainframe‘,
‘img/musicfolder.gif‘);
<head> <title>Destroydrop » Javascripts » Tree</title> <link rel="StyleSheet" href="dtree.css" type="text/css" /> <script type="text/javascript" src="dtree.js"></script> </head> <body> <h1><a href="/">Destroydrop</a> » <a href="/javascripts/">Javascripts</a> » <a href="/javascripts/tree/">Tree</a></h1> <h2>Example</h2> <div class="dtree"> <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p> <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> </div>