 JavaScript Page 4 - Using the Animate Option in a Treeview jQuery Hierarchical Navigation System |
| JavaScript Page 4 - Using the Animate Option in a Treeview jQuery Hierarchical Navigation System |
Creating a slow animation effect - 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 |
An adequate epilogue for this article would consist of demonstrating how to apply a slow scrolling effect to the hierarchical three built in the previous section. That's exactly what I'm going to do in the next few lines -- that is, use the "animation" option, but this time assign a "slow" value to it. The code sample that represents this case is listed below. Please, 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 slow 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: "slow" }); }); </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>
Although the above example looks very similar to the one developed in the previous segment, it contains a subtle difference. As I explained a few moments before, now the "animation" argument has been assigned a "slow" value, implying that each time a branch of the tree is expanded or collapsed, it'll do this by scrolling down very slowly. Again, I encourage you to test this example on your own web server, so you can understand more easily how this argument affects the behavior of the tree in question. And with this last example, I'm finishing this tutorial on using the "animation" option provided by the "TreeView" jQuery plug-in. As usual, feel free to tweak all of the code samples included in this article to give you more practice working with this powerful JavaScript library. Final thoughts Over this third chapter of the series, I discussed the use of the "animation" option provided by the "TreeView" plug-in. As you saw, it can be used for creating some visually-appealing effects on the branches of a hierarchical tree when they're being either collapsed or expanded. However, there are many other features of the plug-in that deserve a close analysis as well. Therefore, in the forthcoming part I'm going to explain how to restrict the behavior of a tree to expand only one branch at a time, while the others remain closed. So, now that you've been warned about the topics that will be covered in the next article, you simply can't miss it!
blog comments powered by Disqus |
|
|
|
|
|
|
|
