Using TreeView with Custom Icons
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
#treewrapper {background: #fff; position:relative;}
#treediv {position:relative; width:250px; background: #fff; padding:1em;}
.icon-ppt { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 0px no-repeat; }
.icon-dmg { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -36px no-repeat; }
.icon-prv { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -72px no-repeat; }
.icon-gen { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -108px no-repeat; }
.icon-doc { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -144px no-repeat; }
.icon-jar { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -180px no-repeat; }
.icon-zip { display:block; height: 22px; padding-left: 20px; background: transparent url(yui_2.7.0b-assets/treeview-assets/img/icons.png) 0 -216px no-repeat; }
.htmlnodelabel { margin-left: 20px; }
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.