jQuery File Tree文件树插件

收藏

本文演示了jQuery File Tree文件树插件四种调用方法，具体实例请看DEMO。本文属于作者原创翻译，翻译不好的地方请谅解。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

<div id="fileTreeDemo" class="demo"></div>

引入树插件

若需要动画效果，请引入jquery.easing.js

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script src="jqueryFileTree.js" type="text/javascript"></script>
<link href="jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" />

演示一：默认选项

$('#fileTreeDemo_1').fileTree({root: '../../demo/', script: 'connectors/jqueryFileTree.php'}, function(file) {
    alert(file);
});

演示二：多文件夹 = false

$('#fileTreeDemo_2').fileTree({root: '../../demo/', script: 'connectors/jqueryFileTree.php', folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false}, function(file) {
    alert(file);
});

演示三：自定义消息提示和动画

$('#fileTreeDemo_3').fileTree({root: '../../demo/', script: 'connectors/jqueryFileTree.php', folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, expandEasing: 'easeOutBounce', collapseEasing: 'easeOutBounce', loadMessage: 'Un momento...'}, function(file) {
    alert(file);
});

演示四：双击和无动画效果

$('#fileTreeDemo_4').fileTree({root: '../../demo/', script: 'connectors/jqueryFileTree.php', folderEvent: 'dblclick', expandSpeed: 1, collapseSpeed: 1}, function(file) {
    alert(file);
});

jQuery File Tree中文API