 JavaScript Page 2 - Adding Elements to a Tree with TreeView jQuery |
| JavaScript Page 2 - Adding Elements to a Tree with TreeView jQuery |
Review: persisting hierarchical menus with TreeView's persist option - JavaScriptWhen it comes to building hierarchical menus that will be used as part of web-based navigational interfaces, one of the best solutions available today is a powerful jQuery plug-in called TreeView. This package comes with a number of handy options that allow you to create collapsible trees very quickly by using only a few simple nested HTML lists. This is the conclusion to a six-part series that uses numerous code samples to show you how to master the main features provided by the TreeView library.
print this article SEARCH DEV SHED |
Before I proceed to demonstrate how to dynamically add elements to a hierarchical tree, I'd like to reintroduce the two examples developed in the previous part of the series. These were aimed at illustrating how to use the "persist" option to save the state of a targeted tree. Having said that, here's how these code samples were created originally:
(example on using the 'persist: location' option)
<!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: location 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: "location" }); }); </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 using the 'persist: cookie' option)
<!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>
As shown above, it's fairly simple to maintain the state of a selected tree across several HTTP requests by using the "persist" option. In the first example, this argument has been assigned a "location" value, implying that the settings of the tree will be maintained according to the value of the "href" attribute corresponding to the tree's hyperlinks. The second case is a bit more intuitive; it will perform a similar saving process by using some cookies. At this point, you'll have surely recalled how to work with the previous "persist" argument, so the next thing that I'm going to cover will consist of explaining how to dynamically add elements to an existing tree via JavaScript. As you might have guessed, this process will be accomplished by means of another handy argument provided by the "TreeView" plug-in, and its implementation will be discussed in the section to come. So click on the link below and proceed to read the new few lines.
blog comments powered by Disqus |
|
|
|
|
|
|
|
/ 11 
