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.
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+ |
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.
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:
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'], ] ]; |
Notes:
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.
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 | icons/base.gif |
alt_48 | alt and title attribute | none | |
icon_52 | Icon for selected root | path to the image | icons/base.gif |
alt_52 | alt and title attribute | none | |
icon_56 | Icon for opened root | path to the image | icons/base.gif |
alt_56 | alt and title attribute | none | |
icon_60 | Icon for selected opened root | path to the image | icons/base.gif |
alt_60 | alt and title attribute | none | |
icon_112 | Icon for a root when mouse is over it | path to the image | icons/base.gif |
alt_112 | alt and title attribute | none | |
icon_116 | Icon for selected root when mouse is over it | path to the image | icons/base.gif |
alt_116 | alt and title attribute | none | |
icon_120 | Icon for opened root when mouse is over it | path to the image | icons/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 | icons/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 | icons/folder.gif |
alt_16 | alt and title attribute | none | |
icon_20 | Icon for selected node | path to the image | icons/folderopen.gif |
alt_20 | alt and title attribute | none | |
icon_24 | Icon for opened node | path to the image | icons/folderopen.gif |
alt_24 | alt and title attribute | none | |
icon_28 | Icon for selected opened node | path to the image | icons/folderopen.gif |
alt_28 | alt and title attribute | none | |
icon_80 | Icon for a node when mouse is over it | path to the image | icons/folder.gif |
alt_80 | alt and title attribute | none | |
icon_84 | Icon for selected node when mouse is over it | path to the image | icons/folderopen.gif |
alt_84 | alt and title attribute | none | |
icon_88 | Icon for opened node when mouse is over it | path to the image | icons/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 | icons/folderopen.gif |
alt_92 | alt and title attribute | none | |
Icons (Leaf) | |||
icon_0 | Icon for a leaf | path to the image | icons/page.gif |
alt_0 | alt and title attribute | none | |
icon_4 | Icon for selected leaf | path to the image | icons/page.gif |
alt_4 | alt and title attribute | none | |
icon_64 | Icon for a leaf when mouse is over it | path to the image | icons/page.gif |
alt_64 | alt and title attribute | none | |
icon_68 | Icon for selected leaf when mouse is over it | path to the image | icons/page.gif |
alt_68 | alt and title attribute | none | |
Icons (Junctions) | |||
icon_2 | Junction Icon for leaf | path to the image | icons/joinbottom.gif |
alt_2 | alt and title attribute | none | |
icon_3 | Junction Icon for last leaf | path to the image | icons/join.gif |
alt_3 | alt and title attribute | none | |
icon_18 | Junction Icon for closed node | path to the image | icons/plusbottom.gif |
alt_18 | alt and title attribute | none | |
icon_19 | Junction Icon for last closed node | path to the image | icons/plus.gif |
alt_19 | alt and title attribute | none | |
icon_26 | Junction Icon for opened node | path to the image | icons/minusbottom.gif |
alt_26 | alt and title attribute | none | |
icon_27 | Junction Icon for last opened node | path to the image | icons/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 | icons/empty.gif |
alt_e | alt and title attribute | none | |
icon_l | Image with vertical line | path to the image | icons/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:
Notes:
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.
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:
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}]
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:
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.
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:
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.
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. |
Name | Type | Description |
---|---|---|
Properties | ||
o_root | object | Reference to tree object current item belongs to |
n_depth | numeric | Depth of the item in the tree hierarchy. 0 if root, 1 - next level etc. |
n_id | numeric | Number of this item in the a_index list of tree object it belongs to |
n_node_id | numeric | 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_state | numeric | 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_parent | object | 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_order | object | If item is initialized this value is order of current item in its block (a_children array of parent object) |
Collections/Arrays | ||
a_config | array | 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_children | array | 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:
Below you can find some ideas how Tigra Tree Menu PRO API can be used.
/* 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.") } }
/* 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; }
/* 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; }
//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 }
/* 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>
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.
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 gives the right to include unlimited number of Tigra Tree Menu PRO instances in the products of license owner.
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.
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:
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.
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.
Below provided explanation for JavaScript Tree Menu related definitions that used in this documentation. Descriptions are given in context of this document.