Skip to content

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

  • by
File Explorer-like Tree View Plugin For jQuery

File Explorer-like Tree View Plugin For jQueryexplr-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="//"></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>
      <li class="icon-text"> <a href="#">Link 1</a> </li>
      <li class="icon-text"> <a href="#">Link 2</a> </li>
  <li class="icon-mail"> <a href="#">Contact</a> </li>

3. Initialize the tree with default options.


4. All default plugin options.


  // 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
  folder<a href="">Tooltip</a>       : '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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *