jquery.lightTreeview.js

版本：1.0.0
在以下浏览器中测试通过：
IE6.0
IE7.0
Firefox 2.0.0
Opera 9.10
Safari 3.04

绯雨制作，请至http://feiyu.asgard.cn留言

点此下载（含Demo）

详细解释

$('#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

默认的样式

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

Demo2

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

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

$('#demo2').lightTreeview({
	collapse: true,
	line: true,
	nodeEvent: false,
	unique: true,
	style: 'red',
	animate: 0
});

Demo3

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

$('#demo3').lightTreeview({
	collapse: true,
	line: true,
	nodeEvent: true,
	unique: true,
	animate: 400
});

Demo4

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

展开全部 | 收缩全部 | 切换全部 | 切换广东节点