File Explorer-like Tree View Plugin For jQuery - explr-js

explr-js is a jQuery plugin that converts nested html lists into a File Explorer-like hierarchical tree with smooth animation and custom icons support.

How to use it:

1. Load jQuery library and the jQuery explr-js plugin's files in the html file.

<link href="jquery-explr-VERSION.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-explr-VERSION.js"></script>

2. Create nested html lists containing hierarchical data to be represented as a tree:

<ul id="tree">
  <li class="icon-home"> <a href="#">home</a> </li>
  <li class="icon-user"> <a href="#">About</a> </li>
  <li class="icon-chain"> <a href="#">Links</a>
    <ul>
      <li class="icon-text"> <a href="#">Link 1</a> </li>
      <li class="icon-text"> <a href="#">Link 2</a> </li>
    </ul>
  </li>
  <li class="icon-mail"> <a href="#">Contact</a> </li>
  ...
</ul>

3. Initialize the tree with default options.

$("#tree").explr();

4. All default plugin options.

$("#tree").explr({

  // id attribute for AJAX-loaded container element
  ajaxContainerId     : 'explr-content',              

  // what get displayed when loading AJAX content
  ajaxLoadingText     : '<p>loading..</p>',           

  // set default jQuery.ajax() template
  ajaxOptions         : {},                           

  // default for duration of toggle animation
  animDuration        : 'fast',                       

  // default text which displayed when mouse hover over folder
  folderTooltip       : 'click to expand/collapse',   

  // set cookie enabled as default
  rememberState       : true,                         

  // start undefined state as collapsed in default
  startCollapsed      : true,                         

  // default height for the tree in pixel
  treeHeight          : 'auto',                       

  // default width for the tree in pixel
  treeWidth           : 'auto'                        
  
});

---

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