Products
Services
Contact Us

Scripts: DHTML :: Tree Folders :: Library Article #2

Developer's Section

JQuery Tree Folder
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (1905)
Favorites:

Create a simple tree structure using the popular JQuery Framework.

The JQuery framework can be used to create a folder structure for document centers / or applications that require data files to be organized into a hierarchical structure. Usually this type of dhtml script can help improve categorization and create an easy way to access your data. In this example, we will try to use JQuery libraries to create a simple tree structure.

Example

  • Products
    • Product 1
    • Product 2
    • Product 3
    • Product 4
  • Customers
    • North America
      • E & M Company
      • America Construction L.P
    • South America
      • Y-T Affiliates
      • ZEC Company
    • Europe
      • Triton delegates
      • DIF Company
  • Employees
    • Employee 1
    • Employee 2
    • Employee 3


Notes:
  • You can modify the structure of the tree by adding ul and li items to the main ul list which in the following example has been assigned id = browser.
  • You may need to modify the path to the images folder in the jquery.treeview.css
  • Follow the same pattern when using in combination with a server side language to output the tree dynamically
  • See at the end of this tutorial for all the required downloads


Code:


 Code Snippet 1

  
<!-- include css and JQuery library scripts -->
  
<link rel="stylesheet" href="http://www.yoursite.com/yourscripts/jquery.treeview.css" />

<script src="http://www.yoursite.com/yourscripts/jquery.js" 
                                   type="text/javascript"></script>
<script src="http://www.yoursite.com/yourscripts/jquery.cookie.js" 
                                   type="text/javascript"></script>
<script src="http://www.yoursite.com/yourscripts/jquery.treeview.js" 
                                   type="text/javascript"></script>
<script language="javascript">
  
//initialize the tree  
$(document).ready(function(){
      
  $("#browser").treeview();

});  
</script>


<!-- begin JQuery tree folder structure -->
<ul id="browser" class="filetree">
  <li class="closed"><span class="folder">Products</span>
    <ul>
      <li><span class="file">Product 1</span></li>
      <li><span class="file">Product 2</span></li>
      <li><span class="file">Product 3</span></li>
      <li><span class="file">Product 4</span></li>
    </ul>
  </li>
  <li class="closed"><span class="folder">Customers</span>
    <ul>
      <li class="closed"><span class="folder">North America</span>
        <ul id="folder21">

          <li><span class="file">E & M Company</span></li>
          <li><span class="file">America  L.P</span></li>
        </ul>
      </li>
      <li class="closed"><span class="folder">South America</span>
        <ul id="folder22">

          <li><span class="file">Y-T Affiliates</span></li>
          <li><span class="file">ZEC Company</span></li>
        </ul>
      </li>
      <li class="closed"><span class="folder">Europe</span>
        <ul id="folder23">
          <li><span class="file">Triton delegates</span></li>
          <li><span class="file">DIF Company</span></li>
        </ul>
      </li>        
    </ul>
  </li>
  <li class="closed"><span class="folder">Employees</span>
    <ul>
      <li><span class="file">Employee 1</span></li>
      <li><span class="file">Employee 2</span></li>
      <li><span class="file">Employee 3</span></li>
    </ul>
  </li>
</ul>
<!-- end of JQuery folder structure -->



Downloads
jquery.js92.2 KB
jquery.treeview.css2.5 KB
jquery.treeview.js7.7 KB
jquery.cookie.js3.8 KB
file.gif0.1 KB
folder.gif0.1 KB
folder-closed.gif0.1 KB
treeview-default.gif1.2 KB
treeview-default-line.gif1.9 KB
 

See other Scripts in Tree Folders

Submit Your Scripts:

If you would like to have your DHTML scripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Email:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]