jQuery 树型菜单插件(Treeview)

jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单 ( Treeview )

适用于一些菜单的导航,支持基于 cookie 的持久性菜单

效果图示

Treeview 插件下载地址

https://github.com/jzaefferer/jquery-treeview/releases

引入 CSS 样式表文件

<link rel="stylesheet" href="/static/lib/jquery/treeview/jquery.treeview.css" />
<link rel="stylesheet" href="/static/lib/jquery/treeview/screen.css" />

引入 JavaScript 文件

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="/static/lib/jquery/treeview/jquery.cookie.js"></script>
<script src="/static/lib/jquery/treeview/jquery.treeview.js"></script>

HTML 代码

<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>

JavaScript 代码

$(document).ready(function(){
    $("#browser").treeview({
        toggle: function() {
            console.log("%s was toggled.", $(this).find(">span").text());
        }
    });

    $("#add").click(function() {
        var branches = $("<li><span class='folder'>New Sublist</span><ul>" +
            "<li><span class='file'>Item1</span></li>" +
            "<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
        $("#browser").treeview({
            add: branches
        });
    });
});

运行范例 »

延伸阅读

  1. jQuery Treeview Github 地址: https://github.com/jzaefferer/jquery-treeview
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.