Tree Widget

A tree view or an outline view is a graphical user interface element (widget) that presents a hierarchial view of information. Each item (often called a branch or a node) can have a number of subitems. This is often visualized by indentation in a list.

Usage

you can use the widget in 2 different way. The first one is to produce a html code following by the next template and make the container element as a tree with javascript:

<div class="mui-tree" id="my_tree">
   <div class="mui-treetitle">Main!</div>
   <ul>
      <li><span>First Child</span></li>
      <li><span>Second Child</span></li>
   </ul>
</div>

<script type="text/javascript"><!-- <![CDATA[
Window.addEvent("domready", function(){
  $("my_tree").makeAsTree();
});
// ]]> --></script>

The second way is to create the tree by javascript objects:

var tree = new MUI.Tree("Main title"),
    node = new MUI.Node("node caption"),
    node1 = new MUI.LinkNode("Link to digg", "http://digg.com"),
    node2 = new MUI.Node("other node caption");
tree.addChild(node);
tree.addChild(node1);
tree.addChild(node2);

Window.addEvent("domready", function(){
  tree.render(true).injectInside(document.body);
});

Nested List

You can also created nested trees by entering the template into each node:

<div class="mui-tree" id="my_tree">
   <div class="mui-treetitle">Main!</div>
   <ul>
      <li><span>First Child</span></li>
      <li><span>Second Child</span></li>
      <li><!-- Nested Tree -->
         <div class="mui-tree" id="my_tree">
            <div class="mui-treetitle">Main!</div>
            <ul>
               <li><span>First Child</span></li>
               <li><span>Second Child</span></li>
            </ul>
         </div>
      </li>
   </ul>
</div>

<script type="text/javascript"><!-- <![CDATA[
Window.addEvent("domready", function(){
  $("my_tree").makeAsTree();
});
// ]]> --></script>

Or in the javascript way by add the tree as a child:

var tree = new MUI.Tree("Main"),
    tree1 = new MUI.Tree("Sub");
tree.addChild(tree1);

demo can downloaded from the svn.