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 AJAX

Table of Contents

Description

Tigra Tree Menu AJAX is a highly versatile load-on-demand DHTML tree control for web applications utilizing AJAX technology.

Features

System Requirements

Important Skill Requirements: Tigra Tree Menu AJAX is a client side component that requires the supporting code on the server side. The distribution package includes the working sample of the complete system with the PHP back end. In order to use this product the developer must be able to create or customize the server side script specifically to his/ application. General programming experience and basic JavaScript skills are required for using component's API.

How it works

  1. The tree control initializes either while the page is loading or later in the loaded page by some event in the client side interface. Customizable "Loading" message is displayed.
  2. Background Asynchronous HTTP request is immediately sent to server by the tree
  3. Server side script reads the data source (database, filesystem, static config etc.) and sends back the information in form of XML
  4. Tree control receives and parses the XML and displays the tree elements
  5. When user expands the element for the first time the new HTTP request is generated with the ID of that element passed as the parameter. Process repeats from step 4. Multiple concurrent requests can be generated and processed in parallel.
  6. The client side application can receive and handle events from the tree as well as modify the tree state via the API as needed

Initialization

The tree control is initialized by calling its constructor:

<script language="JavaScript">
	var myTree = new tree (TREE_TPL);
</script>

The constructor receives one required parameter: Tree Template Configuration Structure - JavaScript structure that defines the initial and default settings for the control. The constructor returns the reference to newly created tree object.

The initialization can be inserted relatively in the document, in this case the tree will create its own container and position itself relatively. If the initialization is called in the loaded document the tree will insert its elements inside the existing container with the ID specified in the configuration.

Multiple tree controls can be initialized in the same page. Each tree instance can use separate template or multiple instances can use the same configuration structure.

Tree Template Configuration

Tree template is the JavaScript structure that defines the initial and default settings for the tree. Parameters such as default icons, styles, targets, global event handlers etc. are defined in it.

Table below lists all supported configuration keys:

Key Description Value Default
target default window/frame name for all the tree items. This setting can be redefined for individual items in XML structure (see target attribute). This setting is the exact equivalent of target attribute of the anchor tag <a> in HTML window/frame name - in framed layout, pages will be opened in the frame with this name. If there is no frame with such name or if used in non-framed layout, the new window will be created. _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
multiselect multiselect switch false - selecting one item unselects the last false
true - clicking the item toggles the selection without affecting the rest of the items
contID ID of the element containing the tree. If by the time of the tree initialization the element with such ID already exists then the tree will be initialized inside it. If the tree is initialized during the page loading and the element with such ID can't be found then the tree will create <div> element with specified ID String, Element ID tree_NUM, where NUM is the zero based number of the tree instance on the page
contClass class of the element containing the tree. This class is assigned to the tree container if the control creates it (see ContID above for conditions) String, Name of CSS class none
msgLoading HTML code to display inside the tree container during the initial AJAX request String, HTML code none
ajaxURL URL of the back end script processing AJAX requests. Exact URL is requested initially. Consecutive requests are submitted with id parameter of the calling item passed in the URL (see id attribute of <item> tag in XML structure) String, URL required
itemTextEx Name of the JavaScript function to generate additional HTML after the item's text. The function receives the reference to the item's object as the parameter String, name of JavaScript function none
preEvent Name of the JavaScript function called before all tree events. The function receives the name of the event (mouseover|mouseout|toggle|select) as first parameter and reference to the item's object as the second parameter. If event handler returns false or equivalent then no further event processing is done String, name of JavaScript function none
postEvent Name of the JavaScript function called after all tree events. The function receives the name of the event (mouseover|mouseout|toggle|select) as first parameter and reference to the item's object as the second parameter String, name of JavaScript function none
icon_e Path to the transparent image String, image path required
icon_l Path to the image with vertical line String, image path required
icon_* Junctions graphics and default icons for items of different types in different states where * is the numeric state index (for more information see the next section). The icons can be redefined for individual items in XML structure (see icon tag). String, image path none
style_* Default CSS class for items of different types in different states where * is the numeric state index. (for more information see the next section). This setting can be redefined for individual items in XML structure (see style tag). String, CSS name, multiple CSS classes can be listed separated with the white spaces none

The tree template configuration structure can placed in linked external JavaScript file or placed in the main document inside <script> tag. In either case it should be defined before the tree initialization that references it.

Below is the code of the sample template configuration structure:

var TREE_TPL = {

	// general
	'target':'rightFrame',
	'contID' : 'treeID',
	'contClass' : 'treeClass',

	'msgLoading' : '<div style="font-weight:bold">Loading...</div>',
	'ajaxURL' : 'ajaxtree.php',
	'multiselect': false,
	'itemTextEx': 'f_myShowSize',
	'preEvent' : 'f_myPreEvent',
	'postEvent' : null,

	// icons - default
	'icon_0':'img/page.gif', // leaf icon normal

	// icons - node	
	'icon_16' :'img/folder.gif', // node icon normal
	'icon_144':'img/folder_wait.gif', // node icon loading
	
	'icon_24':'img/folderopen.gif', // node icon opened
	'icon_80':'img/folder.gif', // mouseovered node icon normal
	'icon_88':'img/folderopen.gif', // mouseovered node icon normal

	// icons - root	
	'icon_32':'img/base.gif', // root icon normal

	// junctions - root node
	'icon_50':'img/plusroot.gif', // junction for closed root
	'icon_51':'img/plusroot.gif', // junction for last closed root
	'icon_58':'img/minusroot.gif', // junction for opened root
	'icon_59':'img/minusroot.gif', // junction for last open root

	// junctions - root leaf
	'icon_34':'img/empty.gif', // junction for leaf root
	'icon_35':'img/empty.gif', // junction for last leaf root
	
	// junctions - node
	'icon_18':'img/plusbottom.gif', // junction for closed node
	'icon_19':'img/plus.gif', // junction for last closed node
	'icon_26':'img/minusbottom.gif', // junction for opened node
	'icon_27':'img/minus.gif', // junction for last open node

	// junctions - leaf
	'icon_2':'img/joinbottom.gif', // junction for leaf
	'icon_3':'img/join.gif', // junction for last leaf
	
	// icons - misc
	'icon_e':'img/empty.gif', // empty image
	'icon_l':'img/line.gif', // vertical line

	// styles - default
	'style_0'  : 'mout',
	
	// styles - selected (4+)
	'style_4'  : 'mout sel', // leaf
	'style_20' : 'mout sel', // node
	'style_148': 'mout sel', // node loading
	'style_28' : 'mout sel', // node open
	'style_36' : 'mout sel', // leaf root 
	'style_52' : 'mout sel', // node root 
	'style_60' : 'mout sel', // node root open
	
	// styles - mouseover (64+)
	'style_64' : 'mover', // leaf
	'style_80' : 'mover', // leaf root 
	'style_96' : 'mover', // node root
	'style_112': 'mover', // node root open 

	// styles - mouseover selected (68+)
	'style_68' : 'mover sel', // leaf
	'style_84' : 'mover sel', // node
	'style_212': 'mover sel', // node loading
	'style_92' : 'mover sel', // node open 
	'style_100': 'mover sel', // leaf root 
	'style_116': 'mover sel', // node root 
	'style_244': 'mover sel', // node root loading
	'style_124': 'mover sel'  // node root open
};

Item State Bitmap

The tree item state value is the sum of individual flags, for example for opened root node in mouseover state the value is (open) 8 + (root) 32 + (node) 16 + (mouseover) 64 = 120

Bit Added Value Description
0 2 ^ 0 = 1 last in the block, masked everywhere except in junction icons
1 2 ^ 1 = 2 indicates the junction icon, masked everywhere else
2 2 ^ 2 = 4 selected
3 2 ^ 3 = 8 open
4 2 ^ 4 = 16 node
5 2 ^ 5 = 32 root
6 2 ^ 6 = 64 mouseover
7 2 ^ 6 = 128 loading - only applies to type="ajaxnode", masked everywhere else

To simplify the configuration the tree control can mask some of the bits/flags as irrelevant or after unsuccessfully attempting the exact value. For example bit 1 (last in the block) is ignored unless the setting is related to the icons, or bit 6 (mouseover) is masked if exact value can not be found which means that the normal icon/style is used if one specifically for mouseover state is not defined. List of masks in the order they're applied can be found in function f_itemGetParam in tree.js

XML format for Tree Items

Tigra Tree Menu Ajax uses the XML (The Extensible Markup Language) to receive the information about tree elements. Below table lists all the supported XML tags, their relations and attributes:

Tag Description Parent Children Attributes
<block> tree menu block root, <item> <item> -
<item> tree item <block> <a>, <icon>, <style> type, id, open, selected, disabled, onmouseover, onmouseout, onopen, onclose, onselect, onunselect
<icon> item icon for specified state <item> Text: URL of item icon state
<class> item CSS class for specified state <item> Text: name of the CSS class, several CSS classes can be separated with white space state
<a> item link <item> Item's text href, target, title, custom

XML tag Attributes:

Attribute Applies to Value Description Default
type item leaf|node|ajaxnode type of the item:
leaf - leaf item without sub-items
node - node, can be empty, doesn't generate ajax requests
ajaxnode - node, if empty generates the ajax request when opened
node if contains items, item if empty
id item string Custom ID which will be used in ajax requests to identify the requesting ajaxnode item's number in order of initialization. This number can change, don't leave to default for items with type="ajaxnode"
open item yes|no defines the initial open/close state for the item no
selected item yes|no defines the initial normal/selected state for the item no
disabled item yes|no defines the initial normal/disabled state for the item. Disabling the menu item makes it non responsive to the events. Only global custom pre-event is called for disabled items. no
onmouseover item javascript code attaches the custom event handler to the item's mouseover event none
onmouseout item javascript code attaches the custom event handler to the item's mouseout event none
onopen item javascript code attaches the custom event handler to the item's open event none
onclose item javascript code attaches the custom event handler to the item's close event none
onselect item javascript code attaches the custom event handler to the item's select event none
onunselect item javascript code attaches the custom event handler to the item's unselect event none
href a string - URL or JavaScript statement This attribute is the exact equivalent of href attribute of the anchor tag <a> in HTML none
target a string - window/frame name or _blank, _parent, _search, _self, _top this attribute is the exact equivalent of target attribute of the anchor tag <a> in HTML none
target a string this attribute is the exact equivalent of title attribute of the anchor tag <a> in HTML none
any custom a string any custom attribute conforming to XML syntax and not conflicting with the existing attributes none
state icon, style integer bitmap of the item's state, the tree will attempt to mask several properties before falling back to the default value defined in Tree Template Configuration. 0

Below is the sample XML for the initial request:

<?xml version="1.0" encoding="UTF-8"?>
<block>
  	<item>
		<icon state="0">img/home.gif</icon>
		<a href="home.html" title="Home Page">Home</a>
	</item>
  	<item><a href="about.html" title="Company profile and history">About Us</a></item>
  	<item type="ajaxnode" id="prod"><a href="products.php">Products</a></item>
  	<item type="node" open="yes"><a href="services.php">Services</a>
	<block>
	  	<item><a href="design.html">Design</a></item>
	  	<item><a href="coding.html">Coding</a></item>
	  	<item><a href="consulting.php">Consulting</a></item>
	</block>
	</item>
  	<item><a href="directions.html">Directions</a></item>
  	<item><a href="contact.html">Contact Us</a></item>
  	<item disabled="yes"><a href="login.php">Login</a></item>
</block>

Now the sample XML for the request by AJAX node:

<?xml version="1.0" encoding="UTF-8"?>
<block>
  	<item><a href="product1.html">Product 1</a></item>
  	<item><a href="product2.html">Product 2</a></item>
  	<item><a href="product2.html">Product 3</a></item>
  	<item type="ajaxnode" id="prodfamily"><a href="productfamily.html">Product Family</a></item>
</block>

If there is an error in the server side script processing the request for XML, make sure to return the error message in the from of valid XML that tree can parse and display.

Item HTML

Below is the simplified HTML code for the tree menu item:

<table id="r%treeID%_%itemID%" class="%configStyle%">
<tr>
	<td>
		<img name="j%treeID%_%itemID%" src="%configJunctn%">
		<a><img name="i%treeID%_%itemID%" src="%configIcon%"></a>
	</td>
	<td class="treeTextTD"><a id="t%treeID%_%itemID%">%itemText%</a>%itemExText%</td>
</tr>
</table>
<div id="c%treeID%_%itemID%">%childrenHTML%</div>

Where:
%treeID% - Zero based number of the tree instance in the page (see <treeref>.n_id in Tree Object Properties)
%itemID% - Zero based position of the item in tree's a_index array (see <itemref>.n_id in Tree Item Properties)
%configJunctn% - URL of the junction icon determined by the tree based on information from icon_* keys in Tree Template Configuration %configIcon% - URL of the item icon determined by the tree based on information from icon_* keys in Tree Template Configuration and icon tags in XML
%configStyle% - name of the CSS class determined by the tree based on information from style_* keys in Tree Template Configuration and style tags in XML
%itemText% - Content of the item's <a> tag in XML
%itemExText% - Optional additional HTML code inserted by function attached as itemTextEx in Tree Template Configuration
%childrenHTML% - Optional HTML code for sub menus

Use above information to correctly determine CSS selectors while defining the styles and to get the direct access tree items' DHTML elements from your client side code.

API - Tree Object - Properties

Name Type Description On Change
<treeref>.a_tpl array Contains the reference to the Tree Template Configuration Structure received during the initialization Will not affect the displayed elements until they're refreshed, some values are copied to other properties and will not be affected
<treeref>.o_root object reference Reference to self. Required for item constructors to work properly Do not change
<treeref>.a_index array Array containing the list of all tree items in the order they were initialized. The position of the item in this array is its n_id property. Positions are not reused, removed items are replaced by null Only add/remove elements. When removing replace by null and make sure to handle HTML and adjust references in other arrays
<treeref>.a_nodes array Array containing the list of all tree nodes in the order they were initialized. The position of the node in this array is its n_nodeID property. Positions are not reused, removed items are replaced by null Only add/remove elements. When removing replace by null and make sure to handle HTML and adjust references in other arrays
<treeref>.a_children array Array containing the list of all direct sub-items in the order they were initialized. The position of the item in this array is its n_order property. Positions are reused, removed items must be purged When removing elements make sure to purge the array. Make sure to handle HTML and adjust references in other arrays
<treeref>.n_depth numeric Set to -1. Required for recursive functions to work properly Do not change
<treeref>.n_id numeric Zero based number of the tree instance in the page. This number is the position of the tree's reference in global array TREES. Do not change
<treeref>.s_contID string ID of the HTML element containing the tree. If changed the tree will render itself in different HTML element when refreshed
<treeref>.b_multiSel boolean Multiple Selections Flag. The change will apply from the next selection event/command
<treeref>.e_xml object reference responseXML property of the HTTP response received from the server Do not change
<treeref>.b_rendered boolean Indicates that the HTML code for the sub-items has been rendered Do not change

API - Tree Object - Methods

Name Description Parameters Returns Uses
<treeref>.f_ajaxRequest(n_id) Generates asynchronous HTTP request for more information. n_id - numeric n_id property of the item generating the request. n_id is not the same as id passed in the item's XML void Do not redefine, let the tree call it
<treeref>.f_ajaxProcess(n_id) Handles received HTTP response. n_id - numeric n_id property of the item generating the request. n_id is not the same as id passed in the item's XML void Do not redefine, let the tree call it
<treeref>.f_createSubmenu(b_getHTML) Parses received XML code into HTML for tree menu block and renders it if requested b_getHTML - boolean, if true then method returns HTML code for block, if false then method renders the HTML in the tree's container. void or HTML code for tree block Do not redefine, let the tree call it
<treeref>.f_event(s_event, n_id) Tree event dispatcher. All events from the tree items are received by this method and dispatched back to the item if needed. s_event - string, name of the event. Expected values are: mouseover|mouseout|toggle|select
n_id - numeric n_id property of the item that generated the event.
void or false Do not redefine, instead attach at the beginning or at the end via preEvent and postEvent keys in Tree Template Configuration or by assigning f_preEvent and f_postEvent methods. Call it when tree events need to be simulated programmatically
<treeref>.f_onopen(o_item) Called before item is opened if item's own .f_onopen handler is not defined. If returns false the default event handling is cancelled o_item - item reference true or false Redefine to process the event
<treeref>.f_onclose(o_item) Called before item is closed if item's own .f_onclose handler is not defined. If returns false the default event handling is cancelled o_item - item reference true or false Redefine to process the event
<treeref>.f_onselect(o_item) Called before item is selected if item's own .f_onselect handler is not defined. If returns false the default event handling is cancelled o_item - item reference true or false Redefine to process the event
<treeref>.f_onunselect(o_item) Called before item is unselected if item's own .f_onunselect handler is not defined. If returns false the default event handling is cancelled o_item - item reference true or false Redefine to process the event
<treeref>.f_onmouseover(o_item) Called when item receives mouseover event if item's own .f_onmouseover handler is not defined. If returns false the default event handling is cancelled o_item - item reference true or false Redefine to process the event
<treeref>.f_onmouseover(o_item) Called when item receives mouseout event if item's own .f_onmouseout handler is not defined. If returns false the default event handling is cancelled o_item - item reference true or false Redefine to process the event
<treeref>.f_reload() Reloads the tree to initial state. New HTTP request is generated. none void Do not redefine, call it when tree needs to be updated. Current state of the items will be lost.
<treeref>.f_getItemTextEx(o_item) Generates the HTML attached to the item after its text. o_item - item reference HTML code Use itemTextEx key in Tree Template Configuration to define initially, redefine if needed (change will apply to newly initialized items only).
<treeref>.f_preEvent(s_event, n_id) Called when tree event is detected before the default handling. If false or equivalent is returned then default handling is cancelled. s_event - string, name of the event. Expected values are: mouseover|mouseout|toggle|select
n_id - numeric n_id property of the item that generated the event.
true|false Redefine if custom event pre-processing is required
<treeref>.f_postEvent(s_event, n_id) Called after tree event has been handled. s_event - string, name of the event. Expected values are: mouseover|mouseout|toggle|select
n_id - numeric n_id property of the item that generated the event.
void Redefine if custom event post-processing is required

API - Item Object - Properties

Name Type Description On Change
<itemref>.o_root object reference Reference to a containing tree object Do not change
<itemref>.o_parent object reference Reference to a parent item or containing tree object if current item is in the root of the hierarchy Do not change
<itemref>.n_depth numeric Zero based depth of the item in the hierarchy (Root is 0, First sub-level is 1 etc.) Do not change
<itemref>.n_order numeric Zero based position of the item in the block If changing make sure to move the items in parent's a_children array and update n_order of other items involved. No effect on rendered HTML
<itemref>.n_id numeric Zero based position of the item in tree's a_index array Do not change
<itemref>.s_cid string Custom ID passed in XML's id attribute Change applies to the next AJAX request generated by the item
<itemref>.n_nodeID numeric Zero based position of the item in tree's a_nodes array. Only defined in nodes. Do not change
<itemref>.b_node boolean true if item is node (with or without sub-items), false if item is leaf Do not change
<itemref>.s_type string Type of the item determined by presence of sub items and XML's type attribute. Values are: leaf|node|ajaxnode Do not change
<itemref>.s_type string Type of the item determined by presence of sub items and XML's type attribute. Values are: leaf|node|ajaxnode Do not change
<itemref>.a_children array Array containing the list of all direct sub-items in the order they were initialized. The position of the item in this array is its n_order property. Positions are reused, removed items must be purged When removing elements make sure to purge the array. Make sure to handle HTML and adjust references in other arrays
<itemref>.n_state numeric Item's state bitmap. See Item State Bitmap for more information Do not change, the tree will update this property in methods changing the state of the item
<itemref>.b_open boolean In nodes indicates the opened state. The initial value is set from item's open attribute in XML Do not change, the tree will update this flag when node is opened/closed
<itemref>.b_selected boolean Indicates the opened state. The initial value is set from item's selected attribute in XML Do not change, the tree will update this flag when node is selected/unselected
<itemref>.b_disabled boolean Indicates the disabled state. The initial value is set from item's disabled attribute in XML Modify to allow/block mouse events for the item. Call .f_updateProps() method to update the item's appearance
<itemref>.e_xml object reference responseXML property of the HTTP response received from the server Do not change
<itemref>.b_rendered boolean Indicates that the HTML code for the sub-items has been rendered Do not change
<itemref>.a_styles array Storage for custom styles received in items's style tag in XML Change applies to the next style update. Call .f_updateProps() to force the update
<itemref>.a_icons array Storage for custom icons received in items's icon tag in XML Change applies to the next icon update. Call .f_updateProps() to force the update
<itemref>.e_ahref object reference Reference to item's <a> tag from the received XML Do not change
<itemref>.s_text string Item's text. The initial value is set from the contents of the item's <a> tag in the received XML Change doesn't apply to the rendered HTML
<itemref>.s_link string Item's link. The initial value is set from the href attribute of the item's <a> tag in the received XML Change doesn't apply to the rendered HTML

API - Item Object - Methods

Name Description Parameters Returns Uses
<itemref>.f_updateProps(b_return) Updates the state property (.n_state) and appearance (icons and style) of the menu item after the state change (open/close, select/deselect, mouseover/mouseout, etc) b_return - if true or equivalent then the values for icons and styles are returned in the array, otherwise updated directly in the HTML void or array containing icon URL, junction URL and CSS class name Do not redefine, call it without parameter when state must be updated.
<itemref>.f_getParam(s_prefix) Finds the best matching icon or style based on the custom information received in icon and style tags in XML and global settings in Tree Template Configuration s_prefix - if icon or style depending on the property being requested class name or icon's URL. void if nothing found Do not redefine, call it when information about icons/styles is needed
<itemref>.f_createSubmenu(b_getHTML) Parses received XML code into HTML for tree menu block and renders it if requested b_getHTML - boolean, if true then method returns HTML code for block, if false then method renders the HTML in the item's sub-menu container. void or HTML code for tree block Do not redefine, let the tree call it
<itemref>.f_getHTML(b_getHTML) Generates item's HTML code when requested by the parent's .f_createSubmenu method none HTML code for the tree item Do not redefine, Modify if needed (also see itemTextEx parameter in Tree Template Configuration), let the tree call it
<itemref>.f_event(s_event) Generates item's HTML code when requested by the parent's .f_createSubmenu method none HTML code for the tree item Do not redefine (see next 6 methods instead), call to programmatically simulate event
<itemref>.f_onopen() Called before item is opened. If returns false the default event handling is cancelled. If not defined tree's f_onopen is called. The initial value is set from item's onopen attribute in XML o_item - item reference true or false Redefine to process the event
<itemref>.f_onclose() Called before item is closed. If returns false the default event handling is cancelled. If not defined tree's f_onclose is called. The initial value is set from item's onclose attribute in XML o_item - item reference true or false Redefine to process the event
<itemref>.f_onselect() Called before item is selected. If returns false the default event handling is cancelled. If not defined tree's f_onselect is called. The initial value is set from item's onselect attribute in XML o_item - item reference true or false Redefine to process the event
<itemref>.f_onunselect() Called before item is unselected. If returns false the default event handling is cancelled. If not defined tree's f_onunselect is called. The initial value is set from item's onunselect attribute in XML o_item - item reference true or false Redefine to process the event
<itemref>.f_onmouseover() Called before item receives mouseover event. If returns false the default event handling is cancelled. If not defined tree's f_onmouseover is called. The initial value is set from item's onmouseover attribute in XML o_item - item reference true or false Redefine to process the event
<itemref>.f_onmouseout() Called before item receives mouseout event. If returns false the default event handling is cancelled. If not defined tree's f_onmouseout is called. The initial value is set from item's onmouseout attribute in XML o_item - item reference true or false Redefine to process the event
<itemref>.f_open(b_close) Opens or closes the node b_close - if true or equivalent then closes the node, otherwise opens it. void Do not redefine, call to open or close nodes
<itemref>.f_rollover(b_mouseout) Applies the rollover effects b_mouseout - if true or equivalent then applies the mouseover state, otherwise applies mouseover state. void Do not redefine, call to programmatically invoke the rollover effects
<itemref>.f_select(b_unselect) Selects or unselects the item b_unselect - if true or equivalent then unselects the item, otherwise selects it. Also see multiselect key in Tree Template Configuration void Do not redefine, call to select the item
<itemref>.f_delete(b_recursive) Removes the item from the tree b_recursive - if true or equivalent then HTML and a_children array are not updated. Don't pass the parameter when using this method. It's for the tree's internal recursive calls. void Do not redefine, call to programmatically invoke the rollover effects
<itemref>.f_reload() Reloads the ajaxnode to its initial state. New HTTP request is generated. none void Do not redefine, call it when tree needs to be updated. Current state of the items will be lost.

API - Code Samples

Below is the sample function demonstrating the use of itemTextEx key for providing additional information about the tree item. The information is passed in the custom attribute myCustomAttr of <a> tag in XML

function f_myShowSize(o_item) {
	// get custom attribute from XML
	var s_size = o_item.e_ahref.getAttribute('myCustomAttr');
	return s_size ? '<span class="itemNote">' + s_size + '</span>' : '';
}

The function should be assigned to itemTextEx in Tree Template Configuration:

	'itemTextEx': 'f_myShowSize',

It also uses the CSS class itemNote:

span.itemNote {
	color: gray;
	font-size: 10px;
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin-left: 5px;
}

This code is attached as the event handler and it modifies the default behaviour of the tree so only one item in a level can be opened at a time.

function f_myPreEvent (s_event, o_item) {
	// detect the event - node opening
	if (s_event == 'toggle' && !o_item.b_open) {
		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].b_open && a_curblock[i] != o_item)
				a_curblock[i].f_open(true);
	}
	// return false to cancel the default processing
	return true;
}

The function should be assigned to preEvent in Tree Template Configuration:

	'preEvent': 'f_myPreEvent',

Custom event handlers can also be used for sending the notifications about tree state changes to the server side so it can record them and restore the tree to its last state after page reload.

License Agreement - Human Version

DO's:

DONT's (nothing unreasonable)

TIGRA TREE MENU AJAX END-USER LICENSE AGREEMENT

By purchasing, installing, or otherwise using the product identified above and/or its related materials, you agree to be bound by the terms and conditions of this License Agreement.

READ CAREFULLY

This license agreement ("LICENSE") is a legal agreement between you (either an individual or a single entity, also referred to as "YOU") and Softcomplex Incorporated, ("Softcomplex"), for the software containing this LICENSE which may also include the software's source, associated media, printed materials, and "online" or electronic documentation (collectively referred to as "SOFTWARE").

SOFTWARE PRODUCT LICENSE

The SOFTWARE is protected by copyright laws and international copyright treaties, as well as other intellectual property laws and treaties. Softcomplex retains all rights not expressly granted to you in this LICENSE.

Each individual or single entity using or otherwise accessing the SOFTWARE for development purposes must obtain the right to do so by purchasing an individual product license. The license grants to you, and you accept, a non-exclusive, non-transferable license to install, copy, use and modify the SOFTWARE only as authorized below.

All product licenses are for life and royalty-free. You may distribute the SOFTWARE as part of your software product provided that:

As part of the LICENSE you are granted the right to view and modify the SOFTWARE's source code only as authorized below:

OTHER RIGHTS AND LIMITATIONS

DELIVERY

Softcomplex shall deliver to you a master copy of the SOFTWARE licensed hereunder in electronic files only. Documentation shall also be provided in electronic format.

UPGRADES

You are eligible for free minor upgrades (e.g. v.1.6 to v.1.9), patches, and bug-fixes for the SOFTWARE, including source code. SOFTWARE labeled as an upgrade replaces and/or supplements (and may disable) the product that formed the basis for your eligibility for the upgrade. You may use the resulting upgraded product only in accordance with the terms of this LICENSE.

TECHNICAL SUPPORT

You are entitled to one year of free Technical support for the SOFTWARE which includes answers to your script related questions via Softcomplex's support system. Script customizations, API programming, server side script development and debugging services are the subject to additional charges.

WARRANTY

Softcomplex Incorporated warrants that for a period of sixty (60) days from the date of acquisition, the original (unmodified) version of the Software, if operated as directed, will substantially achieve the functionality described in the Documentation. Company does not warrant, however, that your use of Software will be uninterrupted or that the operation of Software will be error-free or secure. Company's sole liability for any breach of this warranty shall be, at Company's sole discretion: (i) to advise you how to achieve substantially the same functionality with Software as described in the Documentation through a procedure different from that set forth in the Documentation; or (ii) if the above remedies are impracticable, to refund the license fee you paid for Software.

THIS IS A LIMITED WARRANTY AND IT IS THE ONLY WARRANTY MADE BY Softcomplex. Softcomplex MAKES NO OTHER EXPRESS WARRANTY. THE DURATION OF IMPLIED WARRANTIES, INCLUDING WITHOUT LIMITATION, WARRANTIES OF MERCHANTABILITY, INTERACTION WITH OTHER THIRD PARTY SOFTWARE, AND OF FITNESS FOR A PARTICULAR PURPOSE, IS LIMITED TO THE ABOVE LIMITED WARRANTY PERIOD; SOME JURISDICTIONS DO NOT ALLOW LIMITATIONS ON HOW LONG AN IMPLIED WARRANTY LASTS, SO LIMITATIONS MAY NOT APPLY TO YOU. NO Softcomplex DEALER, AGENT, OR EMPLOYEE IS AUTHORIZED TO MAKE ANY MODIFICATIONS, EXTENSIONS, OR ADDITIONS TO THIS WARRANTY.

If you violate the terms of this Agreement, then this warranty shall immediately be terminated. This warranty shall not apply if Software has been modified from its original version or if it is used on or in conjunction with hardware or software other than the unmodified version of hardware and software with which the software was designed to be used as described in the Documentation. THIS WARRANTY GIVES YOU SPECIFIC LEGAL RIGHTS, AND YOU MAY HAVE OTHER LEGAL RIGHTS THAT VARY BY JURISDICTION.

TERMINATION

This LICENSE shall last as long as you use the SOFTWARE in compliance with this LICENSE. Softcomplex may terminate this LICENSE if you fail to comply with any of the terms and conditions herein. In such event you agree to remove and destroy all copies of the SOFTWARE and any applicable source code.

Softcomplex reserves the right to discontinue at any time any product, shall it be offered individually or as a part of a product SUITE. However, Softcomplex is obligated to provide the proper level of support for all discontinued products for a period of 1 (one) year after the date of discontinuance.

COPYRIGHT

All title and copyrights in and to the SOFTWARE (including but not limited to any images, photographs, animations, video, audio, music, text, incorporated into the SOFTWARE), the accompanying materials, and any copies of the SOFTWARE, and any trademarks or service marks of Softcomplex are owned by Softcomplex Incorporated. All title and intellectual property rights in and to the content that may be accessed through use of the SOFTWARE is the property of the respective content owner and may be protected by applicable copyright or other intellectual property laws and treaties. This LICENSE grants you no rights to use such content.

LIMITATION OF LIABILITY

UNDER NO CIRCUMSTANCES AND UNDER NO LEGAL THEORY, TORT, CONTRACT, OR OTHERWISE, SHALL Softcomplex Incorporated OR ITS SUPPLIERS OR RESELLERS BE LIABLE TO YOU OR ANY OTHER PERSON FOR ANY INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER INCLUDING, WITHOUT LIMITATION, DAMAGES FOR LOSS OF GOODWILL, WORK STOPPAGE, COMPUTER FAILURE OR MALFUNCTION, OR ANY AND ALL OTHER COMMERCIAL DAMAGES OR LOSSES. IN NO EVENT WILL Softcomplex Incorporated BE LIABLE FOR ANY DAMAGES IN EXCESS OF THE AMOUNT Softcomplex Incorporated RECEIVED FROM YOU FOR A LICENSE TO THE SOFTWARE, EVEN IF Softcomplex Incorporated SHALL HAVE BEEN INFORMED OF THE POSSIBILITY OF SUCH DAMAGES, OR FOR ANY CLAIM BY ANY OTHER PARTY. THIS LIMITATION OF LIABILITY SHALL NOT APPLY TO LIABILITY FOR DEATH OR PERSONAL INJURY TO THE EXTENT APPLICABLE LAW PROHIBITS SUCH LIMITATION. FURTHERMORE, SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OR LIMITATION OF INCIDENTAL OR CONSEQUENTIAL DAMAGES, SO THIS LIMITATION AND EXCLUSION MAY NOT APPLY TO YOU.

EXPORT CONTROLS

None of Software or underlying information or technology may be downloaded or otherwise exported or reexported (i) into (or to a national or resident of) Cuba, Iraq, Libya, Yugoslavia, North Korea, Iran, Syria or any other country to which the U.S. has embargoed goods; or (ii) to anyone on the U.S. Treasury Department's list of Specially Designated Nationals or the U.S. Commerce Department's Table of Denial Orders. By downloading or using Software, you are agreeing to the foregoing and you are representing and warranting that you are not located in, under the control of, or a national or resident of any such country or on any such list.

HIGH RISK ACTIVITIES

Software is not fault-tolerant and is not designed or intended for use or resale as on-line control equipment in hazardous environments requiring fail-safe performance, such as in the operation of nuclear facilities, aircraft navigation or communication systems, air traffic control, direct life support machines, or weapons systems, in which the failure of Software could lead directly to death, personal injury, or severe physical or environmental damage ("High Risk Activities"). Softcomplex Incorporated and its suppliers specifically disclaim any express or implied warranty of fitness for High Risk Activities.

MISCELLANEOUS

If any provision of this Agreement is held to be unenforceable, such provision shall be reformed only to the extent necessary to make it enforceable. This Agreement shall be governed by Colorado law (except for conflict of law provisions). The application the United Nations Convention of Contracts for the International Sale of Goods is expressly excluded.

Glossary

Links and References