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

### 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
- Custom TreeView with Check Boxes
- TreeView with Tooltips
- Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal
- Inline Editing of TreeView Node Labels
- 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 © 2008 Yahoo! Inc. All rights reserved.

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