<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:
<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.
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 [" ", " "] ];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.
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
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.