jQuery File Tree Plugin

Posted by jcargoo | Wednesday, November 12, 2008
| 0Delicious Twitter Reddit Digg Loading...



Live Demo: Not available from now on.
Download Source Code Here.

I have found a great jQuery plugin called jQuery File Tree (link) that I am pleased to introduce it to you but with quite some parts have been customized by me.

The full current version (1.01) with connector scripts (PHP, ASP, ASP.NET, JSP, and Lasso) is available here.

I have decided to give you a code with servlet connector script, which you can find in the downloadable code above.

The main page (index.html) is simply an HTML page

requiring following scripts:












<script src="jquery-1.2.6.min.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" />
You can get jquery-1.2.6.min.js file in the jQuery official site.

The second script in the HTML file is:
<script type="text/javascript">
$(function() {
$('#fileTreeDemo').fileTree({ root: '/', script: '/jqueryfiletree/jqueryfiletreeServlet' }, function(file) {
alert(file);
});
});
</script>
Since the DOM elements are fully loaded (details), the file tree is created where # fileTreeDemo is the ID of an empty DIV element that exists on the same page and on which you will have the file tree loaded. This creation is done by the script above.

The fileTree function is defined in the jqueryFileTree.js file and here are the definitions of the parameters passed to this function:

root **** root folder to display **** / (or whatever)
script **** location of the server side AJAX file to use (in this case, it a servlet) **** /jqueryfiletree/jqueryfiletreeServlet

folderEvent **** event to trigger expand/collapse **** click

expandSpeed **** Speed at which to expand branches (in milliseconds); use -1 for no animation **** 500

collapseSpeed **** Speed at which to collapse branches (in milliseconds); use -1 for no animation **** 500

expandEasing **** Easing function to use on expand **** None

collapseEasing **** Easing function to use on collapse **** None

multiFolder **** Whether or not to limit the browser to one subfolder at a time **** true

loadMessage **** Message to display while initial tree loads (can be HTML) **** Loading...


The current script we are talking about is only alerting the filename. If you want to pass the selected filename to a function you create called openFile(), then your code will look like this:
function openFile(file) {
// do something with file
}

$(document).ready( function() {
$('#container_id').fileTree({ [options] }, function(file) {
openFile(file);
});
});
Hope you enjoy.


How to encourage this blog if you like it:
  • Promote our sponsors;
  • Add any kind of comment or critic;
  • Ask me directly by email if you prefer.
Just do something like that, and I will have the huge pleasure to continue posting the best of the creativity I have.




Share this post ?

Digg Reddit Stumble Delicious Technorati Twitter Facebook

0 Previous Comments