jQuery File Tree(翻译)

2010-05-11 23:58 破狼阅读(7300) 评论(34) 编辑收藏举报

继上一篇文章，今天我要讲一个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如下：

jQuery File Tree
$(document).ready( function() {

$('#div_id').fileTree({ root: '/script/' }, function(file) {

alert(file);

});

});

官方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…`