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.

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:

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:

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

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More TreeView Control Resources:

Copyright © 2007 Yahoo! Inc. All rights reserved.

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