 JavaScript Page 4 - Creating a TreeView JQuery Hierarchical Navigation System |
| JavaScript Page 4 - Creating a TreeView JQuery Hierarchical Navigation System |
Collapsing tree branches using the TreeView plug-in - JavaScriptAre 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.
print this article SEARCH DEV SHED |
In the previous section, you learned how to create a hierarchical menu tree where all of its branches were initially displayed collapsed. However, it’s very easy to modify this behavior and make them appear opened instead. To accomplish this, I simply need to remove the “closed” CSS classes assigned to the pertinent branches, as is demonstrated by the following example:
<!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 open)</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>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>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>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>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>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> Now that all of the “closed” CSS classes have been removed from each branch of the tree, they’ll be displayed initially open. The result of this process can be seen more clearly if you look at the screen shot below:
Hopefully, this example demonstrates how easy it is to construct hierarchical trees with the help of the TreeView jQuery plug-in. As usual, feel free to edit the code sample developed in this tutorial, so you can acquire more practice with this powerful JavaScript library. Final thoughts In this first chapter of the series, I introduced you to using the TreeView jQuery plug-in to create a professional hierarchical navigation system. Nonetheless, I’m only scratching the surface of the numerous features that come packaged with the plug-in. In the upcoming part I’m going to explain how to control which branches of the tree must be displayed collapsed and expanded. Now that you’ve been told what topics will be covered in the next article of this series, you simply can’t miss it!
blog comments powered by Disqus |
|
|
|
|
|
|
|
/ 7 
