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
folder<a href="https://www.jqueryscript.net/tooltip/">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.
