完美显示文件树的Jquery插件

这是一款用于生成文件树状菜单的Jquery插件。它支持Ajax动态读取文件目录，它支持很多动态脚本语言（诸如 php,asp,C#,ruby……），它可以生成良好语义的xhtml，且美观漂亮……。Jquery File Tree绝对是一款值得收藏的Jquery插件。

这是一款可配置的，支持Ajax的Jquery文件浏览器插件。

 

概览 Jquery File Tree是一款可配置的，支持Ajax的Jquery文件浏览器插件。使用它你可仅用一行javascript代码实现一个定制化的、可交互的文件树。 目前，我们提供现成的服务器端的连接脚本，包括PHP, ASP, ASP.NET, JSP, and Lasso。如果你是一名开发者，你也可以用其它语言编写自己的连接器。

特色

  • 最终生成可验证通过且具有良好语义的XHTML
  • 可通过CSS进行样式定制
  • 可根据文件扩展名来自动选择文件节点的图标（icon）
  • 通过AJAX实时获取文件信息（而非一次全部取来）
  • 容易配置和扩展
  • 提供诸如PHP，ASPX(C#)的服务器端连接脚本
  • 支持专门编写服务器端连接器以进行功能扩展
  • 可配制节点展开/合拢事件（可展开多节点还是仅能展开一个节点）
  • 可配置节点展开/合拢速度
  • 支持Jquery的easing方法（Jquery的一种动画特效）
  • 单/多文件夹显示
  • 可定制节点载入（Loading）时的提示信息

兼容性

Jquery File Tree需要Jquery 1.2.6 或更高版本，在以下浏览器中测试通过：

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

在线示例
查看各种配置下的文件树的在线示例

插件下载
当前版本下载：Version 1.01（2008/4/12） 这款插件以当前状况（As is:双方都接受当前现状，包括任何瑕疵）提供，并完全免费。如果你愿意支持它的开发，可以用paypal自由捐款。非常欢迎为插件bug提出解决代码或更好的方案，感谢支持。

使用方法
依赖性（使用前提）
Jquery File Tree需要Jquery 1.2或更高版本。如果使用Easing动画特效，还需要引入Jquery Easing Plugin插件。

创建文件树

在最简单的情况下，可以用下面的代码创建文件树：

$(document).ready( function() {
$('#container_id').fileTree({ root: '/some/folder/' }, function(file) {
alert(file);
});
});


代码中#container_id 是页面中一个空DIV的ID，文件树会在页面加载时在#container_id 中自动加载。

配置文件树
在fileTree()方法中，参数是以对象方式传入的，可选参数如下：
root——要显示文件树的根文件夹 ， 默认值：/
script——要使用的服务器端连接文件地址，默认值：jqueryFileTree.php
folderEvent——文件夹节点展开/合拢事件，默认值：click
expandSpeed——节点展开速度（单位：毫秒），-1时无动画，默认值：500
collapseSpeed——节点合拢速度（单位：毫秒），-1时无动画，默认值：500
expandEasing——展开节点是否使用easing动画特效，默认值：None
collapseEasing——合拢节点是否使用easing动画特效，默认值：None
multiFolder——是否可以同时有多个文件夹节点处于展开状态，默认值：true
loadMessage——节点树展开时的载入信息（可以是HTML），默认值：Loading...
创建一个多参数的文件树，可用下面类似代码：

$(document).ready( function() {
    $('#container_id').fileTree({
      root: '/some/folder/',
      script: 'jqueryFileTree.asp',
      expandSpeed: 1000,
      collapseSpeed: 1000,
      multiFolder: false
    }, function(file) {
        alert(file);
    });
});

设置文件树外观

文件树的样式是完全依赖于CSS的。如果想让文件树拥有良好的外观，你需要引用插件中的样式表，或者是你自己创建的样式表。

文件树后续事件的处理
当文件节点被点击时，jQuery File Tree会传入字符串格式的文件名，最简单的扑捉处理事件的方式是使用匿名函数，例如你想将选中文件名称传入openFile()方法，如下：

function openFile(file) {
    // do something with file
}

$(document).ready( function() {
    $('#container_id').fileTree({ [options] }, function(file) {
        openFile(file);
    });
});

连接脚本

Jquery File Tree 通过服务器端连接脚本读取服务器文件系统，并通过Ajax传回客户端。默认的连接器脚本是：jqueryFileTree.php。你可以通过设置 script参数来定位其它脚本语言的连接器。当然，需要的话你也可以创建自己的连接器来扩展插件功能。 在下载到得插件包中包含以下连接器脚本：

  • PHP - Cory S.N. LaViska
  • ASP (VBS) - Chazzuka
  • ASP.NET (C#) - Andrew Sweeny
  • ColdFusion - Tjarko Rikkerink
  • JSP - Joshua Gould
  • Lasso - Marc Sabourdin
  • Perl - Oleg Burlaca
  • Python/Django - Martin Skou
  • Ruby - Erik Lax
连接器脚本用来为Jquery File Tree插件读取服务器端文件夹信息。虽然说这没有明显的危害，但是也可能会有不还好意的人通过电子欺诈手段通过root参数浏览到整个文件夹结构。因此，强烈建议在你的连接脚本中检查用户请求的文件夹路径是否是允许的。

编写自己的连接脚本

你可以创建一个自己的连接器作为文件树的扩展。这么做最简单的方式是更改下载包中提供的连接器脚本。如果你想从指定的某个根路径载入，你的脚本应当接受一个Post变量，并输出如下格式的无序列表：

<ul class="jqueryFileTree" style="display: none;">
    <li class="directory collapsed"><a href="#" rel="/this/folder/">Folder Name</a></li>
    (additional folders here)
    <li class="file ext_txt"><a href="#" rel="/this/folder/filename.txt">filename.txt</a></li>
    (additional files here)
</ul>


版本历史
V 1.01

  • 解决文件夹/文件名称中出现其他语言字符时的bug（2008/4/12）

V 1.00

  • 初始发布版本（2008/5/24）

 

使用许可

该插件在GNU General Public License和MIT License进行许可，copyright 2008 A Beautiful Site, LLC。

共有0个回答