JSCookTree JavaScript Tree

JSCookTree (v1.0) is a simple javascript based tree builder. It allows users to create cool looking trees and menus easily. The program should work on IE4+ and Netscape 6+. This program is relatively simple to use and very versatile. So give it a try.

Tutorial

To create a tree, use the following format:


<SCRIPT LANGUAGE="JavaScript"><--

var tree_root_node =

[ 'prefix', 'title', 'url', 'target',

	child_nodes

]

--></SCRIPT>

Use null in prefix if you want to use the default tree node property. More specifics will be shown. For example:


<SCRIPT LANGUAGE="JavaScript"><--

var menu = [

	[null, 'abcdefg', null, 'content',

		[null, 'abcdefg', null, 'content'],

		[null, 'abcdefg', null, 'content'],

		[null, 'abcdefg', null, 'content',

			[null, 'abcdefg', null, 'content'],

			[null, 'abcdefg', null, 'content'],

		]

	],

	[null, 'abcdefg', null, 'content'],

	[null, 'abcdefg', null, 'content']

];

--></SCRIPT>

Which looks like:

To actually show the tree, you need to do the following:
```
<LINK REL="stylesheet" HREF="Theme_XP1/theme.css" TYPE=text/css>

<SCRIPT LANGUAGE="JavaScript" SRC="JSCookTree.js"></SCRIPT>
```
Here I used XP1 theme, which is shown below, to provide the style sheet necessary for the tree. You can of course define your own style sheets and use XP1 theme's style sheet as the guide. Also, make sure the paths to the style sheet and JSCookTree.js are correct. Then you need to do the following:
```
<SCRIPT LANGUAGE="JavaScript">

	drawTree ('id', 'tree title', tree_root_node, node_properties);

</SCRIPT>
```
id corresponds to the ID of DIV, or TD, as well as any other tags that support innerText. So, if you are not sure, just do some experiments. 'tree_title' can be null. tree_root_node corresponds to the tree you just seen. node_properties will be described below. It can be null if you want to use the default node properties.

The default node properties are not very fancy. So you may want to specify something more fancy, like XP1 theme. But here is what the default node properties look like:


var m_nodeProperties =

[

	// 0, HTML code for folders in closed and open form, respectively

	["", ""],

	// 1, HTML code for connectors for folders.  First one connects next, second one doesn"t

	["", ""],

	// 2, HTML code for connectors for folders.  First one connects next, second one doesn"t

	["", ""],

	// 3, HTML code for leaves

	"",

	// 4, HTML code for connectors for leaves.  First one connects next, second one doesn"t

	["", ""],

	// 5, HTML code for spacers.  First one connects next, second one doesn"t

	["&nbsp;&nbsp;&nbsp;&nbsp;", "&nbsp;&nbsp;&nbsp;&nbsp;"]

];

As you might noticed, the node property for folder needs two forms. One for closed form and one for open form. This is also true for prefix part of the tree node, if you wish to specify a node property that is not the default.

Finally, to disable selection. You could do something like:

You can look at my homepage for more examples.

Themes

You can try out the following themes:

To use the themes, first download the theme zip file. After unzip, configure theme.js so that directories are properly located. It is usually better to use absolute URI path, but then you might not be able to test trees locally. Up to you. Then include the following

<LINK REL=stylesheet HREF="Theme_XP1/theme.css" TYPE=text/css> <SCRIPT LANGUAGE="JavaScript" SRC="Theme_XP1/theme.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="js/JSCookTree.js"></SCRIPT> with correct path for theme.css, theme.js and JSCookTree.js. theme.css contains style sheet. theme.js contains default tree node properties for node graphics so that you could pass theme to drawTree function as the node properties.

If you could make more themes, please email them to me at heng@ag.arizona.edu. Thanks.

Copyright

JSCookTree is copyrighted by Heng Yuan, 2002. The program is distributed under BSD license. It is provided 'as is'. There are no registrations or fees for using this program. If you want to modify the program, please include the proper credits.