Home arrow JavaScript arrow Page 4 - Using Unique and Toggle in a TreeView jQuery Hierarchical Navigation System

Using the toggle parameter to trigger callback functions - JavaScript

The TreeView jQuery plug-in is a small yet powerful JavaScript application that allows you to build hierarchical navigation systems whose branches can be collapsed and expanded using different animation effects. So if youíre planning to develop a web site that includes a navigation mechanism like this, start reading this series of articles. In it youíll find a concise guide that will show you how to master the plug-inís main features, by means of copious hands-on examples. This article is the fourth of six parts.

TABLE OF CONTENTS:
  1. Using Unique and Toggle in a TreeView jQuery Hierarchical Navigation System
  2. A quick review of the animate argument
  3. Restricting the opening of a tree's branches with the unique option
  4. Using the toggle parameter to trigger callback functions
By: Alejandro Gervasio
Rating: starstarstarstarstar / 5
May 11, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

As its name clearly suggests, the "toggle" argument permits you to invoke a specified callback function when toggling branches of a given tree. As you may have realized, this can be extremely useful for adding some extra functionality to the tree in question by utilizing plain JavaScript, specific jQuery expressions, and so forth. 

The code sample below demonstrates a basic usage of the "toggle" option, so I recommend that you pay close attention to it:

 

<!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 toggle 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({

toggle: function(){

alert('This list has been clicked on!');

}

});

});

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

 

In this particular case, I decided to keep things rather simple. In the previous code sample the "toggle" options have been used to trigger a trivial JavaScript alert each time a branch of the tree is opened or collapsed. In practical terms, this example isn't very useful, but it shows how to use this argument to trigger callback functions when expanding and closing branches. 

And that's all for the moment. As always, feel free to edit the examples included in this article, so you can improve your skills in using the "TreeView" jQuery plug-in. Happy scripting!

Final thoughts 

In this fourth chapter of the series, I explored some other handy features provided by the "TreeView" jQuery plug-in, namely the "unique" and "toggle" options. Indeed, understanding how to work with these arguments to customize the default behavior of a hierarchical tree is a fairly straightforward process that can be tackled with minor effort. 

In the article to come, things will become even more interesting, since I'm going to explain how to maintain the status of a tree across different HTTP requests via the "persist" option. Thus, now that you know what to expect from the next part of the series, you can miss it! 



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