affordable web development services
| About Us | Services | Download | Order | Support | Subscribe to News Feed Follow us on Twitter Join us on Facebook |
 

Tigra Tree Menu PRO

Table of Contents

Description

High performance, efficient resources utilization and compact configuration files of the component make it possible to use it with huge hierarchies. Very little or no web development experience is required to start using the script. Powerfull features are available for advanced programmers.

Features

Compatibility Table

Tigra Tree Menu PRO is designed to efficiently employ maximum capabilities of the visitor's browser. While supporting old browsers with limited or no dynamic content update capabilities, Tigra Tree Menu PRO efficiently uses features of new browsers making navigation through hosting application smooth and comfortable.
Here is a table of the application compatibility:

Platform Browser
MS IE Netscape Mozilla Firefox Opera Safari AOL Konqueror
Windows 95/98/ME/2000/XP 4.0+ 4.08+ 0.9+ 5.0+ 3+ 4+ n/a
Mac OS 8/9/X 5.0+ 4.7+ 0.9+ 6.0+ 1.3+ ? n/a
KDE on Linux/FreeBSD n/a 4.7+ 0.9+ 6.0+ n/a n/a 3.3.1+

Files

Tigra Tree Menu PRO script consists of several files. This makes script maintenance easier and reduces network load.
Default distribution package contains:

Where * is wildcard for any substring.

Script files should be attached to HTML document with appropriate tags in header:

<head>
	<!-- some header data -->
	<link rel="stylesheet" href="tree.css">
	<script language="JavaScript" src="tree.js"></script>
	<script language="JavaScript" src="tree_items.js"></script>
	<script language="JavaScript" src="tree_tpl.js"></script>
</head>

There is no naming or location requirements for script files. Main script file and dependant files can reside anywhere on the server in the folder accessible from the web. If same files are used by several pages of the site then make sure links are correct for all of them.

Examples of correct script file links
Document Location Correct Links
Tree Menu Script http://www.domain.com/tree_menu/tree.js -
Page #1 http://www.domain.com/tree_menu/doc1.html http://www.domain.com/tree_menu/tree.js (Absolute w. domain)
/tree_menu/tree.js (Absolute w/o domain)
tree.js (Relative)
Page #2 http://www.domain.com/dir1/doc2.html http://www.domain.com/tree_menu/tree.js (Absolute w. domain)
/tree_menu/tree.js (Absolute w/o domain)
../tree_menu/tree.js (Relative)
Page #3 http://www.domain.com/dir1/dir2/doc3.html http://www.domain.com/tree_menu/tree.js (Absolute w. domain)
/tree_menu/tree.js (Absolute w/o domain)
../../tree_menu/tree.js (Relative)

Notes:

Building Tree Hierarchy

Tree Menu hierarchy is JavaScript structure that describes the content of navigation component, all its items and their links. Item scope settings are also defined in this structure. Normally tree hierarchy resides in separate file: tree_item.js.

Items variable are assigned array value with list of root items is assigned to structure. Each item is array itself containing one or more elements. Those elements are:

Below find example structure and the tree menu it creates:

var TREE_ITEMS = [
	['Home', '/', {'sb':'Status Bar Test Message'},
		['Services', '/services.html'],
		['Download', '/download.html'],
		['Order',    '/order.html', {'tw':'_top'}],
		['Support',  '/support.html'],
	],
	['Level 0 Item 1', null, null,
		['Level 1 Item 0', 'another.html'],
		['Level 1 Item 1', null, null,
			['Level 2 Item 0', null],
			['Level 2 Item 1', null],
		],
		['Level 1 Item 2'],
		['Level 1 Item 3'],
	]
];
Example of the menu tree

Notes:

Tree instance scope settings

By default Tree Template settings are located in tree_tpl.js file but they can be moved to any other JavaScript file linked to the HTML document containing the tree. This configuration code can also be inserted within <script> tag into HTML document itself.
Tree template structure is JavaScript associative array which defines default links target, default icons, default styles and global event handlers. Below is the list of supported keys with descriptions.

Configuration keys for tree instance scope settings
Key Description Accepted Values Default Value
 
General
target Name of the target frame or window for all item's links some_name - in framed layout pages will be opened in the frame with this name, if there is no frame with such name or if in non-framed layout pages will be opened in newly created window. Following links will reuse same window. _self
_self - in framed layout the link will be opened in the same frame where tree menu appears. In non-framed layout same window will be used for linked documents. This setting is normally used as default target for non-framed layouts
_blank - each link will be opened in the new window
_parent - in framed layout targeted document will be loaded in main window of the frameset, in non-framed layout it is equivalent to _self target
multiselections If set to true allows to select multiple items in the tree true and false false
keep_states If set to true only initial states (open/selected) of tree items are set via 'st' and 'sl' keys, after first load 'st' and 'sl' keys will be ignored and tree keeps states only via cookies true and false false
disable_states If set to true states (open/selected) of tree items are set only via 'st' and 'sl' keys and tree does not keep states via cookies true and false false
cookie_ext Additional parameters for cookie value that stores tree item states (opened/closed/selected) Any valid cookie parameter none
b_solid If set to true allows to execute a JavaScrips contained in captions of tree items true and false false
Icons (Root)
icon_48 Icon for a root path to the image Icon Sampleicons/base.gif
alt_48 alt and title attribute none
icon_52 Icon for selected root path to the image Icon Sampleicons/base.gif
alt_52 alt and title attribute none
icon_56 Icon for opened root path to the image Icon Sampleicons/base.gif
alt_56 alt and title attribute none
icon_60 Icon for selected opened root path to the image Icon Sampleicons/base.gif
alt_60 alt and title attribute none
icon_112 Icon for a root when mouse is over it path to the image Icon Sampleicons/base.gif
alt_112 alt and title attribute none
icon_116 Icon for selected root when mouse is over it path to the image Icon Sampleicons/base.gif
alt_116 alt and title attribute none
icon_120 Icon for opened root when mouse is over it path to the image Icon Sampleicons/base.gif
alt_120 alt and title attribute none
icon_124 Icon for selected opened root when mouse is over it path to the image Icon Sampleicons/base.gif
alt_124 alt and title attribute none
Icons (Root Leaf)
icon_32 Icon for a root leaf path to the image none
alt_32 alt and title attribute none
icon_36 Icon for selected root leaf path to the image none
alt_36 alt and title attribute none
icon_96 Icon for a root leafwhen mouse is over it path to the image none
alt_96 alt and title attribute none
icon_100 Icon for selected root leaf when mouse is over it path to the image none
alt_100 alt and title attribute none
Icons (Node)
icon_16 Icon for a node path to the image Icon Sampleicons/folder.gif
alt_16 alt and title attribute none
icon_20 Icon for selected node path to the image Icon Sampleicons/folderopen.gif
alt_20 alt and title attribute none
icon_24 Icon for opened node path to the image Icon Sampleicons/folderopen.gif
alt_24 alt and title attribute none
icon_28 Icon for selected opened node path to the image Icon Sampleicons/folderopen.gif
alt_28 alt and title attribute none
icon_80 Icon for a node when mouse is over it path to the image Icon Sampleicons/folder.gif
alt_80 alt and title attribute none
icon_84 Icon for selected node when mouse is over it path to the image Icon Sampleicons/folderopen.gif
alt_84 alt and title attribute none
icon_88 Icon for opened node when mouse is over it path to the image Icon Sampleicons/folderopen.gif
alt_88 alt and title attribute none
icon_92 Icon for selected opened node when mouse is over it path to the image Icon Sampleicons/folderopen.gif
alt_92 alt and title attribute none
Icons (Leaf)
icon_0 Icon for a leaf path to the image Icon Sampleicons/page.gif
alt_0 alt and title attribute none
icon_4 Icon for selected leaf path to the image Icon Sampleicons/page.gif
alt_4 alt and title attribute none
icon_64 Icon for a leaf when mouse is over it path to the image Icon Sampleicons/page.gif
alt_64 alt and title attribute none
icon_68 Icon for selected leaf when mouse is over it path to the image Icon Sampleicons/page.gif
alt_68 alt and title attribute none
Icons (Junctions)
icon_2 Junction Icon for leaf path to the image Icon Sampleicons/joinbottom.gif
alt_2 alt and title attribute none
icon_3 Junction Icon for last leaf path to the image Icon Sampleicons/join.gif
alt_3 alt and title attribute none
icon_18 Junction Icon for closed node path to the image Icon Sampleicons/plusbottom.gif
alt_18 alt and title attribute none
icon_19 Junction Icon for last closed node path to the image Icon Sampleicons/plus.gif
alt_19 alt and title attribute none
icon_26 Junction Icon for opened node path to the image Icon Sampleicons/minusbottom.gif
alt_26 alt and title attribute none
icon_27 Junction Icon for last opened node path to the image Icon Sampleicons/minus.gif
alt_27 alt and title attribute none
icon_50 Junction Icon for closed root path to the image none
alt_50 alt and title attribute none
icon_51 Junction Icon for last closed root path to the image none
alt_51 alt and title attribute none
icon_58 Junction Icon for opened root path to the image none
alt_58 alt and title attribute none
icon_59 Junction Icon for last opened root path to the image none
alt_59 alt and title attribute none
Icons (Misc)
icon_e Transparent image path to the image Icon Sampleicons/empty.gif
alt_e alt and title attribute none
icon_l Image with vertical line path to the image Icon Sampleicons/line.gif
alt_l alt and title attribute none
Styles (Root)
style_48 Style for caption of a root Name of CSS class defined for document none
style_52 Style for caption of selected root Name of CSS class defined for document none
style_56 Style for caption of opened root Name of CSS class defined for document none
style_60 Style for caption of selected opened root Name of CSS class defined for document none
style_112 Style for caption of a root when mouse is over it Name of CSS class defined for document none
style_116 Style for caption of selected root when mouse is over it Name of CSS class defined for document none
style_120 Style for caption of opened root when mouse is over it Name of CSS class defined for document none
style_124 Style for caption of selected opened root when mouse is over it Name of CSS class defined for document none
Styles (Root Leaf)
style_32 Style for caption of a root leaf Name of CSS class defined for document none
style_36 Style for caption of selected root leaf Name of CSS class defined for document none
style_96 Style for caption of a root leaf when mouse is over it Name of CSS class defined for document none
style_100 Style for caption of selected root leaf when mouse is over it Name of CSS class defined for document none
Styles (Node)
style_16 Style for caption of a node Name of CSS class defined for document none
style_20 Style for caption of selected node Name of CSS class defined for document none
style_24 Style for caption of opened node Name of CSS class defined for document none
style_28 Style for caption of selected opened node Name of CSS class defined for document none
style_80 Style for caption of a node when mouse is over it Name of CSS class defined for document none
style_84 Style for caption of selected node when mouse is over it Name of CSS class defined for document none
style_88 Style for caption of opened node when mouse is over it Name of CSS class defined for document none
style_92 Style for caption of selected opened node when mouse is over it Name of CSS class defined for document none
Styles (Leaf)
style_0 Style for caption of a leaf Name of CSS class defined for document none
style_4 Style for caption of a selected leaf Name of CSS class defined for document none
style_64 Style for caption of a leaf when mouse is over it Name of CSS class defined for document none
style_68 Style for caption of a selected leaf when mouse is over it Name of CSS class defined for document none
Styles (Misc)
style_icons Class for tree icons images Name of CSS class defined for document none
Event Handlers (Tree)
onConstruct User-defined function to be called on tree constructor call Name of custom JavaScript function none
beforeInit User-defined function to be called before tree is displayed Name of custom JavaScript function none
afterInit User-defined function to be called immediately after tree is displayed Name of custom JavaScript function none
Event Handlers (Item)
onItemOpen User-defined function to be called before tree item is opened Name of custom JavaScript function none
onItemClose User-defined function to be called before tree item is closed Name of custom JavaScript function none
onItemSelect User-defined function to be called before tree item is selected Name of custom JavaScript function none
onItemDeselect User-defined function to be called before tree item is deselected Name of custom JavaScript function none
onItemMover User-defined function to be called when mouse appears over some tree item Name of custom JavaScript function none
onItemMout User-defined function to be called when mouse go out of some tree item Name of custom JavaScript function none
Extra Event Handlers (Item)
userJoinEvent User-defined event handler that will be assigned to tree item +/- icon Object containing list of properties and their values See example. See Notes none
userIconEvent User-defined event handler that will be assigned to tree item icon Object containing list of properties and their values See Notes none
userTextEvent User-defined event handler that will be assigned to tree item's text Object containing list of properties and their values See Notes none

Below is the example of tree_tpl.js file content:

/*
	Feel free to use your custom icons for the tree. Make sure they are all of the same size.
	If you don't use some keys you can just remove them from this config
*/

var tree_tpl = {

	// general
	'target':'content',	// name of the frame links will be opened in
				// other possible values are:
				// _blank, _parent, _search, _self and _top

	// icons - root	
	'icon_48':'icons/base.gif',   // root icon normal
	'icon_52':'icons/base.gif',   // root icon selected
	'icon_56':'icons/base.gif',   // root icon opened
	'icon_60':'icons/base.gif',   // root icon selected opened

	// icons - node	
	'icon_16':'icons/folder.gif', // node icon normal
	'icon_20':'icons/folderopen.gif', // node icon selected
	'icon_24':'icons/folderopen.gif', // node icon opened
	'icon_28':'icons/folderopen.gif', // node icon selected opened

	'icon_80':'icons/folderopen.gif', // mouseovered node icon normal

	// icons - leaf
	'icon_0':'icons/page.gif', // leaf icon normal
	'icon_4':'icons/page.gif', // leaf icon selected

	// icons - junctions	
	'icon_2':'icons/joinbottom.gif', // junction for leaf
	'icon_3':'icons/join.gif',       // junction for last leaf
	'icon_18':'icons/plusbottom.gif', // junction for closed node
	'icon_19':'icons/plus.gif',       // junction for last closed node
	'icon_26':'icons/minusbottom.gif',// junction for opened node
	'icon_27':'icons/minus.gif',      // junction for last opened node

	// icons - misc
	'icon_e':'icons/empty.gif', // empty image
	'icon_l':'icons/line.gif',  // vertical line
	
	// styles - root
	'style_48':'mout', // normal root caption style
	'style_52':'mout', // selected root caption style
	'style_56':'mout', // opened root caption style
	'style_60':'mout', // selected opened root caption style
	'style_112':'mover', // mouseovered normal root caption style
	'style_116':'mover', // mouseovered selected root caption style
	'style_120':'mover', // mouseovered opened root caption style
	'style_124':'mover', // mouseovered selected opened root caption style
	
	// styles - node
	'style_16':'mout', // normal node caption style
	'style_20':'mout', // selected node caption style
	'style_24':'mout', // opened node caption style
	'style_28':'mout', // selected opened node caption style
	'style_80':'mover', // mouseovered normal node caption style
	'style_84':'mover', // mouseovered selected node caption style
	'style_88':'mover', // mouseovered opened node caption style
	'style_92':'mover', // mouseovered selected opened node caption style

	// styles - leaf
	'style_0':'mout', // normal leaf caption style
	'style_4':'mout', // selected leaf caption style
	'style_64':'mover', // mouseovered normal leaf caption style
	'style_68':'mover', // mouseovered selected leaf caption style

	// event handlers - item
	'onItemOpen':'open_test', // on item open event handler
	'onItemClose':'close_test', // on item close event handler

	'userJoinEvent': {
		'oncontextmenu':'return h_context_menu(o_tree_item)'
	}
	
	// make sure there is no comma after the last key-value pair
};

function open_test (o_item) {
	// here you can insert your item open event handler
	return true;
}
function close_test (o_item) {
	// here you can insert your item close event handler
	return true;
}
function h_context_menu(o_item){
	alert('Context menu is disabled: '+o_item.a_config[0]);
	return false;
}

Notes:

Tree item scope settings

Tigra Tree Menu PRO item scope settings are similar to instance scope settings but they have defined locally for particular item. Logically item scope settings take precedence of instance scope settings, so if defined local value overrides one set for whole tree.
Item scope settings are defined in form of associative array which defines local settings for item target, icons, event handlers, and styles. This structure is inserted as third parameter of the item in hierarchy structure (see Building Tree Hierarchy). Tree template structure is JavaScript associative array which defines default links target, default icons, and global event handlers. Below is the list of supported keys with descriptions.

Configuration keys for tree item scope settings
Key Description Accepted Values
 
General
tw Name of the target frame or window for all item's links some_name - in framed layout pages will be opened in the frame with this name, if there is no frame with such name or if in non-framed layout pages will be opened in newly created window. Following links will reuse same window.
_self - in framed layout the link will be opened in the same frame where tree menu appears. In non-framed layout same window will be used for linked documents. This setting is normally used as default target for non-framed layouts
_blank - each link will be opened in the new window
_parent - in framed layout targeted document will be loaded in main window of the frameset, in non-framed layout it is equivalent to _self target
tt Tooltip - the text that will appear in pop-up box when mouse is stays for some time over the item Any text
sb Status bar message - the text that will appear in the status bar of the window when mouse moved over the item Any text
st Initial open state of the item 0 for closed and 1 for opened
sl Initial selected state of the item 0 for unselected and 1 for selected
fn Force item to render as node 0 - item representation depends of has this item child items or not. 1 - item will be represented as node even it has no child items
wr Wrap item text in number of lines number, 1 - default
Icons
i0 Icon for item path to the image
a0 alt and title attribute
i4 Icon for selected item path to the image
a4 alt and title attribute
i8 Icon for opened item path to the image
a8 alt and title attribute
i12 Icon for selected opened item path to the image
a12 alt and title attribute
i64 Icon for item when mouse is over it path to the image
a64 alt and title attribute
i68 Icon for selected item when mouse is over it path to the image
a68 alt and title attribute
i72 Icon for opened item when mouse is over it path to the image
a72 alt and title attribute
i76 Icon for selected opened item when mouse is over it path to the image
a76 alt and title attribute
Styles
s0 Style for an item Name of CSS class
s4 Style for selected item Name of CSS class
s8 Style for opened item Name of CSS class
s12 Style for selected opened item Name of CSS class
s64 Style for an item when mouse is over it Name of CSS class
s68 Style for selected item when mouse is over it Name of CSS class
s72 Style for opened item when mouse is over it Name of CSS class
s76 Style for selected opened item when mouse is over it Name of CSS class
Event Handlers
ho User-defined function to be called before the item is opened Name of custom JavaScript function
hc User-defined function to be called before the item is closed Name of custom JavaScript function
hs User-defined function to be called the item is selected Name of custom JavaScript function
hd User-defined function to be called before the item is deselected Name of custom JavaScript function
hv User-defined function to be called when mouse appears over the item Name of custom JavaScript function
hu User-defined function to be called when mouse go out of the item Name of custom JavaScript function
Extra Event Handlers
hje User-defined event handler that will be assigned to tree item +/- icon Object containing list of properties and their values See Notes
hie User-defined event handler that will be assigned to tree item icon Object containing list of properties and their values See Notes
hte User-defined event handler that will be assigned to tree item's text Object containing list of properties and their values See Notes

Notes:

Defining Styles

The appearance of the text inside the tree is usually configured via CSS classes assigned globally to the elements of the tree in tree instance scope settings (tree_tpl.js):

	// styles - leaf
	'style_0' : 't1io', // normal leaf caption style

In above sample CSS class with the name 't1io' is assigned by default to all leaf items in their normal state (see tree instance scope settings section of this documentation and samples in the distribution package for full list of styles related keys and usage samples).
Global settings can be overriden locally for each separate item in Tree item scope settings (tree_items.js):

	['Example', 'page.html', {'s0':'altmout','s4':'altmout','s64':'altmover','s68':'altmover'}]

All classes mentioned in tree configuration must be defined and made accessible to the page where the tree is inserted. Usually they are defined in the menu.css file linked to the HTML document. Below are sample CSS entries for previously discussed settings:

.t1io {
	background-color: #efefef;
	width: 100%;
}
.altmover {
	background-color: #e0eeff;
	width: 100%;
}
.altmout {
	background-color: #dfdeef;
	width: 100%;
}

The simplified HTML code that tree menu script generates for the item looks like:

	<td class="%style_xxx%" ...><a ...>%caption%</a></td>

Where:

As seen from the code fragment above the CSS properties defined in the class are applied to the outer <TD> tag. This makes it possible to define bar properties such as background color. Unless explicitly specified the font properties will be taken from the global style settings for <A> tag defined for the page. To override global setting use descendant selectors. For example for above classes in tree.css add:

.altmout a,
.altmout a:link,
.altmout a:visited {
	font-size: 12px;
	text-decoration: none;
	color: green;
}
.altmover a,
.altmover a:link,
.altmover a:visited,
.altmover a:hover,
.altmover a:active {
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: orange;
}

Notes:

As the limited alternative HTML formatting can be used inside the item's caption:

	['<b>Example</b>', 'page.html', null}]

Initialization

Script initialization block creates navigation tree menu. This block can be located relatively i.e. you can put it into table's cell and tree will be positioned on the page accordingly.

<script language="JavaScript">
<!-- //
	new tree (TREE_ITEMS, TREE_TPL);
// -->
</script>

You may also create a custcustomed tree menu instance to be accessed by that name rather then the numeric index. The following example illustrates how to do this:

<script language="JavaScript">
<!-- //
	new tree (TREE_ITEMS, TREE_TPL,'MyTree');
// -->
</script>

Constructor accepts tree parameters - tree hierarchy structure (see Building Tree Hierarchy section), instance scope settings structure (see Tree instance scope settings section) and name of the tree (see example in API usage examples section). Name of the tree is optional parameter.

Notes:

Using Events

Tigra Tree Menu PRO offers custom event handling mechanism that give webmasters a lot of control over the behavior of the tree. Most likely events will not be used in simple site navigation system, but they will be very useful in sophisticated user interfaces of web based applications. Writing custom event handlers requires some JavaScript and DHTML programming skills. Understanding Tigra Tree Menu PRO object model (see Using API section) will be helpful as well. Below there is a list of all Tigra Tree Menu PRO events those can be intercepted by customer's JavaScript code.

Configuration keys for tree item scope settings
Source Structure Key To be called ...
tree instance scope settings onConstruct when tree constructor is called
tree instance scope settings beforeInit before tree instance is displayed
tree instance scope settings afterInit immediately after tree instance is displayed
item instance scope settings onItemOpen before any tree item is opened
item instance scope settings onItemClose before any tree item is closed
item instance scope settings onItemSelect before any tree item is selected
item instance scope settings onItemDeselect before any tree item is deselected
item instance scope settings onItemMover when mouse appears over any tree item
item instance scope settings onItemMout when mouse go out of any tree item
item item scope settings ho before current tree item is opened
item item scope settings hc before current tree item is closed
item item scope settings hs before current tree item is selected
item item scope settings hd before current tree item is deselected
item item scope settings hv when mouse appears over current tree item
item item scope settings hu when mouse moves out of the current tree item

To intercept some Tigra Tree Menu Event follow these steps:

  1. Create JavaScript function that accepts one object reference and returns boolean value. When function is called it will receive reference to the object that has issued the event (tree or item). Table above lists the events that can be triggered by different tree elments. See Using API for the list of properties and methods supported by different tree objects. If value function returns is true then default processing is performed, otherwise (value is false or not defined) the default action is canceled i.e. tree not shown, node not opened/selected etc.
  2. Make sure your event handler is defined in the same page and it can be called by the tree. You can put it in one of the configuration JavaScript files (i.e. tree_items.js or tree_tpl.js) or link it to the HTML document in a separate file
  3. Insert the key of the event and name of the function (just as string with no brackets) as a value in apropritate configuration structure. See table above for references on event keys and structures they are configured in.

Using API

Open API (Application Programming Interface) is a documented set of methods and objects that makes it possible for web developer to access Tigra Tree Menu PRO internals from a custom client-side JavaScript code. This API especially when used together with events mechanism makes Tigra Tree Menu PRO most programmable navigation control available today on the net.

Tigra Tree Menu PRO exposes objects of two classes: Tree and Item. In the tables below you can find details on those classes.

Tree Object

Tree Object
Name Type Description
 
Properties
o_root object Reference to self (tree object)
o_selected object Reference of currently selected tree item (null if multiple selection mode is enabled)
n_depth numeric Depth (-1)
Collections/Arrays
a_config array Tree items structure passed to the tree constructor as the first parameter
a_tpl array Tree template structure passed to the tree constructor as the second parameter
a_index array Zero based list containing references of all tree items. Items are listed in the order they appear from top to bottom when all tree nodes are expanded.
a_children array Zero based list containing references of the root items
a_nodes array Zero based list containing all tree nodes. Nodes are listed in the order they appear from top to bottom when they're all expanded.
a_states array Structure containing information about the collapsed/expanded state of the tree nodes. Each element of the array is a bitmap with stetes for 31 nodes (one per bit) as they are numbered in a_nodes array. 0 - closed, 1 - opened.
Methods
toggle(n_id)function Toggles the open/close state of node. n_id is the index of the item in a_index array. No value returned.
select(n_id)function Selects (highlights) the tree item. n_id is the index of the item in a_index array. No value returned.
mover(n_id)function Calls onmouseover handler for the tree item. n_id is the index of the item in a_index array. No value returned.
mout(n_id)function Calls onmouseout handler for the tree item. n_id is the index of the item in a_index array. No value returned.
find_item(s_value, b_link) function Searches for tree items with s_value as caption or link. b_link is optional boolean parameter. If b_link is set to true then s_value will be searched in links, otherwise in captions. Returns array of the items found.
find_item_by_key(s_key, s_value) function Searches for tree items with key s_key and value s_value in the item scope setting. Returns an array of items found. See example.
find_item_by_state(n_mask) function Searches for items which state matching mask n_mask. Returns array of items found.
reset_state()function Resets the information about tree state (open/close, selected/normal) to defaults. No value returned.
ndom_refresh()function Submits batch changes to the tree states. This will reload non DOM compatible browsers.

Item Object

Item Object
Name Type Description
 
Properties
o_rootobject Reference to tree object current item belongs to
n_depthnumeric Depth of the item in the tree hierarchy. 0 if root, 1 - next level etc.
n_idnumeric Number of this item in the a_index list of tree object it belongs to
n_node_idnumeric If current item is node this property contains number of this item in the a_nodes list of tree object it belongs to. This property is not assigned for leaf items
n_statenumeric Bitmap property indicating current state of initialized item:
0 bit - last item in the block,
1 bit - reserved,
2 bit - item is selected,
3 bit - item is opened,
4 bit - item is node,
5 bit - item is root,
6 bit - item is mouseovered,
7-31 bits are reserved.
o_parentobject If item is initialized this property contains reference to parent object. For root items parent is tree object, for other items this is parent node object
n_orderobject If item is initialized this value is order of current item in its block (a_children array of parent object)
Collections/Arrays
a_configarray Fragment of the hierarchy structure that corresponds to current item. a_config[0] is item's caption, a_config[1] is item's link, a_config[2] is item scope settings for current item, the rest elements are hierarchy structures for children if any
a_childrenarray If item is initialized and it has children this list contains references to child objects
Methods
open(b_close, b_noreload)function Opens node if b_close is false or not specified or closes if b_close is true. Not defined for leaf items. If b_noreload is set to true no page reload will be done in old browsers. See note below
select(b_deselect)function Selects item if b_deselect is false or not specified or deselects when b_deselect is true
save()function Saves open/close state of the node to cookies. Not defined for leaf items
selsave()function Saves selected/deselected state of the item to cookies.
load()function Loads open/close (not for leaf items) and selected/deselected state of the item from cookies.
state_lookup()function Updates item styles and icons accordingly to its state
state()function Returns structure indicating current state of any item. Return value structure keys are:
'inited' - indicates whether item is already inited
'root' - indicates whether item is root
'node' - indicates whether item is node
'opened' - indicates whether item is opened
'selected' - indicates whether item is selected
'hovered' - indicates whether item is mouseovered
'last' - indicates whether item is last
See example.

Notes:

API usage examples

Below you can find some ideas how Tigra Tree Menu PRO API can be used.

Item search and recursive node open example
/*
	This function opens first tree item which has the caption specified.
	There are a lot of verifications that will help you to debug your
	code. You can disable or remove those checks when finished.
	
*/
function openItemByCaption (s_caption, o_tree) {
	// set to true when debugging the application
	var B_DEBUG = true;

	// exit if required parameter isn't specified
	if (!s_caption)
		return (B_DEBUG
			? alert("Required parameter to function openItemByCaption is missing")
			: false
		);

	// use first tree on the page if tree object isn't explicitly defined
	if (!o_tree)
		o_tree = (TREES[0]);
	if (!o_tree)
		return (B_DEBUG
			? alert("No Tigra Tree Menu PRO instances can be found on this page")
			: false
		);

    // find item with specified caption
    var a_item = o_tree.find_item(s_caption);
    for(var n=0; n < a_item.length; n++) {
	o_item=a_item[n];
	// collect info about all item's parents
	var n_id = o_item.n_id,
		n_depth = o_item.n_depth,
		a_index = o_item.o_root.a_index,
		a_parents = [o_item];

	while (n_depth) {
		if (a_index[n_id].n_depth < n_depth) {
			a_parents[a_parents.length] = a_index[n_id];
			n_depth--;
		}
		n_id--;
	}
		
	// open all parents starting from root
	for (var i = a_parents.length-1; i >= 0; i--)
	   // check if node or root
	   if (a_parents[i].n_state & 48)
	      a_parents[i].open();
	   else
	      if (B_DEBUG) 
	         alert("Item with caption '" + a_parents[i].a_config[0]+ 
	            "' is a leaf.\nHierarchy will be opened to its parent node only.")
    }
}
Event handler example
/*
	This function modifies tree behavior so only one item
	in a level can be opened at a time.
	Function should be called AS onItemOpen handler of the tree
*/
function onItemOpenHandler (o_item) {

	// get current block
	var a_curblock = o_item.o_parent.a_children;

	// close all nodes except current
	for (var i = 0; i < a_curblock.length; i++)
		if (a_curblock[i].n_state & 48 && a_curblock[i] != o_item)
			a_curblock[i].open(true);

	// proceed to default handler
	return true;
}
Node open on single click
/* 
	This function modifies tree behavior so nodes without link
	assigned will open on single click
	Function should be called AS onItemSelect handler of the tree
*/

function onItemSelectHandler (o_item) {
    // if node with no link then toggle
    var o_state = o_item.state();
    if (o_state['node'] && !o_item.a_config[1]) {
        o_item.o_root.toggle(o_item.n_id);
        // cancel default action
        return false;
    }
    // proceed to default handler
    return true;
}
Access to named tree instance
//initialize named tree menu 
new tree (TREE_ITEMS, tree_tpl, 'MyNAME'); 

/* 
	Accessing to tree menu instance by name 
*/

//found all items which have 's64':'altmover' in the item scope settings 
var a_found = TREES['MyNAME'].find_item_by_key('s64','altmover'); 
for (var i=0; i<a_found.length; i++){  
	a_found[i].select(); //select items found 
}
Expand/Collapse All functions
/* expands nodes of the tree
	n_index - zero based index of the tree on the pate
                  if omitomittedn applied to first tree (n_index==0)
	n_depth - zero based level to which the tree with be expanded
	          if omitted the tree will be fully expanded
 */
function expand_all (n_index, n_depth) {
	var o_tree = TREES[n_index ? n_index : 0];
	if (!o_tree)
		alert("Tree is not initialized yet");
	var a_nodes = o_tree.a_nodes;
	for (var i = 0; i< a_nodes.length; i++)
		if (n_depth == null || a_nodes[i].n_depth <= n_depth)
			a_nodes[i].open(0, 1);
	o_tree.ndom_refresh();
}

/* collapses nodes of the tree
	n_index - zero based index of the tree on the pate
                  if omited then applied to first tree (n_index==0)
	n_depth - zero based level to which the tree with be collapsed
	          if omitted the tree will collapsed to second level (n_depth==1)
 */
function collapse_all (n_index, n_depth) {
	var o_tree = TREES[n_index ? n_index : 0];
	if (n_depth == null) n_depth = 1;
	if (!o_tree)
		alert("Tree is not initialized yet");
	var a_nodes = o_tree.a_nodes;
	for (var i = a_nodes.length - 1; i >= 0; i--)
		if (a_nodes[i].n_depth >= n_depth && a_nodes[i].open)
			a_nodes[i].open(1, 1);
	o_tree.ndom_refresh();
}
Call samples from HTML:
<input type="Button" value="Expand All" onclick="expand_all(0)">
<a href="javascript:collapse_all(0,1)">Collapse All</a>

Terms and Conditions

Regular License

One Regular Tigra Tree Menu PRO script license gives the right to use one copy of the script (file: tree.js) within single domain boundaries.

Demo of Licensing Cases:
First Site URL Second Site URL Number of Licenses Required
http://www.domain.com/site_1/ http://www.domain.com/site_2/ one
http://www.domain1.com/ http://www.domain2.com/ two
http://subdomain1.domain.com/ http://subdomain2.domain.com/ two

Developer License

Developer license gives the right to include unlimited number of Tigra Tree Menu PRO instances in the products of license owner.

Discounts

We offer 50% discount for the script starting from second license. To take advantage of this discount use the link sent with every order confirmation message.
Same discount initially applies to educational and religious organizations. Also look for the special offers on the order page.

Usage

As owner of the Tigra Tree Menu PRO license You are allowed to configure the script in any possible way for use in Internet (public), Intranet (corporate) or offline application, however You are strictly NOT allowed (unless specifically authorized by SoftComplex.com) to:

Technical Support

You are entitled to free product upgrades and technical support for at least one year from the date of purchase. Technical support includes answers to script related questions via e-mail and/or Internet instant messaging services. Full tree customization services are provided on customer's request at additional charge. Free setup support does not include product API/events programming services.

Violations of Terms and Conditions

Should you violate these Terms and Conditions or any other rights of SoftComplex Inc., SoftComplex Inc. reserves the right to pursue any and all legal and equitable remedies against you without limitation.

Glossary

Below provided explanation for JavaScript Tree Menu related definitions that used in this documentation. Descriptions are given in context of this document.

Links and References