tree.js Converts Unordered List (<ul> element) into interactive tree. Objects OAT.Tree(options) Options may contain any of the following: imagePath - path to all images used in tree imagePrefix - prefix to all images ext - image name extension onlyOneOpened - boolean; can only one branch can be opened at a time? allowDrag - boolean; can user re-drag Tree nodes? useDots - boolean; draw dotted connectors? onClick - "select|toggle|false"; what to do when user clicks label/icon onDblClick - "select|toggle|false"; what to do when user double-clicks label/icon poorMode - boolean; switch to "memory_saving_increased_performance / lower_visual_features" mode? checkboxMode - boolean; use checkbox mode? allowDrag - boolean; can user re-drag Tree nodes? defaultCheck - boolean (only in checkbox mode) ; (ToBeDone: are checkboxes checked by default?) checkNOI - boolean (only in checkbox mode); if true, then checked nodes are contained in OAT.Tree::checkedNOI. Otherwise, this array contains unchecked nodes. checkCallback - function (only in checkbox 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.listElement specifies an <ul> element in which your list lives. Argument collapse toggles initial collapsing of whole tree. Tree data structure can be accessed and modified. See Example for usage. HTML Enhancement Add attributes branchImg, toggleOpenImg, and toggleClosedImg, which would be appended to the <li> tag. This way we can have any desired name AND file format for the tree decoration. Example 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); CategoryDocumentation CategoryOAT CategoryOpenSource CategoryToBeDone