|
Tigra Tree Menu AJAX is a highly versatile load-on-demand DHTML tree control for web applications utilizing AJAX technology.
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.
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 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
};
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
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.
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.
| 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 |
| 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 |
| 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 |
| 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. |
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.
DO's:
DONT's (nothing unreasonable)
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.
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.