YUI Library Home

Site Search (YDN & YUIBlog):

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

# TreeView Control: Folder-Style TreeView Design

This example demonstrates how you can transform the look of your TreeView Control 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.

View example in new window.

Expand all Collapse all

## 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:

<link rel="stylesheet" type="text/css" href="assets/css/folders/tree.css">

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:

<!-- Some 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> <!-- 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>

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

//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 Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### TreeView Control Examples:

- Default TreeView
- Dynamically Loading Node Data
- Folder-Style TreeView Design
- Menu-Style TreeView Design
- Using TreeView with Custom Icons
- TreeView with Tooltips
- Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal
- Inline Editing of TreeView Node Labels
- Treeview Node Selection and Checkbox Example
- Adding A Context Menu To A TreeView (included with examples for Menu Family)

### More TreeView Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings