Jump to content

DHTML Tree Menu

rarebit

By rarebit
in Javascript Help

 Share

Recommended Posts

rarebit Regular Member

rarebit

Posted
Posted

I've used a tree menu from here... http://www.mattkruse.com/javascript/mktree/, however now moved, all the buttons double up and i'm at a loss as to why?

Here's my version:

<html>
<head>
<title>10.0.0.99</title>

<style type="text/css">
@media screen, print { 

/* Turn off list bullets */

ul.mktree  li { list-style: none; } 

/* Control how "spaced out" the tree is */

ul.mktree, ul.mktree ul , ul.mktree li { margin-left:10px; padding:0px; }

/* Provide space for our own "bullet" inside the LI */

ul.mktree  li           .bullet { padding-left: 15px; }

/* Show "bullets" in the links, depending on the class of the LI that the link's in */

ul.mktree  li.liOpen    .bullet { cursor: pointer; background: url(minus.gif)  center left no-repeat; }

ul.mktree  li.liClosed  .bullet { cursor: pointer; background: url(plus.gif)   center left no-repeat; }

ul.mktree  li.liBullet  .bullet { cursor: default; background: url(bullet.gif) center left no-repeat; }

/* Sublists are visible or not based on class of parent LI */

ul.mktree  li.liOpen    ul { display: block; }

ul.mktree  li.liClosed  ul { display: none; }

/* Format menu items differently depending on what level of the tree they are in */

ul.mktree  li { font-size: 12pt; }

ul.mktree  li ul li { font-size: 10pt; }

ul.mktree  li ul li ul li { font-size: 8pt; }

ul.mktree  li ul li ul li ul li { font-size: 6pt; }

}
</style>


<script  type="text/javascript">//<!--
// Author: Matt Kruse <matt@mattkruse.com>	// WWW: http://www.mattkruse.com/

// Automatically attach a listener to the window onload, to convert the trees
addEvent(window,"load",convertTrees);

// Utility function to add an event listener
function addEvent(o,e,f){
if (o.addEventListener){ o.addEventListener(e,f,true); return true; }
else if (o.attachEvent){ return o.attachEvent("on"+e,f); }
else { return false; }
}

// utility function to set a global variable if it is not already set
function setDefault(name,val) {
if (typeof(window[name])=="undefined" || window[name]==null) {
	window[name]=val;
}
}

// Full expands a tree with a given ID
function expandTree(treeId) {
var ul = document.getElementById(treeId);
if (ul == null) { return false; }
expandCollapseList(ul,nodeOpenClass);
}

// Fully collapses a tree with a given ID
function collapseTree(treeId) {
var ul = document.getElementById(treeId);
if (ul == null) { return false; }
expandCollapseList(ul,nodeClosedClass);
}

// Expands enough nodes to expose an LI with a given ID
function expandToItem(treeId,itemId) {
var ul = document.getElementById(treeId);
if (ul == null) { return false; }
var ret = expandCollapseList(ul,nodeOpenClass,itemId);
if (ret) {
	var o = document.getElementById(itemId);
	if (o.scrollIntoView) {
		o.scrollIntoView(false);
	}
}
}

// Performs 3 functions:
// a) Expand all nodes
// b) Collapse all nodes
// c) Expand all nodes to reach a certain ID
function expandCollapseList(ul,cName,itemId) {
if (!ul.childNodes || ul.childNodes.length==0) { return false; }
// Iterate LIs
for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
	var item = ul.childNodes[itemi];
	if (itemId!=null && item.id==itemId) { return true; }
	if (item.nodeName == "LI") {
		// Iterate things in this LI
		var subLists = false;
		for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {
			var sitem = item.childNodes[sitemi];
			if (sitem.nodeName=="UL") {
				subLists = true;
				var ret = expandCollapseList(sitem,cName,itemId);
				if (itemId!=null && ret) {
					item.className=cName;
					return true;
				}
			}
		}
		if (subLists && itemId==null) {
			item.className = cName;
		}
	}
}
}

// Search the document for UL elements with the correct CLASS name, then process them
function convertTrees() {
setDefault("treeClass","mktree");
setDefault("nodeClosedClass","liClosed");
setDefault("nodeOpenClass","liOpen");
setDefault("nodeBulletClass","liBullet");
setDefault("nodeLinkClass","bullet");
setDefault("preProcessTrees",true);
if (preProcessTrees) {
	if (!document.createElement) { return; } // Without createElement, we can't do anything
	uls = document.getElementsByTagName("ul");
	for (var uli=0;uli<uls.length;uli++) {
		var ul=uls[uli];
		if (ul.nodeName=="UL" && ul.className==treeClass) {
			processList(ul);
		}
	}
}
}

// Process a UL tag and all its children, to convert to a tree
function processList(ul) {
if (!ul.childNodes || ul.childNodes.length==0) { return; }
// Iterate LIs
for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
	var item = ul.childNodes[itemi];
	if (item.nodeName == "LI") {
		// Iterate things in this LI
		var subLists = false;
		for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {
			var sitem = item.childNodes[sitemi];
			if (sitem.nodeName=="UL") {
				subLists = true;
				processList(sitem);
			}
		}
		var s= document.createElement("SPAN");
		var t= '\u00A0'; //  
		s.className = nodeLinkClass;
		if (subLists) {
			// This LI has UL's in it, so it's a +/- node
			if (item.className==null || item.className=="") {
				item.className = nodeClosedClass;
			}
			// If it's just text, make the text work as the link also
			if (item.firstChild.nodeName=="#text") {
				t = t+item.firstChild.nodeValue;
				item.removeChild(item.firstChild);
			}
			s.onclick = function () {
				this.parentNode.className = (this.parentNode.className==nodeOpenClass) ? nodeClosedClass : nodeOpenClass;
				return false;
			}
		}
		else {
			// No sublists, so it's just a bullet node
			item.className = nodeBulletClass;
			s.onclick = function () { return false; }
		}
		s.appendChild(document.createTextNode(t));
		item.insertBefore(s,item.firstChild);
	}
}
}
//-->
</script>
</head>

<body>

<h2>JS TESTS</h2>
<br>
<a href="../">back</a><br>
<br><br>

<a href="#" onclick="expandTree('tree1'); return false;">Expand All</a>   
<a href="#" onclick="collapseTree('tree1'); return false;">Collapse All</a>   
<a href="#" onclick="expandToItem('tree1','login'); return false;">Expand and find login.html</a>

<ul class="mktree" id="tree1">

<li class="liClosed"><span class="bullet"> cache/</span>
<ul>
		<li class="liBullet"><span class="bullet"> </span> <a href='../index.html'>back</a> </li>
</ul>
</li>

<li class="liOpen"><span class="bullet"> calendars/</span>
<ul>
		<li class="liClosed"><span class="bullet"> _template/</span>
	<ul>
				<li class="liBullet"><span class="bullet"> </span>config.txt</li>
				<li class="liBullet"><span class="bullet"> </span>config.txt.lock</li>
				<li class="liBullet"><span class="bullet"> </span>events.id</li>
				<li class="liBullet"><span class="bullet"> </span>events.lock</li>
				<li class="liBullet"><span class="bullet"> </span>events.properties</li>
				<li class="liBullet"><span class="bullet"> </span>events.txt</li>
				<li class="liBullet"><span class="bullet"> </span>schedule.id</li>
				<li class="liBullet"><span class="bullet"> </span>schedule.lock</li>
				<li class="liBullet"><span class="bullet"> </span>schedule.properties</li>
				<li class="liBullet"><span class="bullet"> </span>schedule.txt</li>
	</ul>
		</li>
		<li class="liOpen"><span class="bullet"> default/</span>
	<ul>
				<li class="liBullet"><span class="bullet"> </span>config.txt</li>
				<li class="liBullet"><span class="bullet"> </span>config.txt.lock</li>
				<li class="liBullet"><span class="bullet"> </span>events.id</li>
				<li class="liBullet"><span class="bullet"> </span>events.lock</li>
				<li class="liBullet"><span class="bullet"> </span>events.properties</li>
				<li class="liBullet"><span class="bullet"> </span>events.txt</li>
				<li class="liBullet"><span class="bullet"> </span>schedule.id</li>
				<li class="liBullet"><span class="bullet"> </span>schedule.lock</li>
				<li class="liBullet"><span class="bullet"> </span>schedule.properties</li>
				<li class="liBullet"><span class="bullet"> </span>schedule.txt</li>
	</ul>
		</li>
</ul>
</li>
</ul>
</body>
</html>

 

It's an all in one html page with js, so just copy and paste to try it... (***P.S. Check license! e.g. Matt Kruse matt@mattkruse.com, http://www.mattkruse.com/) (that's not me!)

Link to comment
Share on other sites
rarebit Regular Member

rarebit

Posted
  • Author
Posted

Well I just had a breakdown and this is what happened!

<html>
<head>
<title>www.rawstar7.co.uk</title>

<style type="text/css">
@media screen, print { 
/* Turn off list bullets */
ul.mktree  li { list-style: none; } 
/* Control how "spaced out" the tree is */
ul.mktree, ul.mktree ul , ul.mktree li { margin-left:10px; padding:0px; }
/* Provide space for our own "bullet" inside the LI */
ul.mktree  li           .bullet { padding-left: 15px; }
/* Show "bullets" in the links, depending on the class of the LI that the link's in */
ul.mktree  li.liOpen    .bullet { cursor: pointer; background: url(minus.gif)  center left no-repeat; }
ul.mktree  li.liClosed  .bullet { cursor: pointer; background: url(plus.gif)   center left no-repeat; }
ul.mktree  li.liBullet  .bullet { cursor: default; background: url(bullet.gif) center left no-repeat; }
/* Sublists are visible or not based on class of parent LI */
ul.mktree  li.liOpen    ul { display: block; }
ul.mktree  li.liClosed  ul { display: none; }
/* Format menu items differently depending on what level of the tree they are in */
ul.mktree  li { font-size: 12pt; }
}
</style>

<script  type="text/javascript">//<!--
function changeit2(node)
{
if(node.parentNode.className == 'liOpen')
{
	node.parentNode.className = 'liClosed';
}
else
{
	node.parentNode.className = 'liOpen';
}
}
//-->
</script>
</head>

<body>

<h2>JS TESTS</h2>
<br>
<a href="../">back</a><br>
<br><br>

<br><br>

<h2>TESTS</h2>
<ul class="mktree" id='tree1'>
<li class="liBullet">CAT
<li class="liOpen"><span class="bullet" onclick="changeit2(this);"> WOOF</span>
<ul>
<li class="liBullet">CAT
<li class="liBullet">DOG
</ul>
<li class="liClosed"><span class="bullet" onclick="changeit2(this);"> ALIEN</span>
<ul>
<li class="liBullet">CAT
<li class="liBullet">DOG
</ul>
<li class="liClosed"><span class="bullet" onclick="changeit2(this);"> RAT</span>
<ul>
<li class="liBullet">CAT
<li class="liBullet">DOG
<li class="liClosed"><span class="bullet" onclick="changeit2(this);"> <a href='../index.html'>MEOW</a></span>
	<ul>
	<li class="liBullet"><span class="bullet"> CAT</span>
	<li class="liBullet"><span class="bullet" onclick="changeit2(this);"> DOG</span>
	</ul>
</ul>
</ul>

<br><br>
<br><br>

</body>
</html>

A lot simpler I think, not really tested it though...

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.