基于 jquery的树形菜单 treeview插件 简单介绍使用
作者：我就是个世界
发表于：2012-09-20
项目中使用到树形菜单，正好项目有在用jquery，所以找到了这个基于 jquery的树形菜单插件[b]treeview[/b]，网上对此的资料好像很少，官方文档移了地方，也不知道哪去了，最后终于找到一个简单的介绍。
[b]JQUERY中的插件树形菜单 treeview 的简单用法：[/b]
地址：http://docs.jquery.com/Plugins/Treeview
（有大量的例子，下载源码）
http://jquery.bassistance.de/treeview/demo/
（有大量的例子参考）
具体介绍需要导入的js和css[separator]
js：
http://code.jquery.com/jquery-latest.js
（支持jquery的源代码）
http://jquery.bassistance.de/treeview/jquery.treeview.js
（支持插件treeview的源代码）
http://jquery.bassistance.de/treeview/lib/jquery.cookie.js
（当使用cookie保存树的状态的时候，这个js包也是需要引入的）
css：
http://jquery.bassistance.de/treeview/jquery.treeview.css
其中这个css中需要的一些预定好的图片，以及地址需要你下载和修改地址
当然其实这些css也可以不必下载的，你可以自己编写自己需要的css，并组织自己需要的图片，
等等
在html网页中确立好你需要放置树形结构的位置。
假设确立好放在id为"test"的标签对象(可以是任何一种容器标签)里面。
eg:$('#test').treeview();
主要是这个标签加入了treeview()这个函数：
treeview(options)
其中的options是很多对可选择性填写的key/value对组成的一个字典量。
这里就介绍几个主要的参数：
[b]animated[/b]：string/number
树形动作的速度，主要参看animate()函数。
eg:$("test").treeview({
animated: "fast"
})
[b] collapsed[/b]：Boolean
设置为True：所有的文件枝是关闭状态
设置为False(默认)：所有文件枝是打开的状态
eg:
$("test").treeview({
collapsed: true
})
[b]unique[/b]：Boolean
设置为True：一个层次上只允许一个分支是打开的
设置为False(默认):一个层次上可以同时打开多个分支
eg：
$("test").treeview({
[b]unique[/b]: true
})
[b]control[/b]：Selector
放置treecontrol的容器的id，treecontrol就是通过一个点击按钮可以展开，合并以及切换分支。
$("#test").treeview({
animated: "fast",
collapsed: true,
control: "#sidetreecontrol",
});
......
Collapse All | Expand All
......
[b]persist[/b]：string
在cookie中或是网页位置上保持树的状态，如果设置为“cookie”，保持树形的每一个click点击操作到cookie中，当
重新加载树形结构的时候，就恢复这些树形的状态。If set to "location", looks for the anchor that matches
location.href and activates that part of the treeview it. Great for href-based state-saving.
(如需要更加详细的了解这个插件，可到上面提供的官方网站上查看)
如何在你定义好的id为"test"的容器中安排好你的树形结构：
主要是通过ul和li这两个标签我做的：
...: ul标签里面包含一些分支
...: 分支的具体定义在li标签里面
简单事例说明：
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.css" mce_href="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.css" type="text/css" media="screen" />
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js" mce_src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js"></mce:script>
<mce:style type="text/css"><!--
#browser {
font-family: Verdana, helvetica, arial, sans-serif;
font-size: 68.75%;
}
--></mce:style><style type="text/css" mce_bogus="1"> #browser {
font-family: Verdana, helvetica, arial, sans-serif;
font-size: 68.75%;
}
</style>
<mce:script type="text/javascript"><!--
$(document).ready(function(){
$("#browser").treeview();
$("#add").click(function() {
var branches = $("<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("#browser");
$("#browser").treeview({
add: branches
});
});
});
// --></mce:script>
</head>
<body>
<ul id="browser" class="filetree">
<li><span class="folder">Folder 1</span>
<ul>
<li><span class="file">Item 1.1</span></li>
</ul>
</li>
<li><span class="folder">Folder 2</span>
<ul>
<li><span class="folder">Subfolder 2.1</span>
<ul id="folder21">
<li><span class="file">File 2.1.1</span></li>
<li><span class="file">File 2.1.2</span></li>
</ul>
</li>
<li><span class="file">File 2.2</span></li>
</ul>
</li>
<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
<ul>
<li><span class="file">File 3.1</span></li>
</ul>
</li>
<li><span class="file">File 4</span></li>
</ul>
<button id="add">Add!</button>
</body>
</html>
[/code]
[b]JQUERY中的插件树形菜单 treeview 的简单用法：[/b]
地址：http://docs.jquery.com/Plugins/Treeview
（有大量的例子，下载源码）
http://jquery.bassistance.de/treeview/demo/
（有大量的例子参考）
具体介绍需要导入的js和css[separator]
js：
http://code.jquery.com/jquery-latest.js
（支持jquery的源代码）
http://jquery.bassistance.de/treeview/jquery.treeview.js
（支持插件treeview的源代码）
http://jquery.bassistance.de/treeview/lib/jquery.cookie.js
（当使用cookie保存树的状态的时候，这个js包也是需要引入的）
css：
http://jquery.bassistance.de/treeview/jquery.treeview.css
其中这个css中需要的一些预定好的图片，以及地址需要你下载和修改地址
当然其实这些css也可以不必下载的，你可以自己编写自己需要的css，并组织自己需要的图片，
等等
在html网页中确立好你需要放置树形结构的位置。
假设确立好放在id为"test"的标签对象(可以是任何一种容器标签)里面。
eg:$('#test').treeview();
主要是这个标签加入了treeview()这个函数：
treeview(options)
其中的options是很多对可选择性填写的key/value对组成的一个字典量。
这里就介绍几个主要的参数：
[b]animated[/b]：string/number
树形动作的速度，主要参看animate()函数。
eg:$("test").treeview({
animated: "fast"
})
[b] collapsed[/b]：Boolean
设置为True：所有的文件枝是关闭状态
设置为False(默认)：所有文件枝是打开的状态
eg:
$("test").treeview({
collapsed: true
})
[b]unique[/b]：Boolean
设置为True：一个层次上只允许一个分支是打开的
设置为False(默认):一个层次上可以同时打开多个分支
eg：
$("test").treeview({
[b]unique[/b]: true
})
[b]control[/b]：Selector
放置treecontrol的容器的id，treecontrol就是通过一个点击按钮可以展开，合并以及切换分支。
$("#test").treeview({
animated: "fast",
collapsed: true,
control: "#sidetreecontrol",
});
......
Collapse All | Expand All
......
[b]persist[/b]：string
在cookie中或是网页位置上保持树的状态，如果设置为“cookie”，保持树形的每一个click点击操作到cookie中，当
重新加载树形结构的时候，就恢复这些树形的状态。If set to "location", looks for the anchor that matches
location.href and activates that part of the treeview it. Great for href-based state-saving.
(如需要更加详细的了解这个插件，可到上面提供的官方网站上查看)
如何在你定义好的id为"test"的容器中安排好你的树形结构：
主要是通过ul和li这两个标签我做的：
...: ul标签里面包含一些分支
...: 分支的具体定义在li标签里面
简单事例说明：
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.css" mce_href="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.css" type="text/css" media="screen" />
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js" mce_src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js"></mce:script>
<mce:style type="text/css"><!--
#browser {
font-family: Verdana, helvetica, arial, sans-serif;
font-size: 68.75%;
}
--></mce:style><style type="text/css" mce_bogus="1"> #browser {
font-family: Verdana, helvetica, arial, sans-serif;
font-size: 68.75%;
}
</style>
<mce:script type="text/javascript"><!--
$(document).ready(function(){
$("#browser").treeview();
$("#add").click(function() {
var branches = $("<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("#browser");
$("#browser").treeview({
add: branches
});
});
});
// --></mce:script>
</head>
<body>
<ul id="browser" class="filetree">
<li><span class="folder">Folder 1</span>
<ul>
<li><span class="file">Item 1.1</span></li>
</ul>
</li>
<li><span class="folder">Folder 2</span>
<ul>
<li><span class="folder">Subfolder 2.1</span>
<ul id="folder21">
<li><span class="file">File 2.1.1</span></li>
<li><span class="file">File 2.1.2</span></li>
</ul>
</li>
<li><span class="file">File 2.2</span></li>
</ul>
</li>
<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
<ul>
<li><span class="file">File 3.1</span></li>
</ul>
</li>
<li><span class="file">File 4</span></li>
</ul>
<button id="add">Add!</button>
</body>
</html>
[/code]
请发表您的评论