Get new jQuery plugins just once a week

×

Folder-select

February 11, 2015

folder-select-js | Hierarchical select plugin for jQuery

Folder-select-js is a jQuery plugin that allows you to have Hierarchical selection of files and folders

Created by Magnus Jeffs Tovslid

Download

Example

folder-select-js

folder structure

folderselect

Hierarchical select plugin for jQuery.

Check out the live demo

TODO

Dependencies

Usage

Initializing

Initialize by calling folderselect(options) on a jquery object. The options argument is described further below.

$("#element").folderselect({
    data:        my_json_hierarchical_data,
    headers:     [],
    url:         false,
    icon_item:   "item.png",
    icon_folder: "folder.png",
    icon_home:   "home.png",
    spinner_gif: "ajax-loader.gif",
    item_selected_callback:  function(item) {},
    item_removed_callback:   function(item) {},
    folder_entered_callback: function(folder) {}
});

Retrieving selected items

You can retrieve the selected elements by calling folderselect('selected') on the initialized jQuery object. What you get in return is the same as you put in the data parameter when initializing.

var selected_items = $("#element").folderselect('selected');

Options

All options are optional, except for data.

Data parameter

The data parameter is a json object containing the hierarchical data. It is possible to just give the base of the tree here, and use ajax to load sub trees when the user clicks on a folder.

The data parameter consists of two types of objects, items and folders. These have some similarities and some differences.

Remember to check out the examples as well.

Folder and item:

Folder only:

Item only:

Customizing

The plugin is not very customizable at this point. I recommend fiddling with the css if you don't like the looks. In particular, in order to set the height of the select box you need to do so in CSS for now.

Folder-select

Related posts:

Sugar Js
Quail
Kontrol
folder-select-js

http://jquer.in/wp-content/uploads/2015/02/folder-select-js.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever