<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> | <a href="javascript: d.openTo(4, true);">close all</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.config.target = "mytarget";
d.config.folderLinks = false;
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html','444444');
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>
<p><a href="mailto:drop@destroydrop.com">©2002-2003 Geir Landrö</a></p>
</body>
</html>
]]>
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";
]]>