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

Saving the status of a tree with cookies with the persist: cookie argument - 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
 

In the previous segment, you learned how to save the state of a tree via the "persist: location" option, something that should be quite easy to grasp. However, as I explained earlier, the "TreeView" plug-in allows us to perform a similar task by assigning a "cookie" value to this option, meaning that the status of the tree will be maintained simply by setting some cookies. 

The following example shows how to use this argument in a concrete case. Check it out, please:

 

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

});

});

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

 

See how simple it is to save the settings of a targeted tree via the "persist: cookie" option? I bet you do. As I explained before, when this option is specified, both the opened and collapsed branches of the tree will maintain their state directly with cookies, so if you're planning to use this argument when building your own hierarchical menus for your web site, be aware that the browsers of your visitors should be set to accept cookies. 

And with this last hands-on example, I'm finishing this fifth tutorial of the series. As with all of the preceding articles, feel free to edit all of the code samples that you learned before, so you can sharpen your skills when working with the "TreeView" jQuery plug-in.

Final thoughts 

In this fifth installment of the series, I provided you with a quick overview on using the "persist" option included with the "TreeView" jQuery plug-in for saving the state of a targeted tree across different HTTP requests. 

However, we're not done yet with this series of articles. In the final part I'm going to explain how to  dynamically add elements to the branches of a tree with JavaScript. Thus, now that you know what to expect from the last tutorial, I hope you don't miss it!



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