• 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如下:

    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库这些相信大家都是知道的。

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

    3HGYHE[014LO}[U`OOSDVVU

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


作者:破  狼
出处:http://www.cnblogs.com/whitewolf/
本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客博客园--破狼51CTO--破狼

  • 相关阅读:
    @RequestBody, @ResponseBody 注解详解(转)
    Maven之pom.xml配置文件详解
    搭建SpringCloud-Eureka 注册中心以及服务提供与调用 快速了解 SpringCloud-Eureka
    Springboot 之 多配置文件
    Spring Boot配置文件放在jar外部
    Spring Data JPA使用getOne方法报错:Method threw 'org.hibernate.LazyInitializationException' exception. Cannot evaluate
    Java内省机制
    RestTemplate发送请求并携带header信息 RestTemplate post json格式带header信息
    matlab练习程序(螺线拟合)
    mathematica练习程序(曲线的曲率与挠率)
  • 原文地址:https://www.cnblogs.com/whitewolf/p/1733069.html
  • Copyright © 2020-2023  润新知