dTree是一个易于使用的JavaScript树形菜单控件。支持无限分级,可以在同一个页面中放置多个dTree,可以为每个节点指定不同的图标。
dTree is a free JavaScript tree menu.
There are a lot of tree generating scripts just like this one, and many of them are great. So why use dTree?
dTree is very simple to set up and use. You don't have to worry about adding pages to the tree in a specific order, which makes it ideal for generating a tree from a database.
The first version of the tree is still available
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
API Overview
Functions
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');
openAll()
Opens all the nodes.
Can be called before and after the tree is drawn.
Example
mytree.openAll();
closeAll()
Closes all the nodes.
Can be called before and after the tree is drawn.
Example
mytree.closeAll();
openTo()
Opens the tree to a certain node and can also select the node.
Can only be called after the tree is drawn.
Parameters
Name | Type | Description |
---|---|---|
id | Number | Identity number for the node. |
select | Boolean | Should the node be selected. |
Example
mytree.openTo(4, true);
Configuration
Variable | Type | Default | Description |
---|---|---|---|
target | String | true | Target for all the nodes. |
folderLinks | Boolean | true | Should folders be links. |
useSelection | Boolean | true | Nodes can be selected(highlighted). |
useCookies | Boolean | true | The tree uses cookies to rember it's state. |
useLines | Boolean | true | Tree is drawn with lines. |
useIcons | Boolean | true | Tree is drawn with icons. |
useStatusText | Boolean | false | Displays node names in the statusbar instead of the url. |
closeSameLevel | Boolean | false | Only one node within a parent can be expanded at the same time. openAll() and closeAll() functions do not work when this is enabled. |
inOrder | Boolean | false | If parent nodes are always added before children, setting this to true speeds up the tree. |
Example
mytree.config.target = "mytarget";
主页: http://destroydrop.com/javascripts/tree/default.html