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如下:
官方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库这些相信大家都是知道的。
多的不说了,来一张我的实验截图: