 JavaScript Page 3 - Using the Animate Option in a Treeview jQuery Hierarchical Navigation System |
| JavaScript Page 3 - Using the Animate Option in a Treeview jQuery Hierarchical Navigation System |
Animating hierarchical tree branches with the animate 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 |
As I mentioned in the section that you just read, the "TreeView" plug-in includes an interesting option called "animate" that allows you to apply an animation effect to all of the branches of a given tree, when they're either expanded or collapsed. Actually, understanding how this option works is a simple process, but to clarify any possible doubts that you might have, below I coded a brand new example that demonstrates its usage. 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 (using fast animated 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({ animated: "fast" }); }); </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>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>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>
That's not rocket science, right? As you can see above, now the hierarchical tree has been assigned the parameter "animated: fast," meaning that each time a specific branch is closed or opened in turn, it'll be done by means of a quick scrolling effect. Of course, the best way to understand how the animation argument functions is by trying out the previous example on your own web server, so go ahead and do it. You'll be amazed at how sweetly it works, trust me. Now that you've hopefully learned how to apply a fast animation effect to a sample hierarchical tree, it's time to see how a slow effect can be used instead. The full details for how this task will be performed will be discussed in the upcoming section. Therefore, please click on the below link and read the next few lines.
blog comments powered by Disqus |
|
|
|
|
|
|
|
