jQuery Treeview

jQuery Treeview 插件用于把一個(gè)無序列表改為一個(gè)可擴(kuò)展的可折疊的樹，有利于導(dǎo)航。該插件支持位置和基于 cookie 的持久性。

該插件目前版本是 1.4.1，以后將會(huì)整合成為 jQuery UI 的一部分。

訪問 jQuery Treeview 官網(wǎng)，下載 jQuery Treeview 插件。

另外，還有很多可替代 Treeview 的 jQuery 樹插件，比如 jsTree。

學(xué)完本教程，建議您進(jìn)行jQuery實(shí)戰(zhàn)練習(xí)來鞏固您剛學(xué)到的新知識(shí)

文件樹示例

在使用jQuery Treeview之前，HTML文檔中需要包含jquery.js、jquery.treeview.js、jquery.treeview.css幾個(gè)文件，你可以從官網(wǎng)下載。

<ul id="browser" class="filetree treeview-famfamfam">
    <li><span class="folder">Folder 1</span>
        <ul>
            <li><span class="folder">Item 1.1</span>
                <ul>
                    <li><span class="file">Item 1.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="folder">Subfolder 2.2</span>
                        <ul>
                            <li><span class="file">File 2.2.1</span></li>
                            <li><span class="file">File 2.2.2</span></li>
                        </ul>
                    </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>
    </li>
</ul>