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

A quick review of the animate argument - 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

Prior to explaining how to use the "unique" and "toggle" options provided by the "TreeView" plug-in, I'm going to quickly review the examples developed in the preceding part of the series. They demonstrated how to work with the "animate" argument in its "fast" and "slow" flavors to apply a scrolling effect to branches of a simple hierarchical tree. 

That being said, here's how the examples looked originally: 

(example on using the 'animate: "fast"' option)

 

<!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 animated: fast 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({

animated: "fast"

});

});

</script>

</head>

<body>

<ul id="menu">

<li class="closed">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 class="closed">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 class="closed">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>

 

 

(example on using the 'animate: "slow"' option)

 

<!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 slow animated 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({

animated: "slow"

});

});

</script>

</head>

<body>

<ul id="menu">

<li class="closed">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 class="closed">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 class="closed">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>

 

Unquestionably, understanding how the "animate" option does its thing is a very straightforward process. When specified with a value of "fast" or "slow," it will make the branches of the targeted tree scroll quickly or smoothly, while being expanded and collapsed. It's that simple, actually. 

So far, so good. Now that you have hopefully recalled how to work with the "animate" argument given by the "TreeView" plug-in, it's time to explore a few additional features that come bundled with it. In the section to come I'm going to discuss the usage of the "unique" parameter. It can be used for restricting the behavior of a targeted tree, since it'll permit only one branch to be expanded at a time. 

This can be very useful; if you wish to learn how to work with it, you'll have to click on the link that appears below and read the following section.



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