ディレクトリツリーを表示できるプラグインが便利

f:id:tsumayouzi:20150223121954j:plain

jquery.treeviewという便利なプラグインが便利！！ 使い方備忘録

まずはダウンロードをして、
読み込む

<link rel="stylesheet" type="text/css"  href="./css/jquery.treeview.css" />
<script src="./js/jquery-2.1.3.js"></script>
<script src="./js/jquery.cookie.js" type="text/javascript"></script>
<script src="./js/jquery.treeview.js" type="text/javascript"></script>

<ul id="browser" class="filetree">
        <li><span class="folder">Folder 1</span>
            <ul>
                <li><span class="file">Item 1.1</span></li>
            </ul>
        </li>
        <li><span class="folder">Folder 2</span>
            <ul>
                <li><span class="folder">Subfolder 2.1</span>
                    <ul id="folder21">
                        <li><span class="file">File 2.1.1</span></li>
                        <li><span class="file">File 2.1.2</span></li>
                    </ul>
                </li>
                <li><span class="file">File 2.2</span></li>
            </ul>
        </li>
        <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
            <ul>
                <li><span class="file">File 3.1</span></li>
            </ul>
        </li>
        <li><span class="file">File 4</span></li>
    </ul>

すると、こんな感じに
f:id:tsumayouzi:20150321112936p:plain