jQuery File Tree文件树插件

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

淘建站为您提供更多_其它特效_jQuery插件_树_tree，在此特别感谢您对我们的支持与厚爱！

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