Blog

jQuery Folder Tree

Published on September 28, 2011

Recently I was in a need displaying a collapseable tree of filesystem folders in a PHP app of mine. I found many jQuery plugins but none was exactly what i was looking for, so I wrote my own jQuery plugin for displaying a tree of folders. The plugin comes with it's own PHP connector since it uses Ajax to generate new nodes. Feel free to contribute a connector for a another server side language such as ASP, Perl, Python etc.jQuery Folder Tree - Screenshot

Features

  • Small, just 2K without minification
  • Produces valid, semantic XHTML
  • Fully customizable via CSS
  • Uses AJAX to fetch folder information on the fly
  • Easy to configure and implement
  • Includes connector script for PHP
  • Supports custom connector scripts for extended functionality
  • Configurable loading message

Demo

View a live demonstration of the folder tree.

Download

Current version: jQuery Folder Tree – Version 1.00 (28 September 2011)

This plugin is provided to you as-is, at absolutely no cost. If you would like to support its development, feel free to contribute any amount you prefer via PayPal. As always, you are welcome to contribute code for bug fixes and feature enhancements as well. Either way, thanks for supporting our efforts!

Paypal

Usage

Dependencies

jQuery Folder Tree requires jQuery 1.4 or above.

Creating a Folder Tree

In it’s simplest form, you can create a folder tree using the following code:

$(document).ready( function() {
    $("#smallbrowser").folderTree();
});

where #smallbrowser is the ID of an empty DIV element that exists on your page. The folder tree will automatically load when your page loads.

Configuring the Folder Tree

Parameters are passed as an object to thefolderTree()function. Valid options include:

ParameterDescriptionDefault Value
root root folder to display /
script location of the serverside AJAX file to use jquery.foldertree.php
loadMessage Message to display while initial tree loads (can be HTML) Loading…

To create a folder tree with multiple parameters, your code will look something like this:

$(document).ready(function(){
	$("#smallbrowser").folderTree({
        root: '/Documents/',
        script: 'jquery.foldertree.php',
        loadMessage: 'My loading message...'
    });
});

Styling the Folder Tree

The folder tree relies 100% on CSS for styling. To give your users an aesthetically pleasing experience, you should either use the included stylesheet for your folder tree or create your own. Refer tostyle.cssto make any changes in the styles.

Connector Script

jQuery Folder Tree comes with a serverside connector script that is used to read the file system on your server and return data to the clientside script via AJAX. The default connector script isjquery.foldertree.php. You can use a connector script for another language by setting thescriptparameter to the location of the script you want to use (see Configuring the Folder Tree). Alternatively, you can build a custom connector script to extend the functionality of jQuery Folder Tree to better suit your needs (see Custom Connector Scripts).

If you would like to share a connector that you’ve written for another language, let us know! We’ll be happy to add it to the download for everyone to use!

The connector script provided with jQuery Folder Tree is only designed to read information from a specified root folder. Although this is typically harmless, there exists a potential for malicious individuals to be able to view your entire directory structure by spoofing therootparameter. It is highly recommended that you add some form of check to your connector script to verify the path being scanned is a path that you want to allow visitors to see.

Custom Connector Scripts

You can create a custom connector script to extend the functionality of the folder tree. The easiest way to do this is probably by modifying the php script supplied in the download. If you want to start from scratch, your script should accept one POST variable (dir) and output an unsorted list in the following format:

Use class "nosubs" instead of "collapsed" where there are no subfolders.

Licensing & Terms of Use

This plugin is dual-licensed under the GNU General Public License and the MIT License and is copyright 2011 <htmlab®>.

Special Thanks

A special thanks goes out to FAMFAMFAM for their excellent Silk Icon Set.