Default-presentation-for-the-TreeView-Control

YUI Library JavaScript DHTML


            



    
Default TreeView

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}










Default TreeView


  In this simple example you see the default presentation for the TreeView Control.  Click on labels or on the expand/collapse icons for each node to interact with the TreeView Control.

//global variable to allow console inspection of tree:
var tree;
//anonymous function wraps the remainder of the logic:
(function() {
  //function to initialize the tree:
    function treeInit() {
        buildRandomTextNodeTree();
    }

  //Function  creates the tree and
  //builds between 3 and 7 children of the root node:
    function buildRandomTextNodeTree() {

    //instantiate the tree:
        tree = new YAHOO.widget.TreeView("treeDiv1");
        for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
            var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
            // tmpNode.collapse();
            // tmpNode.expand();
            // buildRandomTextBranch(tmpNode);
            buildLargeBranch(tmpNode);
        }
       // Expand and collapse happen prior to the actual expand/collapse,
       // and can be used to cancel the operation
       tree.subscribe("expand", function(node) {
              YAHOO.log(node.index + " was expanded", "info", "example");
              // return false; // return false to cancel the expand
           });
       tree.subscribe("collapse", function(node) {
              YAHOO.log(node.index + " was collapsed", "info", "example");
           });
       // Trees with TextNodes will fire an event for when the label is clicked:
       tree.subscribe("labelClick", function(node) {
              YAHOO.log(node.index + " label was clicked", "info", "example");
           });
    //The tree is not created in the DOM until this method is called:
        tree.draw();
    }
  //function builds 10 children for the node you pass in:
    function buildLargeBranch(node) {
        if (node.depth < 10) {
            YAHOO.log("buildRandomTextBranch: " + node.index, "info", "example");
            for ( var i = 0; i < 10; i++ ) {
                new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
            }
        }
    }
  //Add an onDOMReady handler to build the tree when the document is ready
    YAHOO.util.Event.onDOMReady(treeInit);
})();



yui_2.7.0b.zip( 4,431 k)