YUI Library Home

YUI Library Examples: TreeView Control: Default TreeView

TreeView Control: Default TreeView

In this simple example you see the default presentation for the TreeView Control. Click on labels or on the expand/collapse icons for each node to interact with the TreeView Control.

Getting Started with the TreeView Control

In this simple example for the TreeView Control, we begin with a target <div> on the page; that target <div> is where our tree will be built.

We can now instantiate our TreeView and populate its nodes.

Once you have a tree in place, and even before you call its draw() method, you can begin subscribing to the events in its API. For example, if you'd like to execute a function each time a node is collapsed, you would do the following:

For the sake of this example, we've elaborated on the code above and used loops and some random number logic to build out a larger tree. We've stubbed out some additional event handlers that you might want to experiment with. We've also wrapped the entire snippet in an anonymous function. Here's the full source of the JavaScript we're using to generate the TreeView:

Use this simple example to get started in your explorations of the TreeView Control, then move on to the more complex examples that explore additional features the control offers.

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.

Copyright © 2009 Yahoo! Inc. All rights reserved.

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