Skyzyx.com - JavaScripts

» Script: dTree

Preface

I came across this script while looking for a tree-style menu for a client of mine. This one is brilliant.

Preparation

The first thing you want to do is save the following code as a file somewhere where you can find it. Clicking the following link will show you the source. From there, you can copy it into your text-editor and save it.

dtree.js (Just the JavaScript library)

dtree.zip (Code, icons and demo)

Next thing you want to do is include it in the <HEAD> tag as a JavaScript Library.

<script language="JavaScript" type="text/javascript" src="dtree.js"></script>

Creating A New Instance Of dTree

You need to create a new instance of the dTree() object. Using a variable (in this case, "d"), you create the object by passing the name of the variable (soon to be the object) as the parameter.

<script language="JavaScript" type="text/javascript">
<!--

var d = new dTree('d');

//-->
</script>

Setting Up And Drawing The Tree

To add nodes to the tree, you use the obj.add() function. The following is a list of parameters that can be called (in this order):

Name	Type	Description
id	Number	Unique identity number. (Required)
pid	Number	Number refering to the parent node. The value for the root node has to be -1. (Required)
name	String	Text label for the node. (Required)
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.

See the example below:

<script language="JavaScript" type="text/javascript">
<!--

// Create dTree object
d = new dTree('d');

d.add(0, -1, 'My Computer');
d.add(1, 0, 'Boot Drive (C:)', '', '', '', '../img/tree_drive.gif', '../img/tree_drive.gif');
        d.add(4, 1, 'Documents and Settings');
                d.add(9, 4, 'File 1');
                d.add(10, 4, 'File 2');
                d.add(11, 4, 'File 3');
        d.add(6, 1, 'Windows');
                d.add(13, 6, 'File 1');
                d.add(14, 6, 'File 2');
                d.add(15, 6, 'File 3');
d.add(2, 0, 'CD-ROM (D:)', '', '', '', '../img/tree_cd.gif', '../img/tree_cd.gif');
d.add(3, 0, 'Recycle Bin', '', '', '', '../img/tree_trash.gif');

// Draw the tree to the screen
document.write(d);

//-->
</script>

Basic Features

The three most common features of dTree are openAll(), closeAll(), and openTo().

openAll() does exactly what it seems it does: it opens every single node of the tree. Inversely, closeAll() closes every single node of the tree.

openTo() will open the tree to a specific node, and (optionally) can highlight that node. openTo() has two parameters. The first is the ID of the node (integer). This tells dTree where to open the tree to. The second (optional) parameter is a boolean value telling dTree whether or not to highlight that node. An example can be seen below.

<!-- Open and Close All -->
<a href="#" onclick="d.openAll();">open all</a>
<a href="#" onclick="d.closeAll();">close all</a>

<!-- "Photoshop.exe" node has an ID of 26 -->
<a href="#" onclick="d.openTo(26);">open to photoshop.exe</a>

Example:

open all | close all | open to photoshop.exe

Fine-Tuning With CSS

The following is a default CSS stylesheet for use with this menu tree. This assumes that the tree is called within a container with a classname of "dtree".

<style type="text/css">
.dtree {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	white-space: nowrap;
}
.dtree img {
	border: 0px;
	vertical-align: middle;
}
.dtree a {
	color: #333;
	text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
	white-space: nowrap;
	padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
	color: #333;
	text-decoration: underline;
}
.dtree a.nodeSel {
	background-color: #c0d2ec;
}
.dtree .clip {
	overflow: hidden;
}
</style>

Advanced Features

dTree has some more advanced features included in its API. These features are documented on the dTree API documentation page. Check it out to access the full flexibility of this script.

Compatibility

Gecko M18 and newer: Known to work
IE/Win 5.0 and newer: Known to work
IE/Mac 5.0 and newer: Known to work
Opera 7.0 and newer: Known to work
Other/Older browsers: Known to fail.

» Suck-O-Meter

At your option, you may use this Suck-O-Meter to let me know what you think about this script or documentation. If you want to let me know how to make it better, you need to do just that. Things like "It sucks", or "It doesn't work" don't tell me anything. Be articulate. Be specific. If you're going to comment, please say something understandable.

All fields are required!