 JavaScript Page 4 - Opened and Closed Branches on a TreeView jQuery Hierarchical Navigation System |
| JavaScript Page 4 - Opened and Closed Branches on a TreeView jQuery Hierarchical Navigation System |
Collapsing tree branches with the TreeView plug-in - JavaScriptIf you’re interested in mastering the main features that come bundled with the TreeView jQuery plug-in, start reading this series of articles. In it you’ll find numerous examples that will teach you how to utilize this library to build all sorts of professional-looking navigation trees. This is the second part of a four-part series.
print this article SEARCH DEV SHED |
Provided that you already learned how to control the collapse and expansion of a tree’s branches using the “closed” CSS class, the last thing I’m going to cover in this tutorial will consist of replicating this process via the “collapsed” option provided by the “TreeView” plug-in. Basically, all that this option does is specify whether the mentioned branches will be displayed closed or opened initially. A simple demonstration of how to use the “collapsed” argument is shown below. Check it out:
<!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 (using collapsed option)</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({ collapsed: true }); }); </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>
As you can see, using the “collapsed” parameter to control how the branches of the tree will be shown in their initial state is really easy to grasp. For the example coded before, the argument simply specifies that all of the branches will be displayed closed, since a value of FALSE has been assigned to it. The following image illustrates the behavior of the previous hierarchical tree more clearly, when using the “collapsed: false” option:
Here you have it. At this time you should feel pretty satisfied, since you learned how to control, with a single option of the TreeView plug-in, the display of the tree’s branches. As I said before, this last example is the epilogue for this tutorial, so feel free to edit all of the code samples included in it to improve your skills with this powerful jQuery plug-in. Final thoughts In this second episode of the series, I discussed the use of the “collapsed” option provided by the “TreeView” plug-in for controlling in one single step whether or not the branches of a specific tree will be displayed closed initially. In the next part, things will become even more interesting. You’ll learn how to apply a really neat animation effect to a specific tree when expanding and collapsing its branches. Don’t miss the upcoming article!
blog comments powered by Disqus |
|
|
|
|
|
|
|
