Preparatory work:
Please download dtree.zip files from the cloud-dwelling community http://www.jb51.net/jiaoben/31974.html
Dtree.zip Compression Package Introduction:
Dtree is a simple tree-shaped menu component written by JavaScript that is free and open source.
At present, there are many tree-shaped menu components (such as EXT), Dtree is a simple and easy to understand JS components,
Can be produced without complex operations, while supporting the dynamic introduction of data from the database
After decompression, the following sections are available:
img Folder: Contains icons for the tree menu to display
Api.html: The Dtree help document written by the author
DTREE.CSS: The style of the tree menu
Dtree.js:js core files, where the code is
Example01.html: Tree Menu Instance Dtree Main Method Introduction:
Dtree Main Method Introduction:
Add (Parameters): Adds a tree node, the actual parameter has 9 add (id,pid,name,url,title,target,icon,iconopen,open);
Positional parameter alias type feature
ID of the 1 ID int node itself (unique)
2 PID int node's parent node ID
3 Name string node is displayed on the page
4 URL string node's link address
5 title string Mouse on the node to display the hint information
6 Target String node link open destination Frame
7 Icon String node icons displayed when the state is closed
8 Iconopen The icon displayed when the string node is open
9 open BOOL node first loaded is opened
Note: The Dtree.js file is the path to some default pictures, you can configure your own pictures and paths, I downloaded in the 44~57 line
OpenAll () Opens all nodes, which can be invoked before or after the tree object is created
CloseAll () Closes all nodes, which can be invoked before or after the tree object is created
Opento (Id,select) opens the node with the specified ID, and can pass two parameters:
ID Specifies the unique ID of the node that needs to be opened
Select whether to leave the node in the selected state
Config configuration
Variable type default value description
Target for all nodes of target string
folderlinks bool True folder can be linked
useselection bool True node can be selected to highlight
usecookies bool True tree can use cookies to remember status
uselines bool True to create a tree with structural connectors
useicons bool True to create a tree with a chart
usestatustext BOOL to replace the node URL displayed in the status bar with a section name
closesamelevel bool false sibling nodes allow only one node to be open
inorder bool False accelerates the parent node tree display
For example, tree.config.closesamelevel=true indicates that when a level node is opened, other open sibling nodes at that level are closed
Sample code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<title>Tree</title>
<link rel= "StyleSheet" href= "Dtree.css" type= "text/css"/><!--introduce CSS style sheets-->
<script type= "Text/javascript" src= "Dtree.js" ></script><!--to introduce JS script-->
<body>
<div class= "Dtree" ><!--create a div layer, specifying class as "Dtree", at which point the layer references the Dtree style-->
<script type= "Text/javascript" >
D = new Dtree (' d ');//new a Tree object
Set the node for the tree and its associated properties
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 ');
Config configuration, the Settings folder can not be linked, that is, the child nodes can not be linked.
D.config.folderlinks=false;
document.write (d);
</script>
</div>
</body>
