Home arrow JavaScript arrow Page 3 - Using the Persist Argument in a TreeView jQuery Navigation System

Creating persistent hierarchical menus with the persist parameter - JavaScript

Welcome to the fifth episode of a series covering how to build a hierarchical navigation system with the TreeView jQuery plug-in. Comprised of six parts, this series walks you through mastering the main features provided by this plug-in.

TABLE OF CONTENTS:
  1. Using the Persist Argument in a TreeView jQuery Navigation System
  2. Reviewing the unique and toggle options
  3. Creating persistent hierarchical menus with the persist parameter
  4. Saving the status of a tree with cookies with the persist: cookie argument
By: Alejandro Gervasio
Rating: starstarstarstarstar / 2
May 12, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
 

Fortunately, the "ViewTree" plug-in provides a handy option that allows us to recall the settings of a targeted tree across several HTTP requests. What this means, basically, is that if the branches of the tree have been expanded and collapsed on one particular web page, this configuration will be maintained when visiting another one. 

Also, it's valid to mention that this persistent mechanism can be implemented via another argument called "persist," which comes in two different flavors: "location" and "cookie." When the first argument is used, the state of the tree will be maintained in accordance with the web page location, while the second option simply will save the settings of the tree on a cookie. 

That being said, let me show you an example that demonstrates the use of the "persists" option when invoked with the "location" value. 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 the persist: location 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({

persist: "location"

});

});

</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 illustrated above, the previous code sample shows how to save the status of a tree across a number of HTTP requests via the "persist: location" option. In this particular case, if a few hyperlinks were included into some of the nested HTML lists that compose the tree, then their "href" attribute would be used to maintain the tree's configuration. 

Of course, a better way to understand how the "persist" option works is by trying out the prior example on your own browser, and adding to the HTML lists some links that point to real files. You'll be surprised at how sweetly this persistent mechanism functions, believe me. 

Now that you've grasped how to save the state of a hierarchical tree by using the "persist" argument with the "location" value, the last thing that I'm going to show you in this tutorial will consist of utilizing the same option, but this time with the "cookie" value assigned to it. 

Want to learn how this will be accomplished in a few simple steps? Then click on the link below and read the last section. We're almost finished!

 



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