YUI Library: TreeView 2008-2-19 v2.

5
Simple Use Case Interesting Moments in TreeView see docs for complete list YAHOO.widget.
TreeView: Properties
var tree = new YAHOO.widget.TreeView("treeDiv1"); Event Fires... Arguments
id (str)
var root = tree.getRoot(); expand ...before a node expands; return Node obj expanding nodeCount (int)
var tmpNode = new YAHOO.widget.TextNode("mylabel", false to cancel. node
collapse ...before a node collapses; return Node obj collapsing
root, false);
false to cancel node
YAHOO.widget.
tree.draw();
labelClick ...when text label clicked Node obj clicked nd TreeView: Methods
Places a Tree control in the HTML element whose ID attribute is TreeView events are Custom Events; subscribe to them by name using the following collapseAll()
"treediv1"; adds one node to the top level of the Tree and renders. syntax: tree.subscribe("expand", fn);. draw()
expandAll()
getNodesByProperty()
TreeView DOM Structure
Constructor: YAHOO.widget.TreeView getRoot()
popNode(node) returns detached
node, which can then be reinserted
YAHOO.widget.TreeView(str | element target); removeChildren(node)
removeNode(node, b
Arguments: autorefresh)
(1) Element id or reference: HTML ID or element reference for the setDynamicLoad(fn)
element being into which the Tree's DOM structure will be inserted.
YAHOO.widget.Node:
Nodes: TextNode, MenuNode, HTMLNode Properties
TextNode (for simple labeled nodes): Inherited by Text, Menu, & HTML nodes

data (obj)
YAHOO.widget.TextNode(obj | str oData, Node obj expanded (b)
oParent[, b expanded]); hasIcon (b)
href (str)
Arguments: isLeaf (b)
(1) Associated data: A string containing the node label or an object iconMode (i)
labelStyle (s) Text/MenuNodes only.
containing str label, str href, and any other custom members Use to style label area, e.g. for custom
icons. Use contentStyle property
desired. If no oData.href is provided, clicking on the TextNode's for HTMLNodes
intrinsic <a> tag will invoke the node's expand method. nextSibling (node obj)
parent (node obj)
(2) Parent node: The node object of which the new node will be a previousSibling (node obj)
child; for top-level nodes, the parent is the Tree's root node. target (str)
(3) Expanded state: A boolean indicating whether the node is tree (TreeView obj)
expanded when the Tree is rendered. Solutions:
YAHOO.widget.Node:
MenuNode (for auto-collapsing node navigation):
Dynamically load child nodes: Methods
MenuNodes are identical to TextNodes in construction and behavior, fnLoadData = function(oNode, fnCallback) { Inherited by Text, Menu, & HTML nodes

except that only one MenuNode can be open at any time for a given //create child nodes for oNode appendTo()
level of depth. var tmp = new YAHOO.widget.TextNode("lbl", oNode); collapse()
fnCallback(); //then fire callback} collapseAll()
HTMLNode (for nodes with customized HTML for labels): var tree = new Yahoo.widget.TreeView(targetEl); expand()
expandAll()
tree.setDynamicLoad(fnLoadData);
YAHOO.widget.HTMLNode(obj | str HTML, Node obj getEl() returns node's wrapper <div>
var root = tree.getRoot(); element
oParent[, b expanded,b hasIcon]); var node1 = new YAHOO.widget.TextNode("1st", root); getHTML() includes children
var node2 = new YAHOO.widget.TextNode("2nd", root); getNodeHTML() sans children
Arguments: node2.isLeaf = true; // leaf node, not dynamic hasChildren()
(1) HTML: A string containing markup for the node's label; no event tree.draw(); insertBefore()
handlers are provided by default for this markup. insertAfter()
isDynamic()
(2) Parent node: See TextNode.
(3) Expanded state: See TextNode. Dependencies isRoot()
setDynamicLoad()
(4) Has Icon: Stipulates whether the expanded/contracted icon (and TreeView requires the YAHOO global object and the Event Utility. toggle()
its horizontal space) should be rendered for this node.