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库这些相信大家都是知道的。
多的不说了,来一张我的实验截图:
分享到:
相关推荐
jqury 文件树jquery.fileTree效果很好
jquery file tree jquery file treejquery file treejquery file tree
jQuery File Tree 需要用到4个文件 分别为 jquery.js (jquery核心库) jqueryFileTree.js (jqueryFileTree核心库) jquery.jqueryFileTree.jsp (在connection文件夹中 用于JavaScript和jsp的连接,添加列表...
内容索引:脚本资源,jQuery,目录树,树形菜单,jQuery插件 jQuery File Tree 是基于jQuery的多级、多功能树形菜单插件,可以很方便的应用在ASP/PHP/,界面精致,结构与数据分离,自动获取图标格式并调用对应图标显示,...
NULL 博文链接:https://berserker-12.iteye.com/blog/427399
bower install jquery-filetree 手动的 下载 ##Usage <link rel="stylesheet" href="path/to/filetree.css"> [removed][removed] [removed][removed] $ ( document ) . ready ( function ( ) { $ ( '#...
使用JQuery和FileTree插件实现的本地文件浏览器,包括以下功能: 1.本地驱动器的选择 2.左侧显示目录,右侧显示文件 3.在新窗口(html页面)中打开文件 4.可以显示中文目录和中文文件 计划开发的功能 1.记录最后...
JQUERY FILE TREE是一个可配置的,AJAX的文件浏览器的jQuery插件。作为一行JavaScript代码,您可以创建一个定制的,完全互动的文件树。
(18) jQuery File Tree 11 19.jQuery & CSS Example – Dropdown Menu 12 20. Reinventing a Drop Down with CSS and jQuery 12 21. Simple jQuery Dropdowns 12 22. Styling Drop Down Boxes with jQuery 13 23. ...
JQuery本地文件管理器——界面截图,欢迎大家下载
Tree traversal $.children( [selector] ) $.closest( selector [, context] ) arr.closest( selectors [, context] ) $.find( selector ) $.next( [selector] ) $.nextAll( [selector] ) $.nextUntil( [selector] )...
var item = $('#filegrid').datagrid('getRows'); if (item) { for (var i = item.length - 1; i >= 0; i--) { var index = $('#filegrid').datagrid('getRowIndex', item[i]); $('#filegrid').datagrid
下面是一个示例: 代码如下: ”tt”> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> <ul> <li> <span><a>File 11</a></span> </li> <li> <span>File 12</span> </li> <li> <span>File 13</span> &...
在服务器端,定义一个如下的类来表示要传递的文件信息: 代码如下: public class FileInformation { public string FullPath { get; set; } public string Name { get; set; } public string Info { get; set; } ...
丰富的文件管理器 Rich Filemanager是根据MIT许可发布的... Filetree:允许一次打开并显示多个子文件夹 在线MS Office文档查看器-基于Google Docs Viewer 通过ViewerJS扩展的预览文件类型列表 可以预览的新查看器:
简单的树 jQuery 另一个 jQuery 树视图...-- Simple Tree core CSS file --> <link rel="stylesheet" href="css/simpletree.css"> <!-- jQuery 1.9+ or Zepto.js 1.0+ --> [removed][removed] <!--
在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环。如: tree.json [{ id:1, text:...
使用方法可参考jqueryFileTree官网
瑞文代码推土机,一个代码生成器。 数据库设计----->增删改查,下拉框取值,表取值,文件上传下载,Excel导入导出,权限,菜单控制 你想写代码都不给你机会。...jQuery插件包括zTree Uploadify Boxy FileTree easyui