%META:TOPICPARENT{name="OATDOCIndex"}%
---+ tree.js

Converts Unordered List (<tt>&lt;ul&gt;</tt> element) into interactive tree.

%TOC%

---++ Objects

---+++ OAT.Tree(options)

Options may contain any of the following:

   * <tt>*imagePath*</tt> - path to all images used in tree
   * <tt>*imagePrefix*</tt> - prefix to all images
   * <tt>*ext*</tt> - image name extension
   * <tt>*onlyOneOpened*</tt> - boolean; can only one branch can be opened at a time?
   * <tt>*allowDrag*</tt> - boolean; can user re-drag Tree nodes?
   * <tt>*useDots*</tt> - boolean; draw dotted connectors?
   * <tt>*onClick*</tt> - "select|toggle|false"; what to do when user clicks label/icon
   * <tt>*onDblClick*</tt> - "select|toggle|false"; what to do when user double-clicks label/icon
   * <tt>*poorMode*</tt> - boolean; switch to "<nowiki>memory_saving_increased_performance</nowiki> / <nowiki>lower_visual_features</nowiki>" mode?
   * <tt>*checkboxMode*</tt> - boolean; use checkbox mode?
   * <tt>*allowDrag*</tt> - boolean; can user re-drag Tree nodes?
   * <tt>*defaultCheck*</tt> - boolean (only in <tt>checkbox</tt> mode) ; <i>(ToBeDone: are checkboxes checked by default?)</i>
   * <tt>*checkNOI*</tt> - boolean (only in <tt>checkbox</tt> mode); if true, then checked nodes are contained in <tt>OAT.Tree::checkedNOI</tt>. Otherwise, this array contains unchecked nodes.
   * <tt>*checkCallback*</tt> - function (only in checkbox</tt> mode); will be executed (with nodeSet argument) when user changes state of a checkbox.

---++ Methods

---+++ OAT.Tree.assign(listElement, collapse)

This converts a list into an interactive tree.<tt>listElement</tt> specifies an <tt>&lt;ul&gt;</tt> element in which your list lives. Argument <tt>collapse</tt> toggles initial collapsing of whole tree.

Tree data structure can be accessed and modified. See Example for usage.

---++ HTML Enhancement

Add attributes <tt>branchImg</tt>, <tt>toggleOpenImg</tt>, and <tt>toggleClosedImg</tt>, which would be appended to the <tt>&lt;li&gt;</tt> tag. This way we can have any desired name AND file format for the tree decoration.

---++ Example

<verbatim>
var t1 = new OAT.Tree({imagePath:"images",    // will take images from
         imagePrefix:"", ext:"gif"});         // images/Tree_*.gif
var t2 = new OAT.Tree({imagePath:"images",    // will take images from
         imagePrefix:"prefix", ext:"png"});   // images/Tree_prefix_*.png
t1.assign("myUL1", true);   // collapsed
t2.assign("myUL2", false);  // expanded

var node1 = t1.tree.children[0];
var node2 = t2.tree.children[1];

node2.appendChild(node1);
node1.setLabel("newLabel");
node2.expand();
node1.createChild("newLabel", true);  // second argument means that new 
                                      // child is a node rather than leaf
node2.deleteChild(node1);
</verbatim>

CategoryDocumentation CategoryOAT CategoryOpenSource CategoryToBeDone