版本:1.0.0
在以下浏览器中测试通过:
IE6.0
IE7.0
Firefox 2.0.0
Opera 9.10
Safari 3.04
$('#demo3').lightTreeview({ //指定需要转化成treeview的ul或ol collapse: true, //是否允许收缩或展开树型菜单。默认为true line: true, //是否始用连接线。默认为true。你也可以直接对根节点加入类“treeview-noline”来实现同样的效果 nodeEvent: true, //是否将节点标题的点击也绑定菜单收缩展开的事件。默认为true unique: false, //同级节点是否互斥。默认为false animate: 200, //动画效果。0为无效果。默认为200 style: 'red', //菜单风格。目前有默认,灰色,红色,黑色,fam 共5种风格,风格可以通过添加CSS来增加。你也可以直接对根节点加入类“treeview-风格名称”来实现同样的效果 fileico: false, //是否显示文件的图标。默认为false。你也可以对节点的DOM加入类“treeview-file”来实现同样的效果 folderico: false //是否显示节点文件夹的图标。默认为false。你也可以对节点的DOM加入类“treeview-folder”来实现同样的效果 });
//开启指定的菜单,第一个参数为指定菜单的选择器,第二个参数为动画效果 $.lightTreeview.open('#demo3 ul',200); //关闭指定的菜单,第一个参数为指定菜单的选择器,第二个参数为动画效果 $.lightTreeview.close('#demo3 ul',200); //切换指定的菜单的样式(关闭变打开,打开变关闭),第一个参数为指定菜单的选择器,第二个参数为动画效果 $.lightTreeview.toggle('#demo3 ul',200);
默认的样式
$('#demo1').lightTreeview();
通过style值换风格,该值对应css里“treeview-xxx”中的xxx,您可以自己在CSS中建立新的风格。同时您可以直接对列表的根节点上加上一个class,值为treeview-red。
同级节点互斥。
事件只响应在“+”或“-”上。
$('#demo2').lightTreeview({ collapse: true, line: true, nodeEvent: false, unique: true, style: 'red', animate: 0 });
您可以直接在列表里把需要隐藏的列表设为隐藏
$('#demo3').lightTreeview({ collapse: true, line: true, nodeEvent: true, unique: true, animate: 400 });
通过Plugin提供的$.lightTreeview.open(selector);$.lightTreeview.close(selector);$.lightTreeview.toggle(selector);三个函数,您可以自己收缩或展开需要的节点
展开全部 | 收缩全部 | 切换全部 | 切换广东节点