Home arrow JavaScript arrow Page 4 - Adding Elements to a Tree with TreeView jQuery

Appending multiple sub links with the add option - JavaScript

When 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.

TABLE OF CONTENTS:
  1. Adding Elements to a Tree with TreeView jQuery
  2. Review: persisting hierarchical menus with TreeView's persist option
  3. Adding elements to an existing tree with the add option
  4. Appending multiple sub links with the add option
By: Alejandro Gervasio
Rating: starstarstarstarstar / 11
May 13, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
 

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!



 
 
>>> More JavaScript Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: