jquery.treeview.js 插件

最新推荐文章于 2025-06-03 16:06:21 发布

社会你杰哥

最新推荐文章于 2025-06-03 16:06:21 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏：插件文章标签： jquery.treeview.js 插

本文链接：https://blog.youkuaiyun.com/lllllllllaaa/article/details/77801112

插件专栏收录该内容

8 篇文章

订阅专栏

本文档介绍了如何使用jquery.treeview.js插件创建文档树和导航树。首先，展示了基本的HTML结构和样式要求，如添加'filetree'、'folder'和'file'类。接着，通过JavaScript代码演示了如何启用treeview功能，实现折叠和展开效果。此外，还提供了带有动画的红色主题树和通过一棵树控制两棵树的示例，展示插件的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.文档树示例

　　最简单的一个例子就是文档树的实现。效果如下图所示。

　在使用treeview之前，html文档中需要包含几个jquery.js、jquery.treeview.js、jquery.treeview.css几个文件。具体的请从官网下载。记住jquery.js的引用必须在jquery.treeview.js之前。

　具体代码如下：

1 <h1>文件树示例</h1>

2 <ul id="file" class="filetree">

3 <li>资料

4 <ul>

5 <li>光盘</li>

6 </ul>

7 </li>

8 <li>书籍

9 <ul>

10 <li>小说

11 <ul id="book">

12 <li>当代小说</li>

13 <li>古典小说</li>

14 </ul>

15 </li>

16 <li>诗歌</li>

17 </ul>

18 </li>

19 <liclass="closed">游戏

20 <ul>

21 <li>休闲游戏</li>

22 </ul>

23 </li>

24 <li>照片</li>

25 </ul>

从代码中看出，要显示出文档树的效果，必须在第一个ul的class中添加filetree类。而文件夹以及文件的显示效果是通过添加一个来实现的。文件夹使用folder类，文件使用file类。文档树的实现又是通过列表的嵌套实现的。而给包含相关文件夹li添加closed类可以使这个文件夹保持关闭状态，默认的情况下所有文档树都是打开的。

　　单纯的以上代码是不能实现文档树的效果的，要实现上图中的效果，还需要添加js代码。大家注意第一个ul中的id=file属性，这个时候就派上用场了，js代码如下：

1 $(document).ready(function(){

2 $("#file").treeview();

4 });

　　这就是一个简单文档树的实现。

　2.导航树示例

　　效果如下图所示：

　html代码如下：

View Code

　　这里主要还是列表的嵌套，注意给首个ul添加navigation类属性。

　　一样的，也必须通过js才可以实现导航树的功能：

View Code

　　解释：collapsed设置为true是指导航树处于折叠状态，相当于给前面的closed属性。

　　3.示例三带有快速动画的红色主题树

　　实际效果就是树的颜色变成了红色，并且添加了动画。HTML代码跟示例二差不多，js代码发生了一点点变化。

View Code

　　一样的也需要给html中的第一个ul添加treeview-red类属性。

　　4.示例4 通过一颗树控制两棵树，两颗树的颜色分别为黑色和灰色。

附赠参考代码一份：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>社会你杰哥</title>
 <scriptsrc="../jquery-3.2.1.min.js"></script>
 

 <link rel="stylesheet" href="http://static.runoob.com/assets/js/jquery-treeview/jquery.treeview.css"/>
 <scriptsrc="http://static.runoob.com/assets/js/jquery-treeview/jquery.treeview.js"type="text/javascript"></script>

</head>
<body>
<ul id="browser" class="filetree treeview-famfamfam"><h3>天龙八部</h3>
 <li><span class="folder">第一章</span>
 <ul>
 <li><span class="folder">第一节</span>
 <ul>
 <li>
 <span>第一节(上篇)</span>
 </li>
 <li>
 <span >第一节(下篇)</span>
 </li>
 </ul>
 <li>
 <li><span class="folder">第二节</span>
 <ul>
 <li>
 <span>第一节(上篇)</span>
 </li>
 <li>
 <span >第一节(下篇)</span>
 </li>
 </ul>
 </li>
 </ul>
 </li>
</ul>

<button id="add">Add!</button>

</body>
<script type="text/javascript">
 $("#browser").treeview();

 $("#add").click(function() {
 var branches = $("<li>新一章<ul><li>第一节</li><li>第二节</li></ul></li>");
 branches.appendTo("#browser");
 $("#browser").treeview({
 add:branches,
 });
 });

</script>
</html>