oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

preparing for 2.6 yui upgrade

Browse source
This commit is contained in:
JT Smith 2008-10-22 18:36:26 +00:00
parent eea207b3ec
commit a041e93da8
1632 changed files with 0 additions and 812103 deletions
Download patch file Download diff file Expand all files Collapse all files

130
www/extras/yui/examples/treeview/folder_style_clean.html
View file

@ -1,130 +0,0 @@
<!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="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/treeview/treeview-min.js"></script>
<!--begin custom header content for this example-->
<!--bring in the folder-style CSS for the TreeView Control-->
<link rel="stylesheet" type="text/css" href="../treeview/assets/css/folders/tree.css">
<!-- Some custom style for the expand/contract section-->
<style>
#expandcontractdiv {border:1px dotted #dedede; background-color:#EBE4F2; margin:0 0 .5em 0; padding:0.4em;}
#treeDiv1 { background: #fff; padding:1em; margin-top:1em; }
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Folder-Style TreeView Design</h1>
<div class="exampleIntro">
<p>This example demonstrates how you can transform the look of your <a href="http://developer.yahoo.com/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.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<!-- markup for expand/contract links -->
<div id="expandcontractdiv">
<a id="expand" href="#">Expand all</a>
<a id="collapse" href="#">Collapse all</a>
</div>
<div id="treeDiv1"></div>
<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>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>