Yahoo! UI Library - Tree Control 4
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Yahoo! UI Library - Tree Control</title> <link rel="stylesheet" type="text/css" href="./examples/treeview/css/screen.css"> </head> <body> <link rel="stylesheet" type="text/css" href="./examples/treeview/css/local/tree.css"> <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> <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 name="mainForm" action="javscript:;"> <div class="newsItem"> <h3>HTML Node</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; 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); buildRandomTextBranch(tmpNode); // var tmpNode2 = new YAHOO.widget.HTMLNode("label-" + i, tree.getRoot(), false, true); buildRandomTextBranch(tmpNode); // buildRandomTextBranch(tmpNode2); } tree.draw(); } var callback = null; function buildRandomTextBranch(node) { if (node.depth < 3) { YAHOO.log("buildRandomTextBranch: " + node.index); for ( var i = 0; i < Math.floor(Math.random() * 4) + 1 ; i++ ) { tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false); // tmpNode2 = new YAHOO.widget.HTMLNode(node.html + "-" + i, node, false, true); // if (node.depth == 2) { buildRandomHTMLBranch(tmpNode); // buildRandomHTMLBranch(tmpNode2); // } else { // buildRandomTextBranch(tmpNode); // } } } } var counter = 0; function buildRandomHTMLBranch(node) { YAHOO.log("buildRandomHTMLBranch: " + node.index); var id = "htmlnode_" + counter++; var html = '<div id="' + id + '"' + ' onmouseover="enableDragDrop(this, \'' + id + '\')"' + ' style="border:1px solid #aaaaaa; ' + ' position:relative; ' + ' height:100px; width:200px; ' + ' margin-bottom:10px; ' + ' background-color: #c5dbfc">' + 'Info ' + id + '</div>'; // new YAHOO.widget.HTMLNode(html, node, false, true); new YAHOO.widget.HTMLNode(html, node, false, false); } function enableDragDrop(el, id) { new YAHOO.util.DD(id); el.onmouseover = null; } YAHOO.util.Event.addListener(window, "load", treeInit); </script> </body> </html> 
yui.zip( 3,714 k)Related examples in the same category
