TreeviewLite

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.

Markup

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>
  <ul>
   <li><span>item 2.1</span></li>
   <li><span>item 2.2</span>
     <ol>
      <li><span>item 2.2.1</span></li>
      <li><span>item 2.2.2</span></li>
      <li><span>item 2.2.3</span></li>
     </ol>
   </li>
  </ul>
 </li>
 <li><span>item 3</span>
   <ol>
    <li><span>item 3.1</span></li>
   </ol>
 </li>
</ol>

Note that:

• You need to wrap the labels of each list item in span tags
• You can nest lists as deeply as you like
• You can use any combination of ordered or unordered lists

Script

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) { Y.one( "#myOlList2" ).plug( Y.Plugin.TreeviewLite ); });

which will render this:

Events

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) {
 
 Y.one( "#myOlList" ).plug( Y.Plugin.TreeviewLite );

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

 Y.one( "#myOlList" ).treeviewLite.on( "open" , myTvListener );
 Y.one( "#myOlList" ).treeviewLite.on( "collapse" , myTvListener ); 
 
 
});

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

CSS

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

Tested

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