Tree Control
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Yahoo! UI Library - Tree Control</title> <link rel="stylesheet" type="text/css" href="http://us.js2.yimg.com/us.js.yimg.com/lib/common/css/fonts_2.0.0-b3.css" /> <link rel="stylesheet" type="text/css" href="http://us.js2.yimg.com/us.js.yimg.com/lib/common/css/grids_2.0.0-b3.css" /> <link rel="stylesheet" type="text/css" href="./examples/treeview/css/screen.css" /> <link rel="stylesheet" type="text/css" href="./examples/treeview/css/local/tree.css" /> </head> <body> <div id="pageTitle"> <h3>Tree Control</h3> </div> <script type="text/javascript" src="./build/yahoo/yahoo.js" ></script> <!-- The following are required for the logger --> <script type="text/javascript" src="./build/event/event.js"></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/logger/logger.js"></script> <!-- End logger reqs --> <script type="text/javascript" src="./build/treeview/treeview-debug.js" ></script> <style type="text/css"> /* logger default styles *//* font size is controlled here: default 77% */ #yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;} /* width is controlled here: default 31em */ .yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;} .yui-log p {margin:1px;padding:.1em;} .yui-log button {font-family:monospace;} .yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;} /* height is controlled here: default 20em*/ .yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;} .yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;} .yui-log .yui-log-ft .yui-log-categoryfilters {} .yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;} .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;} .yui-log .yui-log-filtergrp {margin-right:.5em;} .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */ .yui-log .warn {background-color:#F58516;} /* F58516 orange */ .yui-log .error {background-color:#E32F0B;} /* E32F0B red */ .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */ .yui-log .window {background-color:#F2E886;} /* F2E886 tan */ </style> <div id="container"> <img class="ylogo" src="./examples/treeview/img/logo.gif" alt="" /> <div id="containerTop"> <div id="header"> <h1> </h1> <h4> </h4> </div> <div id="main"> <div id="rightbar"> <div id="rightBarPad"> <h3>Examples</h3> <div id="linkage"> </div> <script type="text/javascript"> YAHOO.example.logApp = function() { var divId; return { init: function(p_divId, p_toggleElId, p_clearElId) { divId = p_divId }, onload: function() { if (YAHOO.widget.Logger) { new YAHOO.widget.LogReader( "logDiv", { height: "400px" } ); } } }; } (); YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload); </script> <div id="logDiv"></div> </div> </div> <div id="content"> <form id="mainForm" action="javscript:;"> <div class="newsItem"> <h3>Default TreeView Widget</h3> <p> </p> <div id="expandcontractdiv"> <a href="javascript:tree.expandAll()">Expand all</a> <a href="javascript:tree.collapseAll()">Collapse all</a> </div> <div id="treeDiv1"></div> </div> </form> </div> <div id="footerContainer"> <div id="footer"> <p> </p> </div> </div> </div> </div> </div> <script type="text/javascript"> var tree, nodeIndex; var nodes = []; function treeInit() { buildRandomTextNodeTree(); } function buildRandomTextNodeTree() { 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); } tree.draw(); } var callback = null; function buildLargeBranch(node) { if (node.depth < 10) { YAHOO.log("buildRandomTextBranch: " + node.index); for ( var i = 0; i < 10; i++ ) { new YAHOO.widget.TextNode(node.label + "-" + i, node, false); } } } function buildRandomTextBranch(node) { if (node.depth < 10) { 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); } } } YAHOO.util.Event.addListener(window, "load", treeInit); </script> </body> </html> 
yui.zip( 3,714 k)Related examples in the same category
