Using Unique and Toggle in a TreeView jQuery Hierarchical Navigation System

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.

Naturally, if you’ve been a patient reader and already went through the previous chapter of the series, then it’s quite possible that you’re pretty familiar with the basic capabilities offered by the “TreeView” library. In that particular tutorial I explained how to work with its “animate” option, which can be used  for applying a couple of appealing scrolling effects to the branches of a selected tree while they’re being closed and extended.

Of course, when it comes to exploring the numerous capacities offered by the “TreeView” plug-in, I must say that there’s still a fair bit to learn. It comes packaged with another handy feature that deserve a closer analysis. In this article I’m going to discuss the use of the “unique” and “toggle” arguments, which can be used for customizing the default behavior of a given hierarchical tree even more. 

In the first case, the “unique” argument will allow only one branch of the tree to be opened at a time, while the second option will trigger callback functions when the branches are closed and expanded alternately. Of course, this is pure theory that needs to be backed up with some functional code samples, so let’s see how to work with these arguments in the context of a few concrete and hopefully educational examples. Let’s get going! 

{mospagebreak title=A quick review of the animate argument}

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.

{mospagebreak title=Restricting the opening of a tree’s branches with the unique option}

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.  

{mospagebreak title=Using the toggle parameter to trigger callback functions}

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! 

[gp-comments width="770" linklove="off" ]

antalya escort bayan antalya escort bayan Antalya escort diyarbakir escort