Using the Animate Option in a Treeview jQuery Hierarchical Navigation System

Welcome to the third chapter of a series on creating a hierarchical navigation system with the TreeView jQuery plug-in. Made up of six tutorials, this series explores in detail the main features that come packaged with this helpful JavaScript extension. It shows you how to get the most out of it with copious code samples.

If you’re planning to develop a web site or an application that provides users with the ability to move across different sections of it with a hierarchical navigation system, then you might want to take a look at the TreeView jQuery plug-in. This JavaScript library will let you build a system like this in a truly unobtrusive fashion, utilizing only a few nested HTML lists.

Naturally, if you already had the opportunity to read the two preceding articles of the series, then you’ve become familiar with using the plug-in for building some simple hierarchical trees whose branches can be completely customized. In the course of those tutorials I explained how to use the "closed" CSS class along with the "collapsed" option provided by "TreeView" to specify which branches of a sample tree should be displayed expanded, and which ones should be shown closed. This characteristic is useful for controlling the default behavior of a tree’s branches, but it’s not the only capability offered by the plug-in. 

In reality, "TreeView" comes bundled with another option called "animate" that allows you to apply appealing animation effects to the branches when they are opened and closed. Obviously, this feature will make a selected hierarchical tree look much more professional and attractive, so in the next few lines I’m going to discuss how to use it in the context of some illustrative examples. 

Are you ready to learn how to create neat animation effects in hierarchical navigation systems? Then start reading now! 

{mospagebreak title=A review of the collapsed option}

Before I proceed to demonstrate how to animate the branches of a tree created with the "TreeView" plug-in, I’d like to review how the branches can be completely expanded and closed with the "collapsed" option. With this idea in mind, below I included two basic examples. The first one will build a tree with all the branches collapsed, and the second will perform a similar task with the branches shown initially open. Have a look at them:

 

(example on building a tree view with all the branches initially collapsed)

 

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

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

 

 

(example on building a tree view with all the branches initially opened)

 

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

collapsed: false

});

});

</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 examples shown above, it’s clear to see how easy it is to control the initial behavior for all of the branches that belong to a given tree. As I explained previously, the first example assigns a TRUE value to the "collapsed" option, which makes all of the branches display as closed, while in the second case, the opposite occurs, since the branches are shown initially expanded.

Now that you hopefully recalled how to use the handy "collapsed" argument, it’s time to continue exploring the capabilities offered by the "TreeView" plug-in. As I expressed in the beginning, there’s another useful option called "animate" that permits you to create a fast (or even slow) animation effect when the tree’s branches are expanded and collapsed. 

So, in the section to come I’m going to discuss the use of this option in more detail by creating some easy-to-grasp examples. Now, click on the link that appears below and read the following segment. 

{mospagebreak title=Animating hierarchical tree branches with the animate option}

As I mentioned in the section that you just read, the "TreeView" plug-in includes an interesting option called "animate" that allows you to apply an animation effect to all of the branches of a given tree, when they’re either expanded or collapsed. Actually, understanding how this option works is a simple process, but to clarify any possible doubts that you might have, below I coded a brand new example that demonstrates its usage. Here it is:

 

<!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 fast 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: "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>

 

That’s not rocket science, right? As you can see above, now the hierarchical tree has been assigned the parameter "animated: fast," meaning that each time a specific branch is closed or opened in turn, it’ll be done by means of a quick scrolling effect. Of course, the best way to understand how the animation argument functions is by trying out the previous example on your own web server, so go ahead and do it. You’ll be amazed at how sweetly it works, trust me. 

Now that you’ve hopefully learned how to apply a fast animation effect to a sample hierarchical tree, it’s time to see how a slow effect can be used instead. The full details for how this task will be performed will be discussed in the upcoming section. Therefore, please click on the below link and read the next few lines. 

{mospagebreak title=Creating a slow animation effect}

An adequate epilogue for this article would consist of demonstrating how to apply a slow scrolling effect to the hierarchical three built in the previous section. That’s exactly what I’m going to do in the next few lines — that is, use the "animation" option, but this time assign a "slow" value to it. The code sample that represents this case is listed below. Please, 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 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>

 

Although the above example looks very similar to the one developed in the previous segment, it contains a subtle difference. As I explained a few moments before, now the "animation" argument has been assigned a "slow" value, implying that each time a branch of the tree is expanded or collapsed, it’ll do this by scrolling down very slowly. Again, I encourage you to test this example on your own web server, so you can understand more easily how this argument affects the behavior of the tree in question. 

And with this last example, I’m finishing this tutorial on using the "animation" option provided by the "TreeView" jQuery plug-in. As usual, feel free to tweak all of the code samples included in this article to give you more practice working with this powerful JavaScript library. 

Final thoughts 

Over this third chapter of the series, I discussed the use of the "animation" option provided by the "TreeView" plug-in. As you saw, it can be used for creating some visually-appealing effects on the branches of a hierarchical tree when they’re being either collapsed or expanded. 

However, there are many other features of the plug-in that deserve a close analysis as well. Therefore, in the forthcoming part I’m going to explain how to restrict the behavior of a tree to expand only one branch at a time, while the others remain closed. So, now that you’ve been warned about the topics that will be covered in the next article, you simply can’t miss it!

Google+ Comments

Google+ Comments