mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-14 13:33:14 +00:00
133 lines
4.1 KiB
HTML
133 lines
4.1 KiB
HTML
<!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-dom-event/yahoo-dom-event.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>
|