jQuery：用 lightTreeview 实现树形分类菜单的功能 展开收缩分类代码

时间：2021-11-13 19:13:11

       最近在做前端开发项目中，需要用到树形结构。在网上查阅到了许多相应资源。其中觉得lightTreeview是一款非常不错的JQ树形分类菜单代码，结构简单，支持多级。还有详细的参数可以配置，以实现各种效果。

结构代码示例：

<script>
$(function(){
    $('#tree').lightTreeview({
    collapse: true,
    line: true,
    nodeEvent: true,
    unique: false,
    fileico: true,
    folderico: true,
    animate: 400
    });
})
</script>
<ul id="tree">
                 <li><a href="#">JS代码</a>
                        <ul>
                            <li><a href="#">JS焦点图</a></li>
                            <li><a href="#">JS导航菜单</a></li>
                            <li><a href="#">章节三</a></li>
                            <li><a href="#">章节四</a></li>
                            <li><a href="#">章节测试</a></li>
                        </ul>
                    </li>
                    <li><a href="#">给排水</a>
                        <ul>
                            <li><a href="#">章节一</a></li>
                            <li><a href="#">章节二</a></li>
                            <li><a href="#">章节三</a></li>
                            <li><a href="#">章节四</a></li>
                            <li><a href="#">章节测试</a></li>
                        </ul>
                    </li>
                    <li><a href="#">环评</a>
                        <ul>
                            <li><a href="#">章节一</a></li>
                            <li><a href="#">章节二</a></li>
                            <li><a href="#">章节三</a></li>
                            <li><a href="#">章节四</a></li>
                            <li><a href="#">章节测试</a></li>
                        </ul>
                    </li>
                </ul>

JS参数解释：

 1 $('#demo3').lightTreeview({  //指定需要转化成treeview的ul或ol
 2     collapse: true, //是否允许收缩或展开树型菜单。默认为true
 3     line: true, //是否始用连接线。默认为true。你也可以直接对根节点加入类“treeview-noline”来实现同样的效果
 4     nodeEvent: true,  //是否将节点标题的点击也绑定菜单收缩展开的事件。默认为true
 5     unique: false,  //同级节点是否互斥。默认为false
 6     animate: 200,  //动画效果。0为无效果。默认为200
 7     style: 'red',  //菜单风格。目前有默认,灰色,红色,黑色,fam 共5种风格，风格可以通过添加CSS来增加。你也可以直接对根节点加入类“treeview-风格名称”来实现同样的效果
 8     fileico: false,  //是否显示文件的图标。默认为false。你也可以对节点的DOM加入类“treeview-file”来实现同样的效果
 9     folderico: false  //是否显示节点文件夹的图标。默认为false。你也可以对节点的DOM加入类“treeview-folder”来实现同样的效果});
10 //开启指定的菜单，第一个参数为指定菜单的选择器，第二个参数为动画效果$.lightTreeview.open('#demo3 ul',200);//关闭指定的菜单，第一个参数为指定菜单的选择器，第二个参数为动画效果$.lightTreeview.close('#demo3 ul',200);//切换指定的菜单的样式（关闭变打开，打开变关闭），第一个参数为指定菜单的选择器，第二个参数为动画效果$.lightTreeview.toggle('#demo3 ul',200);

具体效果以及更详情的说明请看演示地址，以及以下：

Demo1  默认的样式

$('#demo1').lightTreeview();

Demo2

通过style值换风格,该值对应css里“treeview-xxx”中的xxx，您可以自己在CSS中建立新的风格。同时您可以直接对列表的根节点上加上一个class，值为treeview-red。

同级节点互斥。事件只响应在“+”或“-”上。

1 $('#demo2').lightTreeview({
2     collapse: true,
3     line: true,
4     nodeEvent: false,
5     unique: true,
6     style: 'red',
7     animate: 0
8 });

Demo3

您可以直接在列表里把需要隐藏的列表设为隐藏。

1 $('#demo3').lightTreeview({
2     collapse: true,
3     line: true,
4     nodeEvent: true,
5     unique: true,
6     animate: 400
7 });

Demo4

  通过Plugin提供的$.lightTreeview.open(selector);$.lightTreeview.close(selector);$.lightTreeview.toggle(selector);三个函数，你可以自己收缩或展开需要的节点。

1 <p class="description">通过Plugin提供的$.lightTreeview.open(selector);$.lightTreeview.close(selector);$.lightTreeview.toggle(selector);三个函数，您可以自己收缩或展开需要的节点</p>
2 
3 <span class="btn" onclick="$.lightTreeview.open('#demo4 ol,#demo4 ul')">展开全部</span> |
4 <span class="btn" onclick="$.lightTreeview.close('#demo4 ol,#demo4 ul')">收缩全部</span> |
5 <span class="btn" onclick="$.lightTreeview.toggle('#demo4 ol,#demo4 ul')">切换全部</span> |
6 <span class="btn" onclick="$.lightTreeview.toggle('#demo4 ul:last')">切换广东节点</span>

注：

1.其中需要的插件有：

1 <link rel="stylesheet" href="css/jquery.lightTreeview.css">
2 
3 <script src="js/jquery-2.1.4.min.js"></script>
4 
5 <script src="js/jquery.lightTreeview.pack.js"></script>

 

2.需要的函数和样式：

 

 1 <script type="text/javascript">
 2         $(function() {
 3             $('#demo1').lightTreeview();
 4             $('#demo2').lightTreeview({
 5                 collapse: true,
 6                 line: true,
 7                 nodeEvent: false,
 8                 unique: true,
 9                 style: 'red',
10                 animate: 0
11             });
12             $('#demo3').lightTreeview({
13                 collapse: true,
14                 line: true,
15                 nodeEvent: true,
16                 unique: true,
17                 style: 'black',
18                 animate: 400
19             });
20             $('#demo4').lightTreeview({
21                 collapse: true,
22                 line: true,
23                 nodeEvent: true,
24                 unique: false,
25                 style: 'gray',
26                 animate: 100,
27                 fileico: true,
28                 folderico: true
29             });
30         });
31     </script>
32

 

 <style type="text/css">
        body {
            font-size: 12px;
            font-family: "宋体";
        }
        pre {
            font-family: Courier New;
            font-size: 14px;
            border:#CCCCCC 1px solid;
            padding:3px;
            background-color: #E0FBFA;
        }
        p {
            line-height: 150%;
            margin: 0;
        }
        .btn {
            cursor: pointer;
            color: #0066FF;
        }
        .exp {
            font-family: "Courier New","宋体";
            font-size: 12px;
            color: gray;
        }
    </style>

3.需要注意的是：

background: url(image/treeview-default.gif) 0 -111px no-repeat; 会报错，

正确的书写方式是：background: url(../image/treeview-default.gif) 0 -111px no-repeat;

原因：

          ../image/123.jpg 表示站点根目录下的image文件夹的下123.jpg

          image/123.jpg 表示和当前页面目一个目录下的image文件夹下的123.jpg

 

 

 

  （文章参考来源：http://www.16css.com）

标签：

相关文章