Jump to content

DHTML Tree Menu

rarebit

By rarebit
in Javascript Help

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 <[email protected]>	// 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 [email protected], http://www.mattkruse.com/) (that's not me!)

Link to comment
https://forums.phpfreaks.com/topic/70342-dhtml-tree-menu/
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
https://forums.phpfreaks.com/topic/70342-dhtml-tree-menu/#findComment-353472
Share on other sites

Archived

This topic is now archived and is closed to further replies.

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.