jQuery:用 lightTreeview 实现树形分类菜单的功能 展开收缩分类代码
最近在做前端开发项目中,需要用到树形结构。在网上查阅到了许多相应资源。其中觉得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)
posted on 2016-03-05 16:00 CuriousZero 阅读(1540) 评论(0) 编辑 收藏 举报