Home arrow JavaScript arrow Page 2 - Opened and Closed Branches on a TreeView jQuery Hierarchical Navigation System

Building basic hierarchical trees with the TreeView plug-in - JavaScript

If you’re interested in mastering the main features that come bundled with the TreeView jQuery plug-in, start reading this series of articles. In it you’ll find numerous examples that will teach you how to utilize this library to build all sorts of professional-looking navigation trees. This is the second part of a four-part series.

TABLE OF CONTENTS:
  1. Opened and Closed Branches on a TreeView jQuery Hierarchical Navigation System
  2. Building basic hierarchical trees with the TreeView plug-in
  3. Controlling the tree’s branches display with the closed CSS class
  4. Collapsing tree branches with the TreeView plug-in
By: Alejandro Gervasio
Rating: starstarstarstarstar / 3
April 27, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
 

It’s quite possible that you still haven’t the chance to go through the first installment of this series, where I created two examples that showed how to expand and collapse the branches of a simple navigational tree from inside the web page’s markup. With that idea in mind, I reintroduced these examples below, so you can see how they looked originally. Here they are:

 

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

 

<!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 (branches are initially closed)</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();

});

</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 class="closed">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 class="closed">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 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 (branches are initially open)</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();

});

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

 

As depicted above by the two code samples, the “TreeView” plug-in makes building hierarchical menus a no-brainer process that only requires the creation of a few nested HTML lists. It’s that simple, really. In addition, it’s fair to notice that in the first case, all of the tree’s branches are displayed initially collapsed because they have been assigned a “closed” CSS class, while in the second example, the branches are shown opened instead, since the class has been simply removed from the pertinent lists. So far, these examples are not at all complicated, right? 

In summary, at this point you should have a clear idea of how to build tree menus with this jQuery plug-in. But to explore its functionality even  further, I’d like to code for you another example that shows how to create a tree where some of its branches are displayed expanded and others collapsed. 

To see how this new example will be properly developed, you’ll have to click on the link 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: