As the YUI Team wraps up work on the core widget foundation for YUI 3, one of the things we’re seeing in the YUI 3 Gallery is transitional solutions that help flesh out YUI 3 implementations. Some of these, like Julien Lecomte’s SimpleMenu, are pure YUI 3, and others, like Adam Moore’s TreeView module, help bridge the gap between YUI 2 and 3 and will likely be replaced by other gallery modules or shipping YUI 3 widgets down the road.
Adam’s TreeView port is a conversion of the popular TreeView Control from YUI 2. The YUI 3 Gallery version runs on the YUI 3 foundation and makes use of Dav Glass’s gallery-port module to bridge some of the API changes. Not all of the features in the YUI 2 version are supported (date editing and animation, for example, aren’t included), but it’s trivial to get a standard TreeView running with this gallery module. All of the code comes off the CDN and can be combo-handled.
And here’s some sample code. Script and CSS file inclusion:
<link type="text/css" rel="stylesheet"
href="http://yui.yahooapis.com/gallery-2010.02.17-20/build/gallery-treeview/assets/skins/sam
/gallery-treeview.css" />
<script type="text/javascript"
src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&
gallery-2009.11.02-20/build/gallery-port/gallery-port-min.js&
gallery-2009.11.19-20/build/gallery-treeview/gallery-treeview-min.js"></script>
Markup:
<div id="treeView"></div>
Implementation script:
<script language="javascript">
//Create a YUI instance that uses the treeview gallery module
YUI().use('gallery-treeview', function(Y) {
//Associate the YAHOO variable with and instance of Dav Glass's
//Port utility:
var YAHOO = Y.Port();
//Instantiate the Tree using standard YUI 2 syntax:
var tree = new YAHOO.widget.TreeView("treeView", [
{type:'Text', label:'Cars',expanded:true, children:[
'Aston Martin',
'Bugatti',
{type: 'Text', label:'GM', href:"http://gm.com", expanded:false, children:[
'Buick',
'Cadillac',
'Chevrolet',
'GMC'
]},
'Renault',
'Toyota',
'Volkswagon'
]
},
{type:'Text', label:'Computers', editable:true, children: [
'Acer',
'Apple',
'HP',
'Dell'
]
}
]);
// Render the tree:
tree.render();
});
</script>
Click through for a working version of this example.