YUI Library Home

Site Search (YDN & YUIBlog):

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

# TreeView Control: Menu-Style TreeView Design

As with the Folder Style example, here we're using CSS to control the styling of our TreeView Control's node icons. The CSS and image assets for the Menu Style are available as part of the YUI download package.

This example also implements `MenuNode` instead of `TextNode` for node creation. Only one `MenuNode` can be open at a given depth at the same time. This creates an interaction in which nodes close up behind you as you open new ones, keeping the vertical size of the TreeView more compact during navigation.

View example in new window.

Collapse all

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

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

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:

<!-- 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="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 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 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 © 2010 Yahoo! Inc. All rights reserved.

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