 JavaScript Page 4 - Using the Persist Argument in a TreeView jQuery Navigation System |
| JavaScript Page 4 - Using the Persist Argument in a TreeView jQuery Navigation System |
Saving the status of a tree with cookies with the persist: cookie argument - JavaScriptWelcome to the fifth episode of a series covering how to build a hierarchical navigation system with the TreeView jQuery plug-in. Comprised of six parts, this series walks you through mastering the main features provided by this plug-in.
print this article SEARCH DEV SHED |
In the previous segment, you learned how to save the state of a tree via the "persist: location" option, something that should be quite easy to grasp. However, as I explained earlier, the "TreeView" plug-in allows us to perform a similar task by assigning a "cookie" value to this option, meaning that the status of the tree will be maintained simply by setting some cookies. The following example shows how to use this argument in a concrete case. Check it out, please:
<!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 persist: cookie 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({ persist: "cookie" }); }); </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>
See how simple it is to save the settings of a targeted tree via the "persist: cookie" option? I bet you do. As I explained before, when this option is specified, both the opened and collapsed branches of the tree will maintain their state directly with cookies, so if you're planning to use this argument when building your own hierarchical menus for your web site, be aware that the browsers of your visitors should be set to accept cookies. And with this last hands-on example, I'm finishing this fifth tutorial of the series. As with all of the preceding articles, feel free to edit all of the code samples that you learned before, so you can sharpen your skills when working with the "TreeView" jQuery plug-in. Final thoughts In this fifth installment of the series, I provided you with a quick overview on using the "persist" option included with the "TreeView" jQuery plug-in for saving the state of a targeted tree across different HTTP requests. However, we're not done yet with this series of articles. In the final part I'm going to explain how to dynamically add elements to the branches of a tree with JavaScript. Thus, now that you know what to expect from the last tutorial, I hope you don't miss it!
blog comments powered by Disqus |
|
|
|
|
|
|
|
