YUI Library Examples: TreeView Control: Folder-Style TreeView Design

Implementing the Folder Style for TreeVeiw

The key change we've made in this example of the TreeView Control is that we've applied a supplementary CSS file:


1	<link rel="stylesheet" type="text/css" href="assets/css/folders/tree.css">
	view plain \| print \| ?

This CSS redefines the look of branch nodes so they appear as folders. The folder-style CSS accompanies your YUI download and can be found in the yui/examples/treeview/assets directory.

Beyond the link element referenced above, the following markup is on the page for this example:


1	<!-- Some style for the expand/contract section-->
2	<style>
3	#expandcontractdiv {border:1px dotted #dedede; background-color:#EBE4F2; margin:0 0 .5em 0; padding:0.4em;}
4	#treeDiv1 { background: #fff; padding:1em; margin-top:1em; }
5	</style>
6
7	<!-- markup for expand/contract links -->
8	<div id="expandcontractdiv">
9	<a id="expand" href="#">Expand all</a>
10	<a id="collapse" href="#">Collapse all</a>
11	</div>
12
13	<div id="treeDiv1"></div>
	view plain \| print \| ?

Based on that markup, we use the following JavaScript code to create our TreeView instance, populate its nodes, and add expand/collapse functionality:


1	//an anonymous function wraps our code to keep our variables
2	//in function scope rather than in the global namespace:
3	(function() {
4	var tree; //will hold our TreeView instance
5
6	function treeInit() {
7
8	YAHOO.log("Example's treeInit function firing.", "info", "example");
9
10	//Hand off ot a method that randomly generates tree nodes:
11	buildRandomTextNodeTree();
12
13	//handler for expanding all nodes
14	YAHOO.util.Event.on("expand", "click", function(e) {
15	YAHOO.log("Expanding all TreeView nodes.", "info", "example");
16	tree.expandAll();
17	YAHOO.util.Event.preventDefault(e);
18	});
19
20	//handler for collapsing all nodes
21	YAHOO.util.Event.on("collapse", "click", function(e) {
22	YAHOO.log("Collapsing all TreeView nodes.", "info", "example");
23	tree.collapseAll();
24	YAHOO.util.Event.preventDefault(e);
25	});
26	}
27
28	//This method will build a TreeView instance and populate it with
29	//between 3 and 7 top-level nodes
30	function buildRandomTextNodeTree() {
31
32	//instantiate the tree:
33	tree = new YAHOO.widget.TreeView("treeDiv1");
34
35	//create top-level nodes
36	for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
37	var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
38
39	//we'll delegate to another function to build child nodes:
40	buildRandomTextBranch(tmpNode);
41	}
42
43	//once it's all built out, we need to render
44	//our TreeView instance:
45	tree.draw();
46	}
47
48	//This function adds a random number <4 of child nodes to a given
49	//node, stopping at a specific node depth:
50	function buildRandomTextBranch(node) {
51	if (node.depth < 6) {
52	YAHOO.log("buildRandomTextBranch: " + node.index);
53	for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
54	var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
55	buildRandomTextBranch(tmpNode);
56	}
57	}
58	}
59
60	//When the DOM is done loading, we can initialize our TreeView
61	//instance:
62	YAHOO.util.Event.onDOMReady(treeInit);
63
64	})();//anonymous function wrapper closed; () notation executes function
	view plain \| print \| ?

//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

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Library Examples: TreeView Control: Folder-Style TreeView Design

Implementing the Folder Style for TreeVeiw

Configuration for This Example

YUI Logger Output:

TreeView Control Examples:

More TreeView Control Resources: