继上一篇文章，今天我要讲一个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… |
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系列之目录汇总
作者：破 狼
出处：http://www.cnblogs.com/whitewolf/
本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客、博客园--破狼和51CTO--破狼。http://www.cnblogs.com/whitewolf/archive/2010/05/11/1733069.html