jQueryFileTree Demo

Example Use Cases

These are some pretty straightforward examples of what you can do with jQueryFileTree

Basic File Tree
Without multiFolder
Folders Only
Custom Easing
Multiselect
Events

Basic File Tree


$('.filetree-basic').fileTree({
   script: 'connectors/jqueryFileTree.php'
}, function(file) {
   console.log(file);
   // do something with file
   $('.selected-file').text( $('a[rel="'+file+'"]').text() );
});

Without multiFolder


$('.filetree-without-multifolder').fileTree({
   script: 'connectors/jqueryFileTree.php',
   multiFolder: false
});

Folders Only


$('.filetree-folders-only').fileTree({
   script: 'connectors/jqueryFileTree.php',
   onlyFolders: true,
   expandSpeed: 250,
   collapseSpeed: 250
});

Alternatively, you can use onlyFiles to filter folders

Custom Easing


$('.filetree-custom-easing').fileTree({
   script: 'connectors/jqueryFileTree.php',
   expandEasing: 'easeOutBounce'
});

Any option other than the default 'swing' requires jQueryUI or third party lib like jquery.easing.js

Multiselect


$('.filetree-multiselect').fileTree({
   script: 'connectors/jqueryFileTree.php',
   multiSelect: true
});

Only tree items that have been loaded have the ability to be checked. If folder is checked but child elements have not been loaded, your server side script needs to have the logic to map the contents of the folder.

Events


$('.filetree-events')
   .fileTree({
      script: 'connectors/jqueryFileTree.php',
   })
   .on('filetreeexpanded filetreecollapsed filetreeclicked ...', function(e, data) {
      console.log(data);
   });

jQueryFileTree triggers events for most unique actions: expand, expanded, collapse, collapsed, clicked