JavaScript DHTML/YUI Library/Tree TreeView

Материал из Web эксперт
Перейти к: навигация, поиск

Содержание

Adding A Context Menu To A TreeView

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

       "http://www.w3.org/TR/html4/strict.dtd">

<html> 

   <head>
       <meta http-equiv="content-type" content="text/html; charset=utf-8">
       <title>Example: Adding A Context Menu To A TreeView (YUI Library)</title>
       
       <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset/reset.css">
       <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.css">
           
       
       <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css">
        
       
       <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css"> 



       <style type="text/css">
           h1 { 
               font-weight: bold; 
               margin: 0 0 1em 0;
           }
           body {
           
               padding: 1em;
           
           }
           p, ul {
               margin: 1em 0;
           }
           
           p em,
           #operainstructions li em {
               font-weight: bold;
           }
           #operainstructions {
               list-style-type: square;
               margin-left: 2em;
           }
       </style>



       <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
       <script type="text/javascript" src="yui_2.7.0b-lib/container/container_core.js"></script>
       <script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview.js"></script>



       <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>



       <script type="text/javascript">
           /*
Initialize the TreeView instance when the "mytreeview" 
                is ready to be scripted.
           */
           YAHOO.util.Event.onAvailable("mytreeview", function () {
               /*
                    Map of YAHOO.widget.TextNode instances in the 
                    TreeView instance.
               */
               var oTextNodeMap = {};
           
               // Creates a TextNode instance and appends it to the TreeView 
               function buildRandomTextBranch(p_oNode) {
                   var oTextNode,
                       i;
                   if (p_oNode.depth < 6) {
                       for (i = 0; i < Math.floor(Math.random() * 4); i++) {
                           oTextNode = new YAHOO.widget.TextNode(p_oNode.label + "-" + i, p_oNode, false);
                           oTextNodeMap[oTextNode.labelElId] = oTextNode;
                           
                           buildRandomTextBranch(oTextNode);
                       }
                   }
               }

               // Create a TreeView instance
               var oTreeView = new YAHOO.widget.TreeView("mytreeview");
               var n, oTextNode;
               for (n = 0; n < Math.floor((Math.random()*4) + 3); n++) {
                   oTextNode = new YAHOO.widget.TextNode("label-" + n, oTreeView.getRoot(), false);
                   
                   /*
                        Add the TextNode instance to the map, using its
                        HTML id as the key.
                   */
                   
                   oTextNodeMap[oTextNode.labelElId] = oTextNode;
                   
                   buildRandomTextBranch(oTextNode);
               }
       
               oTreeView.draw();

               /*
                    The YAHOO.widget.TextNode instance whose "contextmenu" 
                    DOM event triggered the display of the 
                    ContextMenu instance.
               */
               var oCurrentTextNode = null;

               /*
                    Adds a new TextNode as a child of the TextNode instance 
                    that was the target of the "contextmenu" event that 
                    triggered the display of the ContextMenu instance.
               */
               function addNode() {
                   var sLabel = window.prompt("Enter a label for the new node: ", ""),
                       oChildNode;
                   if (sLabel && sLabel.length > 0) {
                       
                       oChildNode = new YAHOO.widget.TextNode(sLabel, oCurrentTextNode, false);
   
                       oCurrentTextNode.refresh();
                       oCurrentTextNode.expand();
                       oTextNodeMap[oChildNode.labelElId] = oChildNode;
                   }
               }
               
               /*
                    Edits the label of the TextNode that was the target of the
                    "contextmenu" event that triggered the display of the 
                    ContextMenu instance.
               */
               function editNodeLabel() {
                   var sLabel = window.prompt("Enter a new label for this node: ", oCurrentTextNode.getLabelEl().innerHTML);
   
                   if (sLabel && sLabel.length > 0) {
                       
                       oCurrentTextNode.getLabelEl().innerHTML = sLabel;
   
                   }
               }
               
               /*
                   Deletes the TextNode that was the target of the "contextmenu"
                   event that triggered the display of the ContextMenu instance.
               */
               function deleteNode() {
                   delete oTextNodeMap[oCurrentTextNode.labelElId];
                   oTreeView.removeNode(oCurrentTextNode);
                   oTreeView.draw();
               }

               /*
                   "contextmenu" event handler for the element(s) that 
                   triggered the display of the ContextMenu instance - used
                   to set a reference to the TextNode instance that triggered
                   the display of the ContextMenu instance.
               */
               function onTriggerContextMenu(p_oEvent) {
         var oTarget = this.contextEventTarget,
           Dom = YAHOO.util.Dom;
                   /*
                        Get the TextNode instance that that triggered the 
                        display of the ContextMenu instance.
                   */
                   var oTextNode = Dom.hasClass(oTarget, "ygtvlabel") ? 
                             oTarget : Dom.getAncestorByClassName(oTarget, "ygtvlabel");
                   if (oTextNode) {
                       oCurrentTextNode = oTextNodeMap[oTarget.id];
                   }
                   else {
                   
                       // Cancel the display of the ContextMenu instance.
                   
                       this.cancel();
                       
                   }
               
               }

               /*
         Instantiate a ContextMenu:  The first argument passed to the constructor
         is the id for the Menu element to be created, the second is an 
         object literal of configuration properties.
               */
               var oContextMenu = new YAHOO.widget.ContextMenu("mytreecontextmenu", {
                                                               trigger: "mytreeview",
                                                               lazyload: true, 
                                                               itemdata: [
                                                                   { text: "Add Child Node", onclick: { fn: addNode } },
                                                                   { text: "Edit Node Label", onclick: { fn: editNodeLabel } },
                                                                   { text: "Delete Node", onclick: { fn: deleteNode } }
                                                               ] });

               /*
                    Subscribe to the "contextmenu" event for the element(s)
                    specified as the "trigger" for the ContextMenu instance.
               */
               oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu);
           
           });
       </script>
   </head>
   <body class="yui-skin-sam">

   </body>

</html> 

 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Build a TabView from JavaScript.

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Build from Script</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/tabview/assets/skins/sam/tabview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/tabview/tabview-min.js"></script>

</head> <body class=" yui-skin-sam">

Build from Script

This demonstrates how to build a TabView from JavaScript.


<script type="text/javascript"> (function() { 

   var tabView = new YAHOO.widget.TabView();
   tabView.addTab( new YAHOO.widget.Tab({
       label: "lorem",
content: "

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.

", 
       active: true
   }));
   tabView.addTab( new YAHOO.widget.Tab({
       label: "ipsum",
content: "
  • <a href="#">Lorem ipsum dolor sit amet.</a>
  • <a href="#">Lorem ipsum dolor sit amet.</a>
  • <a href="#">Lorem ipsum dolor sit amet.</a>
  • <a href="#">Lorem ipsum dolor sit amet.</a>
" 
   }));
   tabView.addTab( new YAHOO.widget.Tab({
       label: "dolor",
       content: "<form action="#"><fieldset><legend>Lorem Ipsum</legend><label for="foo"> <input id="foo" name="foo"></label><input type="submit" value="submit"></fieldset></form>"
   }));
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");
   tabView.appendTo("container");

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Build a TabView from markup.

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Build from Markup</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/tabview/assets/skins/sam/tabview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/tabview/tabview-min.js"></script>

</head> <body class=" yui-skin-sam">

Build from Markup

This demonstrates how to build a TabView from markup.

  • <a href="#tab1">Tab One Label</a>
  • <a href="#tab2">Tab Two Label</a>
  • <a href="#tab3">Tab Three Label</a>

Tab One Content

Tab Two Content

Tab Three Content

<script> (function() { 

   var tabView = new YAHOO.widget.TabView("demo");
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Copy of the second branch of the tree at the top

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>


<style type="text/css"> .whitebg { 

 background-color:white;

} </style>

</head> <body class=" yui-skin-sam">

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 <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a> instance from several different sources of data:

  1. an HTML list on the page;
  2. an existing TreeView instance"s definition;
  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

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

<script type="text/javascript"> //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.ru", target:"somewhere new"},
     {type:"HTML",html:"<a href="developer.yahoo.ru/yui">YUI</a>"},
     {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);

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Copy of the tree above taken from its own definition

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>


<style type="text/css"> .whitebg { 

 background-color:white;

} </style>

</head> <body class=" yui-skin-sam">

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 <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a> instance from several different sources of data:

  1. an HTML list on the page;
  2. an existing TreeView instance"s definition;
  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

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

<script type="text/javascript"> //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.ru", target:"somewhere new"},
     {type:"HTML",html:"<a href="developer.yahoo.ru/yui">YUI</a>"},
     {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);

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Create Tree from markup

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>


<style type="text/css"> .whitebg { 

 background-color:white;

} </style>

</head> <body class=" yui-skin-sam">

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 <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a> instance from several different sources of data:

  1. an HTML list on the page;
  2. an existing TreeView instance"s definition;
  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

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

<script type="text/javascript"> //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.ru", target:"somewhere new"},
     {type:"HTML",html:"<a href="developer.yahoo.ru/yui">YUI</a>"},
     {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);

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Default presentation for the TreeView Control.

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Default TreeView</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>


<style> 

   #treeDiv1 {background: #fff; padding:1em;}

</style>

</head> <body class=" yui-skin-sam">

Default TreeView

In this simple example you see the default presentation for the <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a>. Click on labels or on the expand/collapse icons for each node to interact with the TreeView Control.

<script type="text/javascript"> //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);

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Dynamically Loading Node Data

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Dynamically Loading Node Data</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>


<style>

  1. treeDiv1 {background: #fff; margin-top:1em; padding:1em; min-height:7em;}

</style>

</head> <body class=" yui-skin-sam">

Dynamically Loading Node Data

In many cases, you"ll want to avoid rendering your <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a> with a full dataset. Rather, you"ll want to load all visible nodes immediately and then retrieve data only when needed for nodes that aren"t visible when the control is first loaded. This example shows you how to do that.

In the TreeView instance below, we"ve loaded all "top-level" nodes into the page as soon as the page loads; these nodes contain the names of many Indian states. When a node is expanded, we use <a href="http://developer.yahoo.ru/yui/connection/">Connection Manager</a> to access <a href="http://developer.yahoo.ru/search/web/V1/relatedSuggestion.html">a Yahoo! Search web service that will return a list of "related suggestions."</a> So when the page loads, we know nothing about our top-level nodes" children. And while the resulting TreeView instance could grow quite large through user interaction, we need only load a very light set of nodes to begin with.

This example also shows the two label styles for childless nodes. The first (default) style maintains the expand/collapse icon style even when the node has no children; the second style shows childless nodes as leaf nodes with no expand/collapse icon. Note: this is for dynamically loaded nodes after the dynamic load process has produced zero children. You can also force the leaf node presentation for any node by setting the isLeaf property to true (this also disables dynamic loading).

Childless Node Style:

<label for="mode0"><input type="radio" id="mode0" name="mode" value ="0" checked /> 

   Expand/Collapse</label>

<label for="mode1"><input type="radio" id="mode1" name="mode" value ="1" /> Leaf Node</label>

<script type="text/javascript"> YAHOO.example.treeExample = function() { 

   var tree, currentIconMode;
   function changeIconMode() {
       var newVal = parseInt(this.value);
       if (newVal != currentIconMode) {
           currentIconMode = newVal;
       }
       buildTree();
   }
   
       function loadNodeData(node, fnLoadComplete)  {
           
           //We"ll load node data based on what we get back when we
           //use Connection Manager topass the text label of the 
           //expanding node to the Yahoo!
           //Search "related suggestions" API.  Here, we"re at the 
           //first part of the request -- we"ll make the request to the
           //server.  In our success handler, we"ll build our new children
           //and then return fnLoadComplete back to the tree.
           
           //Get the node"s label and urlencode it; this is the word/s
           //on which we"ll search for related words:
           var nodeLabel = encodeURI(node.label);
           
           //prepare URL for XHR request:
           var sUrl = "yui_2.7.0b-assets/treeview-assets/ysuggest_proxy.php?query=" + nodeLabel;
           
           //prepare our callback object
           var callback = {
           
               //if our XHR call is successful, we want to make use
               //of the returned data and create child nodes.
               success: function(oResponse) {
                   YAHOO.log("XHR transaction was successful.", "info", "example");
                   //YAHOO.log(oResponse.responseText);
                   var oResults = eval("(" + oResponse.responseText + ")");
                   if((oResults.ResultSet.Result) && (oResults.ResultSet.Result.length)) {
                       //Result is an array if more than one result, string otherwise
                       if(YAHOO.lang.isArray(oResults.ResultSet.Result)) {
                           for (var i=0, j=oResults.ResultSet.Result.length; i<j; i++) {
                               var tempNode = new YAHOO.widget.TextNode(oResults.ResultSet.Result[i], node, false);
                           }
                       } else {
                           //there is only one result; comes as string:
                           var tempNode = new YAHOO.widget.TextNode(oResults.ResultSet.Result, node, false)
                       }
                   }
                   
                   //When we"re done creating child nodes, we execute the node"s
                   //loadComplete callback method which comes in via the argument
                   //in the response object (we could also access it at node.loadComplete,
                   //if necessary):
                   oResponse.argument.fnLoadComplete();
               },
               
               //if our XHR call is not successful, we want to
               //fire the TreeView callback and let the Tree
               //proceed with its business.
               failure: function(oResponse) {
                   YAHOO.log("Failed to process XHR transaction.", "info", "example");
                   oResponse.argument.fnLoadComplete();
               },
               
               //our handlers for the XHR response will need the same
               //argument information we got to loadNodeData, so
               //we"ll pass those along:
               argument: {
                   "node": node,
                   "fnLoadComplete": fnLoadComplete
               },
               
               //timeout -- if more than 7 seconds go by, we"ll abort
               //the transaction and assume there are no children:
               timeout: 7000
           };
           
           //With our callback object ready, it"s now time to 
           //make our XHR call using Connection Manager"s
           //asyncRequest method:
           YAHOO.util.Connect.asyncRequest("GET", sUrl, callback);
       }
       function buildTree() {
          //create a new tree:
          tree = new YAHOO.widget.TreeView("treeDiv1");
          
          //turn dynamic loading on for entire tree:
          tree.setDynamicLoad(loadNodeData, currentIconMode);
          
          //get root node for tree:
          var root = tree.getRoot();
          
          //add child nodes for tree; our top level nodes are
          //all the states in India:
          var aStates = ["Andhra Pradesh","Arunachal Pradesh","Assam","Bihar","Chhattisgarh","Goa","Gujarat","Haryana","Himachal Pradesh","Jammu and Kashmir","Jharkhand","Karnataka"/* we"re only using the first half of this list, to keep the tree smaller,"Kerala","Madhya Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram","Nagaland","Orissa","Punjab","Rajasthan","Sikkim","Tamil Nadu","Tripura","Uttaranchal","Uttar","Pradesh","West Bengal"*/];
          
          for (var i=0, j=aStates.length; i<j; i++) {
               var tempNode = new YAHOO.widget.TextNode(aStates[i], root, false);
          }
          // Use the isLeaf property to force the leaf node presentation for a given node.
          // This disables dynamic loading for the node.
          var tempNode = new YAHOO.widget.TextNode("This is a leaf node", root, false);
          tempNode.isLeaf = true;
          
          //render tree with these toplevel nodes; all descendants of these nodes
          //will be generated as needed by the dynamic loader.
          tree.draw();
       }

   return {
       init: function() {
           YAHOO.util.Event.on(["mode0", "mode1"], "click", changeIconMode);
           var el = document.getElementById("mode1");
           if (el && el.checked) {
               currentIconMode = parseInt(el.value);
           } else {
               currentIconMode = 0;
           }
           buildTree();
       }
   }

} (); //once the DOM has loaded, we can go ahead and set up our tree: YAHOO.util.Event.onDOMReady(YAHOO.example.treeExample.init, YAHOO.example.treeExample,true) </script>


</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Folder-Style TreeView Design: transform the look of your TreeView Control by changing CSS

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Folder-Style TreeView Design</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>


<link rel="stylesheet" type="text/css" href="yui_2.7.0b-assets/treeview-assets/css/folders/tree.css">

<style>

  1. expandcontractdiv {border:1px dotted #dedede; background-color:#EBE4F2; margin:0 0 .5em 0; padding:0.4em;}
  2. treeDiv1 { background: #fff; padding:1em; margin-top:1em; }

</style>


</head> <body class=" yui-skin-sam">

Folder-Style TreeView Design

This example demonstrates how you can transform the look of your <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a> 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.


 <a id="expand" href="#">Expand all</a>
 <a id="collapse" href="#">Collapse all</a>

<script type="text/javascript"> //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 </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Inline Editing of TreeView Node Labels

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Inline Editing of TreeView Node Labels</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/calendar/assets/skins/sam/calendar.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/calendar/calendar-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>


</head> <body class=" yui-skin-sam">

Inline Editing of TreeView Node Labels

This example demonstrates label editing and keyboard navigation in the <a href="http://developer.yahoo.ru/yui/treeview/">YUI TreeView Control</a>. As you interact with the TreeView instance below, you"ll find that some nodes allow you to edit them — double-click on node labels to open the inline editor. This example also demonstrates how you can use arrow keys, +/- keys (expand/collapse), and the enter key to navigate and control the TreeView instance.

 

<script type="text/javascript"> //global variable to allow console inspection of tree: var tree; //anonymous function wraps the remainder of the logic: (function() { 

 var treeInit = function() {
   tree = new YAHOO.widget.TreeView("treeView", [
     "Label 0",
     {type:"Text", label:"Label 1", editable:true},
     {type:"Text", label:"Branch 2", editable:true, expanded:true, children:[
       {type:"Text", label:"Branch 2-0", editable:true, children: [
         "Label 2-0-0",
         "Label 2-0-1"
       ]},
       
       {type:"Text", label:"Branch 2-1", editable:true, children: [
         "Label 2-1-0",
         "Label 2-1-1"
       ]},
     ]},
     {type:"Text",label:"YAHOO", href:"http://www.yahoo.ru", target:"YAHOO\"s home page"},
     {type:"DateNode",label:"31.3.2001",editable:true, calendarConfig: {
       DATE_FIELD_DELIMITER:".",
       MDY_DAY_POSITION:1,
       MDY_MONTH_POSITION:2,
       MDY_YEAR_POSITION:3
     }},
     {type:"text",label:"Branch 3", editable:true, expanded:false, children:[
       "Label 3-0",
       "Label 3-1"
     ]}
   ]);
   tree.render();
   tree.subscribe("dblClickEvent",tree.onEventEditNode);
   
   tree.root.children[1].focus();
   
   tree.subscribe("enterKeyPressed",function(node) {
     YAHOO.util.Dom.get("msg").innerHTML = "Enter key pressed on node: " + node.label;
   });
   tree.subscribe("clickEvent",function(oArgs) {
     YAHOO.util.Dom.get("msg").innerHTML = "Click on node: " + oArgs.node.label;
   });
   tree.subscribe("dblClickEvent",function(oArgs) {
     YAHOO.util.Dom.get("msg").innerHTML = "Double click on node: " + oArgs.node.label;
   });
   
     
 };
 //Add an onDOMReady handler to build the tree when the document is ready
   YAHOO.util.Event.onDOMReady(treeInit);

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Menu-Style TreeView Design

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Menu-Style TreeView Design</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>


<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/treeview-menu.css" />

<style>

  1. expandcontractdiv {border:1px dotted #dedede; background-color:#EBE4F2; margin:0 0 .5em 0; padding:0.4em;}
  2. treeDiv1 { background: #fff; padding:1em; margin-top:1em; }

</style>

</head> <body class=" yui-skin-sam">

Menu-Style TreeView Design

As with the Folder Style example, here we"re using CSS to control the styling of our <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a>"s node icons. The CSS and image assets for the Menu Style are available as part of the YUI download package.

This example also implements MenuNode instead of TextNode for node creation. Only one MenuNode can be open at a given depth at the same time. This creates an interaction in which nodes close up behind you as you open new ones, keeping the vertical size of the TreeView more compact during navigation.


 <a id="collapse" href="#">Collapse all</a>

<script type="text/javascript"> //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 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.MenuNode("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.MenuNode(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 </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Tree built from a static definition

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>


<style type="text/css"> .whitebg { 

 background-color:white;

} </style>

</head> <body class=" yui-skin-sam">

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 <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a> instance from several different sources of data:

  1. an HTML list on the page;
  2. an existing TreeView instance"s definition;
  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

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

<script type="text/javascript"> //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.ru", target:"somewhere new"},
     {type:"HTML",html:"<a href="developer.yahoo.ru/yui">YUI</a>"},
     {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);

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


TreeView with Tooltips

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>TreeView with Tooltips</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script>


<style> 

   #treeDiv1 {background: #fff; padding:1em;}

</style>

</head> <body class=" yui-skin-sam">

TreeView with Tooltips

In this example you see the default presentation for the <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a>. A single <a href="http://developer.yahoo.ru/yui/container/tooltip/index.html">YAHOO.widget.Tooltip</a> instance is used to provide tooltips for all nodes.

<script type="text/javascript"> //global variable to allow console inspection of tree: var tree; //anonymous function wraps the remainder of the logic: (function() { 

   var tt, contextElements = [];
 //function to initialize the tree:
   function treeInit() {
       buildRandomTextNodeTree();
       // Instantiate the single tooltip passing in the list of all of
       // the node label element ids
       tt = new YAHOO.widget.Tooltip("tt", { 
                   context: contextElements 
               });
   }
   
 //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 o = {
               label: "label-" + i,
               // Tooltip will use the title attribute
               title: "This is " + "label-" + i
           };
           var tmpNode = new YAHOO.widget.TextNode(o, tree.getRoot(), false);
           // Generate the markup for this node when the tree is first
           // rendered.  This is necessary in order to make sure tooltips
           // can be attached to hidden nodes.
           tmpNode.renderHidden = true;
           // save the element id for Tooltip
           contextElements.push(tmpNode.labelElId);
           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++ ) {
               var o = {
                   label: node.label + "-" + i,
                   // Tooltip will use the title attribute
                   title: "This is " + node.label + "-" + i
               };
               var tmpNode = new YAHOO.widget.TextNode(o, node, false);
               // save the element id for Tooltip
               contextElements.push(tmpNode.labelElId);
           }
       }
   }
 //Add an onDOMReady handler to build the tree when the document is ready
   YAHOO.util.Event.onDOMReady(treeInit);

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Using TreeView with Custom Icons

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Using TreeView with Custom Icons</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/treeview/assets/skins/sam/treeview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/treeview/treeview-min.js"></script>


<link rel="stylesheet" type="text/css" href="yui_2.7.0b-assets/treeview-assets/css/folders/tree.css"></link>

<style type="text/css"> 

   #treewrapper {background: #fff; position:relative;}
 #treediv {position:relative; width:250px; background: #fff; padding:1em;}
   .icon-ppt { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 0px no-repeat; }
   .icon-dmg { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -36px no-repeat; }
   .icon-prv { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -72px no-repeat; }
   .icon-gen { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -108px no-repeat; }
   .icon-doc { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -144px no-repeat; }
   .icon-jar { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -180px no-repeat; }
   .icon-zip { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -216px no-repeat; }
   .htmlnodelabel { margin-left: 20px; }

</style>


</head> <body class=" yui-skin-sam">

Using TreeView with Custom Icons

This example demonstrates the use of custom icon styles on <a href="http://developer.yahoo.ru/yui/treeview/">TreeView Control</a> nodes through the use of a image sprite. Read the tutorial below the example for full details on how to achieve this effect.

<script> //Wrap our initialization code in an anonymous function //to keep out of the global namespace: (function(){ 

 var init = function() {
   
   //create the TreeView instance:
   var tree = new YAHOO.widget.TreeView("treediv");
   
   //get a reusable reference to the root node:
   var root = tree.getRoot();
   
   //for Ahmed"s documents, we"ll use TextNodes.
   //First, create a parent node for his documents:
   var ahmedDocs = new YAHOO.widget.TextNode("Ahmed"s Documents", root, true);
     //Create a child node for his Word document:
     var ahmedMsWord = new YAHOO.widget.TextNode("Prospectus", ahmedDocs, false);
     //Now, apply the "icon-doc" style to this node"s
     //label:
     ahmedMsWord.labelStyle = "icon-doc";
     var ahmedPpt = new YAHOO.widget.TextNode("Presentation", ahmedDocs, false);
     ahmedPpt.labelStyle = "icon-ppt";
     var ahmedPdf = new YAHOO.widget.TextNode("Prospectus-PDF version", ahmedDocs, false);
     ahmedPdf.labelStyle = "icon-prv";
 
   //for Susheela"s documents, we"ll use HTMLNodes.
   //First, create a parent node for her documents:
   var sushDocs = new YAHOO.widget.TextNode("Susheela"s Documents", root, true);
     //Create a child node for her zipped files:
     var sushZip = new YAHOO.widget.HTMLNode("Zipped Files", sushDocs, false, true);
     //Now, apply the "icon-zip" style to this HTML node"s
     //content:
     sushZip.contentStyle = "icon-zip";
     var sushDmg = new YAHOO.widget.HTMLNode("Files -- .dmg version", sushDocs, false, true);
     sushDmg.contentStyle = "icon-dmg";
     var sushGen = new YAHOO.widget.HTMLNode("Script -- text version", sushDocs, false, true);
     sushGen.contentStyle = "icon-gen";
     var sushJar = new YAHOO.widget.HTMLNode("JAR file", sushDocs, false, true);
     sushJar.contentStyle = "icon-jar";
 
   tree.draw();
 }
 //Add an onDOMReady handler to build the tree when the document is ready
   YAHOO.util.Event.onDOMReady(init);

})(); </script>

</body> </html> 


 </source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/YUI_Library/Tree_TreeView&oldid=4009»