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

Restricting the opening of a tree's branches with the unique option - 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 I stated in the previous section, the "TreeView" plug-on provides a parameter called "unique," which can be useful in a number of ways -- for instance, where you wish that users of your web site browse individually categories of a hierarchical menu. But now that you have a vague idea of how this option works, it's time to see how it can be utilized within the context of a concrete example. Take a look at the following one, to grasp more clearly the use of the "unique" argument:

 

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

unique: true

});

});

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

 

From the previous code sample, it's clear to see how simple it is to restrict the behavior of a targeted tree to permit only one branch to be expanded at a time. Naturally, the best way to understand how the "unique" argument does its business is for you to try out this example on your own browser, so I encourage you to do that as soon as you can. You'll be surprised to see how smoothly it functions. 

Since at this stage you hopefully grasped the logic that stands behind using the "unique" option, it's time to continue exploring other capabilities offered by the "TreeView" plug-in. Therefore, in the last section of this tutorial I'm going to discuss the use of the "toggle" parameter, which can be used for triggering callback functions when branches of a tree are expanded and collapsed. 

This topic will be discussed in detail in the following segment. Thus, to learn more about it, click on the link below and read the next few lines.  



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