jQuery treeview的简单用法

　　最近的项目要用到treeview插件，刚好就自己整理一下这方面的资料。

　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><span class="folder">资料</span>

 4         <ul>

 5             <li><span class="file">光盘</span></li>

 6         </ul>

 7     </li>

 8     <li><span class="folder">书籍</span>

 9         <ul>

10             <li><span class="folder">小说</span>

11                 <ul id="book">

12                     <li><span class="file">当代小说</span></li>

13                     <li><span class="file">古典小说</span></li>

14                 </ul>

15             </li>

16             <li><span class="file">诗歌</span></li>

17         </ul>

18     </li>

19     <li class="closed"><span class="folder">游戏</span>

20         <ul>

21             <li><span class="file">休闲游戏</span></li>

22         </ul>

23     </li>

24     <li><span class="folder">照片</span></li>

25   </ul>

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

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

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

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

3 

4   });

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

　2.导航树示例

　　效果如下图所示：

　　

　　html代码如下：

 1 <ul id="navigation">

 2         <li><a href="#"></a>菜单1

 3             <ul>

 4                 <li><a href="#">菜单1.0</a>

 5                     <ul>

 6                         <li><a href="#">菜单1.0.0</a></li>

 7                     </ul>

 8                 </li>

 9                 <li><a href="#">菜单1.1</a></li>

10                 <li><a href="#">菜单1.2</a>

11                     <ul>

12                         <li><a href="#">菜单1.2.0</a>

13                             <ul>

14                                 <li><a href="#">菜单1.2.0.0</a></li>

15                                 <li><a href="#">菜单1.2.0.1</a></li>

16                                 <li><a href="#">菜单1.2.0.2</a></li>

17                             </ul>

18                         </li>

19                         <li><a href="#">菜单1.2.1</a>

20                             <ul>

21                                 <li><a href="#">菜单1.2.1.0</a></li>

22                             </ul>

23                         </li>

24                         <li><a href="#">菜单1.2.2</a>

25                             <ul>

26                                 <li><a href="#">菜单1.2.2.0</a></li>

27                                 <li><a href="#">菜单1.2.2.1</a></li>

28                                 <li><a href="#">菜单1.2.2.2</a></li>

29                             </ul>

30                         </li>

31                     </ul>

32                 </li>

33             </ul>

34         </li>

35 </ul>

View Code

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

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

1 $("#navigation").treeview({

2                 persist: "location",

3                 collapsed: true,

4                 unique: true

5             });

View Code

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

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

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

1 $("#red").treeview({

2         animated: "fast",    //快速动画

3         collapsed: true,      //开始时设为折叠的

4         unique: true,    

5         persist: "cookie",    //基于cookie的持久性

6         toggle: function() {

7             window.console && console.log("%o was toggled", this);

8         }

9     });    

View Code

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

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

　　html关键代码如下：

 1 <div id="treecontrol">

 2         <a title="Collapse the entire tree below" href="#"><img src="../images/minus.gif" /> Collapse All</a>

 3         <a title="Expand the entire tree below" href="#"><img src="../images/plus.gif" /> Expand All</a>

 4         <a title="Toggle the tree below, opening closed branches, closing open branches" href="#">Toggle All</a>

 5     </div>

 6     <ul id="black" class="treeview-black">

 7         <li>Item 1</li>

 8             ...

 9     </ul>

10     <ul id="gray" class="treeview-gray">

11         <li>Item 1</li>

12         ....

13     </ul>        

View Code

　　js中代码如下：

1 $("#black, #gray").treeview({

2         control: "#treecontrol",

3         persist: "cookie",

4         cookieId: "treeview-black"

5     });

6 

7 });

View Code