Bootstrap file directory listing

jQuery Plugins jQuery Other Plugins jQuery directoryTree

Chrome, IE9+, FireFox, Opera, Safari#tree view

directoryTree.js is a jQuery plugin for displaying file paths as an interactive, hierarchical directory list (tree structure) in Bootstrap 3. Allows only one value selected at a time (radio button) or multiple (checkboxes).

How to use it:

1. Load jQuery library and the jQuerydirectoryTree plugin in your Bootstrap-built project.

<link rel="stylesheet" href="path/to/bootstrap.min.css> <link rel="stylesheet" href="path/to/directoryTree.css"> ... <script src="path/to/jquery.min.js"></script> <script src="path/to/directoryTree.js"></script>

2. Create a container for the directory tree.

<div id="directoryTree_container"></div>

3. Create buttons to expand/collapse all the nodes.

<button type="button" class="directoryTree_expand"> Expand All </button> <button type="button" class="directoryTree_collapse"> Collapse All </button>

4. Create an array of items for the directory tree.

var filepaths = ["node 1", "node 2", "node 3", ... ];

5. Attach the plugin to an element. Select multiple items paramater is false.

$('#directoryTree_container').directoryTree([filepaths, false]);

6. Enable the expand/collapse buttons.

$('.directoryTree_expand').click(function (e) { $('#directoryTree_container').data('directoryTree').expandAll(); }); $('.directoryTree_collapse').click(function (e) { $('#directoryTree_container').data('directoryTree').collapseAll(); });

7. CSS classes/behavior parameters.

var containerClassname = "directoryTree"; var selectElementClassname = 'directorytree-select'; var rootSelectElementClassname = 'directorytree-rootselect'; var firstLevelULClassname = 'firstlevel-ul'; var childULClassname = 'child-ul'; var hasChildrenClassname = 'has-children'; var noChildrenClassname = 'no-children'; var slideSpeed = 150;

About author:

Author:Sam Scott

Website:http://samzscott.com/

---

This awesome jQuery plugin is developed by samzscott. For more Advanced Usages, please check the demo page or visit the official website.