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 的 `.fileTree()` 方法初始化插件,指定服务器路径、文件扩展名筛选、回调函数等参数。 ```javascript $('#filetree').fileTree({ root: '/path/to/root', script: '...
jQuery 文件树(jQuery.fileTree)是一款基于 jQuery JavaScript 库的插件,用于在网页中以树形结构展示文件和目录。这款插件以其简洁、高效和易于定制的特点,深受开发者喜爱,尤其适用于需要用户交互式浏览和选择...
jQuery File Tree 需要用到4个文件 分别为 jquery.js (jquery核心库) jqueryFileTree.js (jqueryFileTree核心库) jquery.jqueryFileTree.jsp (在connection文件夹中 用于JavaScript和jsp的连接,添加列表...
$('#filetree').fileTree({ root: '/', script: 'jqueryFileTree.php', // 这是服务器端处理请求的脚本 folderEvent: 'click', // 文件夹点击事件,默认为'click' expandSpeed: 500, // 展开文件夹的速度,单位...
内容索引:脚本资源,jQuery,目录树,树形菜单,jQuery插件 jQuery File Tree 是基于jQuery的多级、多功能树形菜单插件,可以很方便的应用在ASP/PHP/,界面精致,结构与数据分离,自动获取图标格式并调用对应图标显示,...
**jQuery Simple Tree 知识点详解** `jQuery Simple Tree` 是一个基于 jQuery 库开发的交互式树型目录组件,它允许用户通过简单的 HTML 和 JavaScript 代码创建具有拖放功能的树状结构。这个组件在网页应用中尤其...
bower install jquery-filetree 手动的 下载 ##Usage <link rel="stylesheet" href="path/to/filetree.css"> [removed][removed] [removed][removed] $ ( document ) . ready ( function ( ) { $ ( '#...
3. **jQuery File Tree** - 这是一个可配置的Ajax文件浏览器插件,允许通过CSS定制外观。 - 通过Ajax获取文件信息,可自定义展开/收缩事件和速度。 - 开源项目。 4. **CheckTree** - CheckTree 是带有复选框的...
《jQuery FileTree:一款简洁高效的文件管理插件》 在当今的Web开发中,文件管理功能已经成为不可或缺的一部分,尤其在内容管理系统(CMS)或者在线协作平台中。jQuery FileTree是一款非常实用的文件浏览器插件,它...
**jQuery FileTree 插件详解** 在Web开发中,文件管理功能是不可或缺的一部分,而jQuery FileTree是一款非常实用的文件树插件,它能够帮助开发者快速实现文件和目录的展示,提供用户友好的交互体验。这个插件基于...
使用JQuery和FileTree插件实现的本地文件浏览器,包括以下功能: 1.本地驱动器的选择 2.左侧显示目录,右侧显示文件 3.在新窗口(html页面)中打开文件 4.可以显示中文目录和中文文件 计划开发的功能 1.记录最后...
在jQuery EasyUI中,tree组件是一个常用于展示树形数据结构的组件,非常适合实现如组织结构、分类目录等功能。本文将浅析jQuery EasyUI中tree组件的使用方法,内容基于开发经验的理解,为需要此方面的朋友们提供参考...
**jQuery File Tree** 是一个基于JavaScript库jQuery的文件目录遍历和展示插件,它能够以树状结构呈现服务器上的文件系统,用户可以方便地进行浏览、选择或操作。这个插件特别适用于需要在Web应用中实现文件管理的...
EasyUI Tree插件是基于jQuery的一个轻量级插件,它提供了一种简单的方式创建树形控件。然而,在实际应用中,我们常常遇到数据结构的问题——即如何处理带有`children`属性的嵌套数据结构。这篇文章将详细介绍如何对...
$('#fileTree').fileTree({ root: '/root_directory', script: 'path/to/jqueryFileTree.php', // PHP脚本处理Ajax请求 expandSpeed: 500, // 文件夹展开速度 collapseSpeed: 500, // 文件夹折叠速度 ...
在jQuery EasyUI框架中,Tree组件是一个非常常用且功能丰富的控件,用于展示层次结构的数据。在使用Tree组件时,我们需要关注每个节点的状态(state)属性,因为它直接影响着节点的显示和交互行为。本文将深入探讨在...
control: "#treecontrol" // 自定义控制元素 }); ``` 同时,Treeview还支持一些事件,如`expand`、`collapse`、`select`等,可用于监听和响应用户的操作。 五、实战应用 1. 文件管理器:利用Treeview展示文件...
$("#fileTree").treeview({ animated: "fast", collapsed: true, persist: "location" }); }); ``` 这里的`#fileTree`是HTML中列表的ID,`animated`控制折叠动画速度,`collapsed`设置默认是否折叠,`persist`...