首页 > 代码库 > jQuery.TreeView插件实现树状导航（十三）
jQuery.TreeView插件实现树状导航（十三）
一：jQuery.TreeView插件简介
该插件的特点：
1、支持静态的树，即一次性将全部数据加载到客户端。
2、支持异步树，即一次只加载一级或若干级节点，子节点可以异步加载数据。
3、支持节点级联。
4、能够承载大数据量，并性能表现优异。
5、支持主流浏览器。
6、使用方便
官方网站：
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
二：jQuery.TreeView插件使用
页面文件.html
<ul id="navigation"> <li><a href="http://www.mamicode.com/#aaa">Item 1</a> <ul> <li><a href="http://www.mamicode.com/?1.0">Item 1.0</a> <ul> <li><a href="http://www.mamicode.com/?1.0.0">Item 1.0.0</a></li> </ul> </li> <li><a href="http://www.mamicode.com/?1.1">Item 1.1</a></li> </ul> </li></ul>
JS代码
<script type="text/javascript"> $(document).ready(function() { $("#navigation").treeview({ persist: "cookie", collapsed: true, unique: true }); });</script>效果：
二：treeview的一些属性
Options说明：
1、animated
设置动画效果.
Eg:$(".selector").treeview({ animated: "fast" })
2、collapsed
Treeview节点是否收缩,true:收缩，false:展开
$(".selector").treeview({ collapsed: true })
3、control
TreeView显示的容器
$(".selector").treeview({ control: “#container” })
4、unique
设置是否某一时刻只展开一个节点，
true:只展开一个，false:可以同时展开其他节点。
$(".selector").treeview({ unique: true })
5、toggle
$(".selector").treeview({ toggle: function() { console.log(this + " has been toggled"); } })
$(".selector").treeview({ persist: "location" })
8、add
var tree = $(".selector").treeview(); $(".button").click(function() { var newSublist = $("<li><span class=‘folder‘>New Sublist</span><ul>" + "<li><span class=‘file‘>Item1</span></li>" + "<li><span class=‘file‘>Item2</span></li></ul></li>").appendTo(tree); tree.treeview({ add: newSublist }); });
jQuery.TreeView插件实现树状导航（十三）