Overview

Treeview v0.1

Author:
Victor Lin (http://victorlin.me)
License:
MIT License
Demo:
http://victorlin.bitbucket.org/treeview/demo.html

Treeview is a jQuery plugin which provides draggable treeview widget.

To use treeview, simply include script files

<script type="text/javascript" src="jquery-ui/js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.10.0.custom.min.js"></script>
<script type="text/javascript" src="treeview.js"></script>

To build a treeview, for example, you can write HTML like this:

<ul class="treeview well" style="width: 200px; ">
    <li>
        <div class="item folder">Folder1</div>
    </li>
    <li>
        <div class="item folder">Folder2</div>
        <ul>
            <li>
                <div class="item folder">Folder3</div>
                <ul>
                    <li><div class="item">Item3</div></li>
                </ul>
            </li>
            <li><div class="item">Item1</div></li>
            <li><div class="item">Item2</div></li>
        </ul>
    </li>
    <li><div class="item">Item4</div></li>
</ul>

To turn it into a draggable treeview, you can add following script:

<script type="text/javascript">
    $(function () {
        $('.treeview').treeview();
    });
</script>