Use dtree to implement tree menu dtree usage instructions_navigation menu

Preparation:
Please download the dtree.zip file from Script Homehttp://www.jb51.net/jiaoben/31974.html
Introduction to the dtree.zip compressed package:
dtree is a simple tree menu component written in JavaScript, which is currently free and open source.
There are currently many tree menu components (such as ext). dtree is a simple and easy-to-understand js component.
It can be produced without complex operations and supports dynamic introduction of data from the database.
Decompression There are the following parts:
img folder: Contains the icons needed to display the tree menu
api.html: dtree help document written by the author
dtree.css: Tree menu style
dtree .js: js core file, the code is all in it
example01.html: Introduction to the main method of tree menu instance dtree:
Introduction to the main method of dtree:
add(parameters): Add a tree node, actual parameters There are 9 add(id,pid,name,url,title,target,icon,iconOpen,open);
Positional parameter alias type function
1 id int node's own id (unique)
2 pid int The parent node id of the node
3 name string The name of the node displayed on the page
4 url ​​string The link address of the node
5 title string The prompt information displayed when the mouse is placed on the node
6 target string The target frame opened by the node link
7 icon string The icon displayed when the node is closed
8 iconOpen string The icon displayed when the node is open
9 open bool Whether the node is opened when it is loaded for the first time
Note : The dtree.js file contains the paths of some default images. You can configure the images and paths yourself. The ones I downloaded are on lines 44~57.
openAll() opens all nodes and can be called before or after the tree object is created.
closeAll() closes all nodes. You can call
openTo(id,select) before or after the tree object is created to open the node with the specified id. You can pass two parameters:
id specifies the unique node that needs to be opened. id
　select Whether to make the node selected
config configuration
Variable type default value description
target string target of all nodes
folderLinks bool true Folders can be linked
useSelection bool true Nodes can be selected and highlighted
useCookies bool true Trees can use cookies to remember status
useLines bool true Create trees with structural connecting lines
useIcons bool true Create trees with charts
useStatusText bool false Replace the node url displayed in the status bar with the node name
closeSameLevel bool false The sibling node only allows one node to be open
inOrder bool false Speed ​​up the display of the parent node tree
For example: tree.config.closeSameLevel =true; means that when a node at a certain level is opened, other open nodes at the same level at that level will be closed
Sample code:

Copy code The code is as follows:

< /html>