1. Victor Lin
  2. treeview

Source

treeview /

Filename Size Date modified Message
static
1.1 KB
Add MIT license
1.4 KB
Add demo link in README.rst
1.8 KB
Add author imformation, README.rst
5.4 KB
Improve move event callback

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>