Home arrow JavaScript arrow Page 3 - Creating a TreeView JQuery Hierarchical Navigation System

Using the TreeView plug-in - JavaScript

Are you interested in adding animation effects to the drop-down menus on your web page, but afraid that it's going to take long hours of painful coding to pull it off? Keep reading. This series of articles will show you how to work some easy magic with the Treeview JQuery plug-in and a simple nested HTML list.

TABLE OF CONTENTS:
  1. Creating a TreeView JQuery Hierarchical Navigation System
  2. The skeleton of the tree view system
  3. Using the TreeView plug-in
  4. Collapsing tree branches using the TreeView plug-in
By: Alejandro Gervasio
Rating: starstarstarstarstar / 7
April 20, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

In the previous segment, I built a sample (X)HTML file that included a few basic nested HTML lists to create the skeleton of a navigational tree. Now it’s time to turn this static structure into a truly dynamic one by using the TreeView plug-in. Want to see how the library does its magic? Check out the brand new definition of the previous (X)HTML file, which now uses the plug-in to convert each nested HTML list into a collapsible branch. Here it is:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (branches are initially closed)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview();

});

</script>

</head>

<body>

<ul id="menu">

<li class="closed">Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li class="closed">Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li class="closed">Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li class="closed">Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li class="closed">Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

While at first sight the above (X)HTML file doesn’t seem to do anything spectacular, it’s actually performing quite a few tasks. First, you should notice that the file starts by including three dependencies: the jQuery library, the TreeView plug-in and a new style sheet, called “jquery.treeview.css.” Of course, you must keep in mind that all of these files are mandatory and must always be loaded each time you attempt to use the plug-in.

But, at this point, has anything useful been achieved with the previous sample file? You bet. If you try the above example on your own web server, you should see that the static nested HTML lists now have been turned into a dynamic tree system, whose main branches are displayed initially collapsed.

The following screen capture should give you a better idea of how the navigational tree looks:

That’s a neat hierarchical system, right? And best of all, it was constructed with some basic nested HTML lists. Hopefully, this introductory example should give you an idea of the real functionality provided by the TreeView plug-in, but as I said before, this is merely an introduction to using its main features.

As you saw in the previous image, the main branches of the tree are shown initially closed because each of them has been assigned a “closed” CSS class. It’s also possible to make them to be shown opened instead. Therefore, in the section to come I’m going to explain how to do this, with another easy-to-grasp code sample. So click on the link that appears below and read the next few lines.



 
 
>>> More JavaScript Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: