 JavaScript Page 4 - Adding Elements to a Tree with TreeView jQuery |
| JavaScript Page 4 - Adding Elements to a Tree with TreeView jQuery |
Appending multiple sub links with the add 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 |
If you found it easy to use the "add" option to append a single sub link to a targeted tree, then when I show you how to perform the same task with multiple links, you'll grasp this process in a snap. But as usual, it's best to back up the corresponding theory with a functional code sample. Therefore, take a look at the one below, which is very simple to follow:
<!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 add 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(){ var tree = $("#menu").treeview(); $("#link").click(function(){ var subLink = $("<li>New Sub link<ul><li>Sub link 1</li><li>Sub link 2</li><li>Sub link 3</li></ul></li>").appendTo(tree); tree.treeview({ add: subLink }); }); }); </script> </head> <body> <p><a href="#" id="link">Add multiple sub links</a></p> <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>
Here you have it. Now, each time the link located on top of the previous web page is clicked, it'll append multiple sub links to the pertinent tree, thanks to the action of the "add" option. Also, it'd be quite useful to complement this explanation with an image that shows the result produced by the above example. Here it is:
Of course, the example shown previously is only that, so if you want to get the most out of the "add" option, I suggest you try appending different HTML elements, rather than a few nested lists. And as a bottom line for this article, feel free to edit and introduce your own enhancements to all of the code samples included in it; in this way you can arm yourself with a more solid background in working with the "TreeView" plug-in. The experience will be instructive, that's already guaranteed. Final thoughts Sad but true, this is the end of this series. I hope you have enjoyed reading it as much as I did writing it. As you learned in the different articles, the "TreeView" jQuery plug-in is a JavaScript library that combines high-end features with a truly flat learning curve, which contributes to speeding up the development of dynamic web-based hierarchical structures. See you in the next web development tutorial!
blog comments powered by Disqus |
|
|
|
|
|
|
|
/ 11 
