TreeviewLite is a YUI3 lightweight gallery plugin. It renders, collapses nodes, and not much else. However I've also had a go at combining it with Sortable - an example here.


To use it you'll need a list on your page already:

<ol id="myOlList2">
 <li><span>item 1</span></li>
 <li><span>item 2</span>
   <li><span>item 2.1</span></li>
   <li><span>item 2.2</span>
      <li><span>item 2.2.1</span></li>
      <li><span>item 2.2.2</span></li>
      <li><span>item 2.2.3</span></li>
 <li><span>item 3</span>
    <li><span>item 3.1</span></li>

Note that:


TreeviewLite is a plugin, which you plug into the node at the top of the tree; in this example, the <ol> with id="myOlList", like so:

YUI().use('gallery-treeviewlite', function(Y) { "#myOlList2" ).plug( Y.Plugin.TreeviewLite ); });

which will render this:

  1. item 1
  2. item 2
    • item 2.1
    • item 2.2
      1. item 2.2.1
      2. item 2.2.2
      3. item 2.2.3
  3. item 3
    1. item 3.1


TreeviewLite will fire a couple of events: "open" and "collapse", which fire when a branch of the tree is opened or closed respectively. It just passes through the click event at the moment, which is registered on the <span> elements, so that's the element you get if you're listening.

To subscribe to the events, do this:

YUI().use('gallery-treeviewlite', function(Y) { "#myOlList" ).plug( Y.Plugin.TreeviewLite );

 var myTvListener = function(ev){"#eventLog").append( 
     ev._type + "; on node " + ev.details[0].currentTarget.get("innerHTML" ) + "<br/>" 
 } "#myOlList" ).treeviewLite.on( "open" , myTvListener ); "#myOlList" ).treeviewLite.on( "collapse" , myTvListener ); 

and when you click on the +/- on the treeview above you should get something here:


TreeviewLite uses Y.ClassNameManager and adds the following css classes to the the lists:

Element Class
Root element (that you plug in to) yui3-treeviewlite
<li> items that have nested lists within them yui3-treeviewlite-haschild
<li> items that have collapsed (ie not visible) nested lists within them yui3-treeviewlite-collapsed
<li> items that are the last in their branch yui3-treeviewlite-lastchild


On Windows XP: Firefox 3.5.9; IE 7 & 8; Chrome. Comments on others welcome!