Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Home

kaiwren edited this page · 11 revisions
Clone this wiki locally

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>
Something went wrong with that request. Please try again.