This time I will share jQuery Plugin and tutorial about Responsive Folder Tree Plugin with jQuery – Bonsai, hope it will help you in programming stack.
Bonsai is a very small (~3kb minified) jQuery plugin which turns a normal nested list into a responsive, mobile-friendly, collapsible, hierarchical folder tree. The plugin uses Font Awesome icon font for folder / file / arrow icons.
How to use it:
1. Download Bonsai plugin and include the bonsai.css
and bonsai.js
into your document which has jQuery library installed.
1 |
< link rel = "stylesheet" href = "/path/to/bonsai.css" > |
2 |
< script src = "//code.jquery.com/jquery-1.11.3.min.js" ></ script > |
3 |
< script src = "/path/to/bonsai.min.js" ></ script > |
2. Create a folder tree from the html structure like this:
05 |
< i class = "icon-caret-right" ></ i > |
06 |
< i class = "icon-doctype icon-columns" ></ i > |
08 |
< i class = "icon-chevron-sign-right" ></ i > |
13 |
< i class = "icon-caret-right" ></ i > |
14 |
< i class = "icon-folder icon-doctype icon-folder-close" ></ i > |
16 |
< i class = "icon-chevron-sign-right" ></ i > |
21 |
< i class = "icon-filetype icon-doctype icon-columns" ></ i > |
23 |
< i class = "icon-chevron-sign-right" ></ i > |
27 |
< i class = "icon-filetype icon-doctype icon-columns" ></ i > |
29 |
< i class = "icon-chevron-sign-right" ></ i > |
3. Create a new Bonsai instance.
1 |
var mytree = new $.bonsai($( '.bonsai' )); |
4. Default plugin options.
6 |
folderIconClass: 'icon-folder' , |
7 |
folderIconOpenClass: 'icon-folder-open' , |
8 |
folderIconCloseClass: 'icon-folder-close' |
This awesome jQuery plugin is developed by jpdevries. For more Advanced Usages, please check the demo page or visit the official website.