Home

How-To

Just download or git clone the project. In your HTML you’ll want to link to:

• prototype.treeview.css
• prototype.js
• scriptaculous.js
• effects.js
• sizzle.js
• prototype.treeview.js

All you need to do is represent a tree of data as a set of nested ULs and LIs, wrap the lot with a DIV and do a new Treeview() passing the div to the constructor.

Simple Example

• Ooga
• Foo
  • Bar
  • Baz
    • Oh noes!
    • ’lo World
      • Erm..
      • Out
• Booga
  • Ahem!
  • Alright.
• Urk

Source

<link rel="stylesheet" href="http://github.com/kaiwren/treeview/raw/master/css/prototype.treeview.css">
<script type="text/javascript" src="http://github.com/kaiwren/treeview/raw/master/lib/prototype.js"></script>
<script type="text/javascript" src="http://github.com/kaiwren/treeview/raw/master/lib/scriptaculous-js-1.8.3/src/scriptaculous.js"></script>
<script type="text/javascript" src="http://github.com/kaiwren/treeview/raw/master/lib/scriptaculous-js-1.8.3/src/effects.js"></script>
<script type="text/javascript" src="http://github.com/kaiwren/treeview/raw/master/lib/sizzle.js"></script>
<script type="text/javascript" src="http://github.com/kaiwren/treeview/raw/master/src/prototype.treeview.js">

<div id="tree">
  <ul id="root">
    <li>Ooga</li>
    <li id="foo">
      Foo
      <ul>
        <li>Bar</li>
        <li>
          Baz
          <ul>
            <li> Oh noes!</li>
            <li>
              'lo World
              <ul>
                <li>Erm..</li>
                <li>Out</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      Booga
      <ul>
        <li>Ahem!</li>
        <li>Alright.</li>
      </ul>
    </li>
    <li>Urk</li>
  </ul>
</div>

<script type="text/javascript">
  var tree = new TreeView($('tree'));
</script>