YUI Library JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. YUI Library
  4. Copy of the second branch of the tree at the top




    
Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal 

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







.whitebg {
  background-color:white;
}




Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal 



  

In this simple example you can see how to build TreeView Control instance  from several different sources of data:



      
  1. an HTML list on the page;

    2.   
  2. an existing TreeView instance's definition;

    3.   
  3. a  branch of an existing TreeView instance (e.g., from one of its nodes).


      


Tree from markup



  

        
  • List 0
          

              
    • List 0-0
                

                    
      • item 0-0-0

        •             
      • item 0-0-1

        •           

              

      •       

        

    •     
  • item 0-1
          

              
    • YUI
                

                    
      • item 0-1-0

        •             
      • item 0-1-1

        •           

              

      •       

        

    •   



Copy of the tree above taken from its own definition




Copy of the second branch of the tree at the top




Tree built from a static definition




//global variable to allow console inspection of tree:
var tree1, tree2, tree3;
//anonymous function wraps the remainder of the logic:
(function() {
  var treeInit = function() {
    tree1 = new YAHOO.widget.TreeView("markup");
    tree1.render();
    
    tree2 = new YAHOO.widget.TreeView("treeDiv2",tree1.getTreeDefinition());
    tree2.render();
    var branch = tree1.getRoot().children[1];
    tree3 = new YAHOO.widget.TreeView("treeDiv3", branch.getNodeDefinition());
    tree3.render();
    
    (new YAHOO.widget.TreeView("treeDiv4",[
      'Label 0',
      {type:'Text', label:'text label 1', title:'this is the tooltip for text label 1'},
      {type:'Text', label:'branch 1', title:'there should be children here', expanded:true, children:[
        'Label 1-0'
      ]},
      {type:'Text',label:'YAHOO',title:'this should be an href', href:'http://www.yahoo.com', target:'somewhere new'},
      {type:'HTML',html:'YUI'},
      {type:'MenuNode',label:'branch 3',title:'this is a menu node', expanded:false, children:[
        'Label 3-0',
        'Label 3-1'
      ]}
    ])).render();    
  };
  //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)