YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: TreeView Control: Using TreeView with Custom Icons

# TreeView Control: Using TreeView with Custom Icons

This example demonstrates the use of custom icon styles on TreeView Control nodes through the use of a image sprite. Read the tutorial below the example for full details on how to achieve this effect.

View example in new window.

## Creating and Applying Custom Node Icons for Your TreeView:

Many tree-style implementations call for using custom icons on a per-node basis. In this example, we'll look at one strategy for apply custom icons to specific nodes using the YUI TreeView Control.

We'll start by using a single image containing our icon set and we'll use the technique known as "CSS Sprites" to specify which icon we want to use for each specific style. This allows us to combine seven images in a single HTTP request (read more about why reducing HTTP requests is a good idea). The raw image is displayed below.

With that image in place, we can now set up our style rules to identify icons for each file type. We do that by positioning our `icons.png` image uniquely for each icon we want to display:

<style type="text/css"> .icon-ppt { display:block; height: 22px; padding-left: 20px; background: transparent url(../treeview/assets/img/icons.png) 0 0px no-repeat; } .icon-dmg { display:block; height: 22px; padding-left: 20px; background: transparent url(../treeview/assets/img/icons.png) 0 -36px no-repeat; } .icon-prv { display:block; height: 22px; padding-left: 20px; background: transparent url(../treeview/assets/img/icons.png) 0 -72px no-repeat; } .icon-gen { display:block; height: 22px; padding-left: 20px; background: transparent url(../treeview/assets/img/icons.png) 0 -108px no-repeat; } .icon-doc { display:block; height: 22px; padding-left: 20px; background: transparent url(../treeview/assets/img/icons.png) 0 -144px no-repeat; } .icon-jar { display:block; height: 22px; padding-left: 20px; background: transparent url(../treeview/assets/img/icons.png) 0 -180px no-repeat; } .icon-zip { display:block; height: 22px; padding-left: 20px; background: transparent url(../treeview/assets/img/icons.png) 0 -216px no-repeat; } .htmlnodelabel { margin-left: 20px; } </style>

The effect of these style rules is to create a 20-pixel space to the left of the styled object and to place the icon directly in that space. The sheet of icons is positioned so that, for example, the zip-file icon will appear when the class `icon-zip` is applied.

To apply these styles on a per-node basis in TreeView, we use the labelStyle property of TextNodes and MenuNodes and the contentStyle property of HTMLNodes.

Here is the code used to create the TreeView instance above and to create the first node, "Ahmed's Documents," while applying the specific icon styles to each node:

//create the TreeView instance: var tree = new YAHOO.widget.TreeView("treediv"); //get a reusable reference to the root node: var root = tree.getRoot(); //for Ahmed's documents, we'll use TextNodes. //First, create a parent node for his documents: var ahmedDocs = new YAHOO.widget.TextNode("Ahmed's Documents", root, true); //Create a child node for his Word document: var ahmedMsWord = new YAHOO.widget.TextNode("Prospectus", ahmedDocs, false); //Now, apply the "icon-doc" style to this node's //label: ahmedMsWord.labelStyle = "icon-doc"; var ahmedPpt = new YAHOO.widget.TextNode("Presentation", ahmedDocs, false); ahmedPpt.labelStyle = "icon-ppt"; var ahmedPdf = new YAHOO.widget.TextNode("Prospectus-PDF version", ahmedDocs, false); ahmedPdf.labelStyle = "icon-prv";

The script for creating Susheela's part of the tree is very similar. Here, we'll use HTMLNodes, and we'll use the `contentStyle` property to apply the icon style:

//for Susheela's documents, we'll use HTMLNodes. //First, create a parent node for her documents: var sushDocs = new YAHOO.widget.TextNode("Susheela's Documents", root, true); //Create a child node for her zipped files: var sushZip = new YAHOO.widget.HTMLNode("<span class=\"htmlnodelabel\">Zipped Files</span>", sushDocs, false, true); //Now, apply the "icon-zip" style to this HTML node's //content: sushZip.contentStyle = "icon-zip"; var sushDmg = new YAHOO.widget.HTMLNode("<span class=\"htmlnodelabel\">Files -- .dmg version</span>", sushDocs, false, true); sushDmg.contentStyle = "icon-dmg"; var sushGen = new YAHOO.widget.HTMLNode("<span class=\"htmlnodelabel\">Script -- text version</span>", sushDocs, false, true); sushGen.contentStyle = "icon-gen"; var sushJar = new YAHOO.widget.HTMLNode("<span class=\"htmlnodelabel\">JAR file</span>", sushDocs, false, true); sushJar.contentStyle = "icon-jar";

Note that in this example we're also applying the "folder style" CSS file that is included with the TreeView Control's examples; you can find that file in the YUI distribution under `/examples/treeview/assets/css/folders/tree.css`.

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