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

Adding elements to an existing tree 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
 

As I stated right at the beginning of this article, the "TreeView" plug-in comes equipped with an option that allows you to easily add elements to an existing tree in a truly dynamic way. The option in question is called, not surprisingly, "add," and it's very simple to use. So let's get right to it with a functional code sample.  

Below I coded for you a brand new example that shows how to use this option to append a single sub link to a sample tree. 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 the 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></ul></li>").appendTo(tree);

tree.treeview({

add: subLink

});

});

});

</script>

</head>

<body>

<p><a href="#" id="link">Add Sub link</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>

 

As you may have noticed, in the above example there's a simple hyperlink that allows you to add a new element to the existing tree. In this case, each time someone clicks on the link, it invokes the aforementioned "add" option, and in consequence, a new sub link will be appended to the targeted tree. 

To help you understand more clearly how this process works, below I included a screen shot that shows how single sub links are added to the previous tree. Have a look at it:

 

 

See how easy it is to dynamically append elements to a tree via the "add" option? I guess you do. Though, in case you still have some doubts with reference to this procedure, in the final section of this tutorial I'm going to code a similar example that will show you how to add multiple sub links. 

To see how this last example will be created, click on the link that appears below and read the upcoming segment.



 
 
>>> 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: