Creating a TreeView JQuery Hierarchical Navigation System - Using the TreeView plug-in (
Page 3 of 4 )
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.
