Gallery

<script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>

	YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.02.09-21-32',
    modules: {
        'gallery-aui-skin-base': {
            fullpath: 'http://yui.yahooapis.com/gallery-2011.02.09-21-32/build/gallery-aui-skin-base/css/gallery-aui-skin-base-min.css',
            type: 'css'
        },
        'gallery-aui-skin-classic': {
            fullpath: 'http://yui.yahooapis.com/gallery-2011.02.09-21-32/build/gallery-aui-skin-classic/css/gallery-aui-skin-classic-min.css',
            type: 'css',
            requires: ['gallery-aui-skin-base']
        }
    }
}).use('gallery-aui-tree-data', function(Y) {
		var CustomTreeView = Y.Component.create({
			NAME: 'customtreeview',
			EXTENDS: Y.TreeData,
			prototype: {
				CONTENT_TEMPLATE: '<ul></ul>',
				renderUI: function() {
					var instance = this;
 
					var contentBox = instance.get('contentBox');
 
					instance.set('container', contentBox);
					contentBox.addClass(Y.ClassNameManager.getClassName('tree', 'root', 'container'));
 
					instance.eachChildren(function(node) {
						instance.appendChild(node, true);
					});
				}
			}
		});
 
		// This might be how you would instantiate it
	   	var tree2 = new CustomTreeView({
				boundingBox: '#tree2',
				children: [
					{ label: 'Folder 1', children: [ { label: 'file' }, { label: 'file' }, { label: 'file' } ] },
					{ label: 'Folder 2', expanded: true, children: [ { label: 'file' }, { label: 'file' } ] },
					{ label: 'Folder 3', children: [ { label: 'file' } ] },
					{ label: 'Folder 4', expanded: true, children: [ { label: 'Folder 4-1', expanded: true, children: [ { label: 'file' } ] } ] }
				],
				width: 200
			}).render();
	});