jQuery treeview的文档树的用法
浏览数：28 /
时间：2015年06月09日
最近的项目要用到treeview插件，刚好就自己整理一下这方面的资料。
最简单的一个例子就是文档树的实现。效果如下图所示。
在使用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 });
这就是一个简单文档树的实现。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
