YUI Library JavaScript DHTML


            



    
Folder-Style TreeView Design

/*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;
}













Folder-Style TreeView Design


  This example demonstrates how you can transform the look of your TreeView Control simply by changing the CSS rules on the page.  Here, the TreeView instance has a "folder style" applied to it such that branch nodes appear as open or closed folders depending on their expand/collapse state.





  Expand all
  Collapse all



//an anonymous function wraps our code to keep our variables
//in function scope rather than in the global namespace:
(function() {
  var tree; //will hold our TreeView instance
  
  function treeInit() {
    
    YAHOO.log("Example's treeInit function firing.", "info", "example");
    
    //Hand off ot a method that randomly generates tree nodes:
    buildRandomTextNodeTree();
    
    //handler for expanding all nodes
    YAHOO.util.Event.on("expand", "click", function(e) {
      YAHOO.log("Expanding all TreeView  nodes.", "info", "example");
      tree.expandAll();
      YAHOO.util.Event.preventDefault(e);
    });
    
    //handler for collapsing all nodes
    YAHOO.util.Event.on("collapse", "click", function(e) {
      YAHOO.log("Collapsing all TreeView  nodes.", "info", "example");
      tree.collapseAll();
      YAHOO.util.Event.preventDefault(e);
    });
  }
  
  //This method will build a TreeView instance and populate it with
  //between 3 and 7 top-level nodes
  function buildRandomTextNodeTree() {
  
    //instantiate the tree:
    tree = new YAHOO.widget.TreeView("treeDiv1");
    
    //create top-level nodes
    for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
      var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
      
      //we'll delegate to another function to build child nodes:
      buildRandomTextBranch(tmpNode);
    }
    
    //once it's all built out, we need to render
    //our TreeView instance:
    tree.draw();
  }
  //This function adds a random number <4 of child nodes to a given
  //node, stopping at a specific node depth:
  function buildRandomTextBranch(node) {
    if (node.depth < 6) {
      YAHOO.log("buildRandomTextBranch: " + node.index);
      for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
        var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
        buildRandomTextBranch(tmpNode);
      }
    }
  }
  
  //When the DOM is done loading, we can initialize our TreeView
  //instance:
  YAHOO.util.Event.onDOMReady(treeInit);
  
})();//anonymous function wrapper closed; () notation executes function





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