 JavaScript Page 2 - Using the Animate Option in a Treeview jQuery Hierarchical Navigation System |
| JavaScript Page 2 - Using the Animate Option in a Treeview jQuery Hierarchical Navigation System |
A review of the collapsed option - JavaScriptWelcome to the third chapter of a series on creating a hierarchical navigation system with the TreeView jQuery plug-in. Made up of six tutorials, this series explores in detail the main features that come packaged with this helpful JavaScript extension. It shows you how to get the most out of it with copious code samples.
print this article SEARCH DEV SHED |
Before I proceed to demonstrate how to animate the branches of a tree created with the "TreeView" plug-in, I'd like to review how the branches can be completely expanded and closed with the "collapsed" option. With this idea in mind, below I included two basic examples. The first one will build a tree with all the branches collapsed, and the second will perform a similar task with the branches shown initially open. Have a look at them:
(example on building a tree view with all the branches initially collapsed)
<!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 the 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>
(example on building a tree view with all the branches initially opened)
<!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 the 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: false }); }); </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>
From the examples shown above, it's clear to see how easy it is to control the initial behavior for all of the branches that belong to a given tree. As I explained previously, the first example assigns a TRUE value to the "collapsed" option, which makes all of the branches display as closed, while in the second case, the opposite occurs, since the branches are shown initially expanded. Now that you hopefully recalled how to use the handy "collapsed" argument, it's time to continue exploring the capabilities offered by the "TreeView" plug-in. As I expressed in the beginning, there's another useful option called "animate" that permits you to create a fast (or even slow) animation effect when the tree's branches are expanded and collapsed. So, in the section to come I'm going to discuss the use of this option in more detail by creating some easy-to-grasp examples. Now, click on the link that appears below and read the following segment.
blog comments powered by Disqus |
|
|
|
|
|
|
|
