jQuery多级列表树插件bootstrap-treeview

最新推荐文章于 2023-06-10 08:48:08 发布

程序员不丑009

最新推荐文章于 2023-06-10 08:48:08 发布

阅读量1.2k

点赞数

分类专栏：前端知识文章标签：树形菜单

本文链接：https://blog.csdn.net/u013517229/article/details/84520659

版权

前端知识专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果图：

实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>树形菜单</title>
    <style>
        @import "css/bootstrap.min.css";
        @import "css/bootstrap-treeview.css";
    </style>
    <script src="js/jquery-2.0.0.min.js"></script>
    <script src="js/bootstrap-treeview.js"></script>
</head>
<body>
<div id="tree" style="width: 260px;"></div>
<script>
    var tree = [
        {
            text: "首页",
            icon: "glyphicon glyphicon-home",
        },
        {
            text: "用户管理",
            icon: "glyphicon glyphicon-user",
            nodes: [
                {
                    text: "用户管理",
                    icon: "glyphicon glyphicon-user"
                },
                {
                    text: "角色管理",
                    icon: "glyphicon glyphicon-user"
                },
                {
                    text: "权限管理",
                    icon: "glyphicon glyphicon-user"
                }
            ]
        },
        {
            text: "资源管理",
            icon: "glyphicon glyphicon-folder-close"
        },
        {
            text: "运行监控",
            icon: "glyphicon glyphicon-signal"
        }
    ];

    $('#tree').treeview({data: tree});

</script>

</body>

</html>

bootstrap-treeview参考博客：http://www.jq22.com/jquery-info10461

bootstrap字体图标：http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

程序员不丑009

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery多级列表树插件bootstrap-treeview

效果图：实现代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;树形菜单&lt;/title&gt; &lt;style&gt; @import "css/bootstrap.min
复制链接

扫一扫