jQuery File Tree(翻译)

简介:

  继上一篇文章,今天我要讲一个Jquery File Tree 的插件。它的官方网站是http://abeautifulsite.net/2008/03/jquery-file-tree。当前版本是1.01,下载地址为:http://labs.abeautifulsite.net/projects/js/jquery/fileTree/jquery.fileTree-1.01.zip。它主要是利用Jquery Ajax是西安在服务器端固定目录下去的相应的目录层次结构,并用树形结构的方式来展现出来。在我们的网站,如我们的网站的如用户图片或文件包查找,插入博客、下载方面这个Jquery File Tree插件就显得很有用。

    它要求Jquery1.2.6以上的版本,据官方说能够在如下浏览器中很好的运行。

  • Internet Explorer 6 & 7
  • Firefox 2 & 3
  • Safari 3
  • Chrome
  • Opera 9

和许多Jquery插件一样它用法简单。用一句简单的Jquery代码就能够实现服务器端文件的树形结构展现。

CODE如下:

 
 
  1. jQuery File Tree  
  2. $(document).ready( function() {   
  3.  
  4. $('#div_id').fileTree({ root: '/script/' }, function(file) {   
  5.  
  6. alert(file);   
  7.  
  8. });   
  9.  
  10. });  

        官方DEMO演示地址: http://labs.abeautifulsite.net/projects/js/jquery/fileTree/demo/

 其中div_id是用来展示树形结构的div节点Id,function 这是触发事件的回调函数(这里的触发时间默认为click,但我们可以自定义如Dbclick等).

第一项可选参数如下表:

参数 描述 默认值
root 在服务器端显示的文件目录 /
script 使用的服务器端的Ajax服务页面,官方提供了相应如jsp、php、ASP、ASP.net等文件,在我们的下载包里面。 jqueryFileTree.php
folderEvent 触发 expand/collapse的事件 click
expandSpeed expand 的速度 (单位 milliseconds); -1表示没有动画效果 500
collapseSpeed collapse的速度 (单位 milliseconds); -1表示没有动画效果 500
expandEasing Easing function to use on expand None
collapseEasing Easing function to use on collapse None
multiFolder 是否可以同时浏览多个目录 true
loadMessage 树初始化时候的显示信息, 支持用HTML格式 Loading…

jQuery File Tree支持的服务器端技术和贡献者名字如下:

  • PHP by Cory S.N. LaViska
  • ASP (VBS) by Chazzuka
  • ASP.NET (C#) by Andrew Sweeny
  • ColdFusion by Tjarko Rikkerink
  • JSP by Joshua Gould
  • Lasso by Marc Sabourdin
  • Lasso by Jason Huck
  • Perl by Oleg Burlaca
  • Python/Django by Martin Skou
  • Ruby by Erik Lax

    最后需要说明的是script是我们将官方的相应语言服务端文件的存在位置,即是Ajax调用的URL。引入CSS、Jquery FileTree JS库这些相信大家都是知道的。

    多的不说了,来一张我的实验截图:

本博客中同类文章还有,请见:我jQuery系列之目录汇总





 本文转自 破狼 51CTO博客,原文链接:http://blog.51cto.com/whitewolfblog/834226,如需转载请自行联系原作者


相关文章
|
JavaScript
jquery(live)中File input的change方法只起一次作用的解决办法
jquery中File input的change方法只起一次作用的解决办法,需要的朋友可以参考下。 错误写法 复制代码代码如下: $(“#uploadImg”).
1265 0
|
JavaScript 前端开发 数据格式
用jQuery File Upload实现简单的文件上传
FORM中的代码: {# file_path #} {{ form.
1171 0
|
Web App开发 前端开发 JavaScript
jquery.fileEveryWhere.js--一个跨浏览器的file显示插件[原]
大牛ppk都说过,在从多表单控件中,上传文件控件的样式是最难以控制的。见文章Styling an input type="file"。本插件也多是参考此文。 先来看看input type="file"在chrome,ie,firefox这三个浏览器下表情各异吧。
1184 0
|
8月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
39 0
|
9月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
32 0
|
30天前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
10月前
|
JavaScript
jQuery编写插件的两种方法
jQuery编写插件的两种方法
59 0
|
30天前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
23 0
|
30天前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
36 0