<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Tree structure </TITLE>
<script type="text/javascript">
var persisteduls = new Object()
var ddtreemenu = new Object()
ddtreemenu.closefolder = "closed.gif" // set image path to "closed" folder image
ddtreemenu.openfolder = "open.gif" // set image path to "open" folder image
////////// No need to edit beyond here///////////////////////////
ddtreemenu.createTree = function(treeid, enablepersist, persistdays)
{
var ultags = document.getElementById(treeid).getElementsByTagName("ul")
if (typeof persisteduls[treeid] == "undefined")
persisteduls[treeid] = (enablepersist == true && ddtreemenu.getCookie(treeid) != "") ? ddtreemenu.getCookie(treeid).split(",") : ""
for (var i = 0; i < ultags.length; i ++ )
ddtreemenu.buildSubTree(treeid, ultags[i], i)
if (enablepersist == true)
{
// if enable persist feature
var durationdays = (typeof persistdays == "undefined") ? 1 : parseInt(persistdays)
ddtreemenu.dotask(window, function()
{
ddtreemenu.rememberstate(treeid, durationdays)
}
, "unload") // save opened UL indexes on body unload
}
}
ddtreemenu.buildSubTree = function(treeid, ulelement, index)
{
ulelement.parentNode.className = "submenu"
if (typeof persisteduls[treeid] == "object")
{
// if cookie exists (persisteduls[treeid] is an array versus "" string)
if (ddtreemenu.searcharray(persisteduls[treeid], index))
{
ulelement.setAttribute("rel", "open")
ulelement.style.display = "block"
ulelement.parentNode.style.backgroundImage = "url(" + ddtreemenu.openfolder + ")"
}
else
ulelement.setAttribute("rel", "closed")
}
// end cookie persist code
else if (ulelement.getAttribute("rel") == null || ulelement.getAttribute("rel") == false) // if no cookie and UL has NO rel attribute explicted added by user
ulelement.setAttribute("rel", "closed")
else if (ulelement.getAttribute("rel") == "open") // else if no cookie and this UL has an explicit rel value of "open"
ddtreemenu.expandSubTree(treeid, ulelement) // expand this UL plus all parent ULs (so the most inner UL is revealed ! )
ulelement.parentNode.onclick = function(e)
{
var submenu = this.getElementsByTagName("ul")[0]
if (submenu.getAttribute("rel") == "closed")
{
submenu.style.display = "block"
submenu.setAttribute("rel", "open")
ulelement.parentNode.style.backgroundImage = "url(" + ddtreemenu.openfolder + ")"
}
else if (submenu.getAttribute("rel") == "open")
{
submenu.style.display = "none"
submenu.setAttribute("rel", "closed")
ulelement.parentNode.style.backgroundImage = "url(" + ddtreemenu.closefolder + ")"
}
ddtreemenu.preventpropagate(e)
}
ulelement.onclick = function(e)
{
ddtreemenu.preventpropagate(e)
}
}
ddtreemenu.expandSubTree = function(treeid, ulelement)
{
// expand a UL element and any of its parent ULs
var rootnode = document.getElementById(treeid)
var currentnode = ulelement
currentnode.style.display = "block"
currentnode.parentNode.style.backgroundImage = "url(" + ddtreemenu.openfolder + ")"
while (currentnode != rootnode)
{
if (currentnode.tagName == "UL")
{
// if parent node is a UL, expand it too
currentnode.style.display = "block"
currentnode.setAttribute("rel", "open") // indicate it's open
currentnode.parentNode.style.backgroundImage = "url(" + ddtreemenu.openfolder + ")"
}
currentnode = currentnode.parentNode
}
}
ddtreemenu.flatten = function(treeid, action)
{
// expand or contract all UL elements
var ultags = document.getElementById(treeid).getElementsByTagName("ul")
for (var i = 0; i < ultags.length; i ++ )
{
ultags[i].style.display = (action == "expand") ? "block" : "none"
var relvalue = (action == "expand") ? "open" : "closed"
ultags[i].setAttribute("rel", relvalue)
ultags[i].parentNode.style.backgroundImage = (action == "expand") ? "url(" + ddtreemenu.openfolder + ")" : "url(" + ddtreemenu.closefolder + ")"
}
}
ddtreemenu.rememberstate = function(treeid, durationdays)
{
// store index of opened ULs relative to other ULs in Tree into cookie
var ultags = document.getElementById(treeid).getElementsByTagName("ul")
var openuls = new Array()
for (var i = 0; i < ultags.length; i ++ )
{
if (ultags[i].getAttribute("rel") == "open")
openuls[openuls.length] = i // save the index of the opened UL (relative to the entire list of ULs) as an array element
}
if (openuls.length == 0) // if there are no opened ULs to save / persist
openuls[0] = "none open" // set array value to string to simply indicate all ULs should persist with state being closed
ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) // populate cookie with value treeid = 1, 2, 3 etc (where 1, 2... are the indexes of the opened ULs)
}
//// A few utility functions below//////////////////////
ddtreemenu.getCookie = function(Name)
{
// get cookie value
var re = new RegExp(Name + "=[^;]+", "i");
// construct RE to search for target name / value pair
if (document.cookie.match(re)) // if cookie found
return document.cookie.match(re)[0].split("=")[1] // return its value
return ""
}
ddtreemenu.setCookie = function(name, value, days)
{
// set cookei value
var expireDate = new Date()
// set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring = expireDate.setDate(expireDate.getDate() + parseInt(days))
document.cookie = name + "=" + value + "; expires=" + expireDate.toGMTString() + "; path=/";
}
ddtreemenu.searcharray = function(thearray, value)
{
// searches an array for the entered value. If found, delete value from array
var isfound = false
for (var i = 0; i < thearray.length; i ++ )
{
if (thearray[i] == value)
{
isfound = true
thearray.shift() // delete this element from array for efficiency sake
break
}
}
return isfound
}
ddtreemenu.preventpropagate = function(e)
{
// prevent action from bubbling upwards
if (typeof e != "undefined")
e.stopPropagation()
else
event.cancelBubble = true
}
ddtreemenu.dotask = function(target, functionref, tasktype)
{
// assign a function to execute to an event handler (ie : onunload)
var tasktype = (window.addEventListener) ? tasktype : "on" + tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}
</script>
<!--link rel="stylesheet" type="text/css" href="simpletree.css" /-->
<style type="text/css">
.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}
.treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: white url(list.gif) no-repeat left center;
list-style-type: none;
padding-left: 22px;
margin-bottom: 3px;
}
.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
background: white url(closed.gif) no-repeat left 1px;
cursor: hand !important;
cursor: pointer !important;
}
.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}
.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;
}
</style>
</HEAD>
<BODY>
<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">Expand All</a>
|
<a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">Contact All</a>
<ul id="treemenu1" class="treeview">
<li>Item 1</li>
<li>Item 2</li>
<li>Folder 1
<ul>
<li>Sub Item 1.1
<ul>
<li>false
<ul>
<li>aaa</li>
</ul>
</li>
</ul>
</li>
<li>Sub Item 1.2</li>
</ul></li>
<li>Item 3</li>
<li>Folder 2
<ul>
<li>Sub Item 2.1</li>
<li>Folder 2.1
<ul>
<li>Sub Item 2.1.1</li>
<li>Sub Item 2.1.2</li>
</ul>
</li>
</ul>
</li>
<li>Item 4</li>
</ul>
<script type="text/javascript">
// ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))
//ddtreemenu.createTree("treemenu1", true)
</script>
</BODY>
</HTML>
Java Script
Superb