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

Implementing the Menu Style

The key change we've made in this TreeView Control example is that we've applied a supplementary CSS file to create the "Menu Style" node presentation:


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

This CSS redefines the look of branch nodes so they appear as arrows. 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="collapse" href="#">Collapse all</a>
10	</div>
11
12	<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 collapsing all nodes
14	YAHOO.util.Event.on("collapse", "click", function(e) {
15	YAHOO.log("Collapsing all TreeView nodes.", "info", "example");
16	tree.collapseAll();
17	YAHOO.util.Event.preventDefault(e);
18	});
19	}
20
21	//This method will build a TreeView instance and populate it with
22	//between 3 and 7 top-level nodes
23	function buildRandomTextNodeTree() {
24
25	//instantiate the tree:
26	tree = new YAHOO.widget.TreeView("treeDiv1");
27
28	//create top-level nodes
29	for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
30	var tmpNode = new YAHOO.widget.MenuNode("label-" + i, tree.getRoot(), false);
31
32	//we'll delegate to another function to build child nodes:
33	buildRandomTextBranch(tmpNode);
34	}
35
36	//once it's all built out, we need to render
37	//our TreeView instance:
38	tree.draw();
39	}
40
41	//This function adds a random number <4 of child nodes to a given
42	//node, stopping at a specific node depth:
43	function buildRandomTextBranch(node) {
44	if (node.depth < 6) {
45	YAHOO.log("buildRandomTextBranch: " + node.index);
46	for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
47	var tmpNode = new YAHOO.widget.MenuNode(node.label + "-" + i, node, false);
48	buildRandomTextBranch(tmpNode);
49	}
50	}
51	}
52
53	//When the DOM is done loading, we can initialize our TreeView
54	//instance:
55	YAHOO.util.Event.onDOMReady(treeInit);
56
57	})();//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 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.MenuNode("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.MenuNode(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: Menu-Style TreeView Design

Implementing the Menu Style

Configuration for This Example

YUI Logger Output:

Logger Console

TreeView Control Examples:

More TreeView Control Resources: