Tree Structuur

Status
Niet open voor verdere reacties.
S

stormblast

Gebruiker
Lid geworden
26 apr 2007
Berichten
37
Hallo iedereen,

Ik ben bezig geweest met een projectje waarin ik een soort tree structuur heb gemaakt. Dat is hetzelfde principe als "Mijn Computer" in windows. Je ziet aan de linkerkant alle mappen van je harde schijf. Dat heb ik ook nagemaakt, maar dan gewoon met plusjes en minnetjes. (voor een woord staat een plus. Als je daarop klikt, word het een min, en komt er een popup menu. Omgekeerd werkt het ook, maar dan verdwijnt het popup menu). De waarden in het menu worden bepaalt door multidimensionale array`s.

Ik heb er 1 gemaakt waarin ik maximaal 2 pop-up menu`s kan maken. Deze is gelukt. Echter dit script rommelde aan alle kanten. Ik besloot een nieuwe te maken, waarin alles automatisch gaat. Je kunt ook zoveel "popup menu- hoogten" krijgen als je wilt.

Daar ben ik al erg ver mee, echter nu kom ik echt vast te zitten, en kan ik niet verder komen. Ik zal het script laten zien:

HTML: 
<html>
<head><title>Sitemap</title></head>
<body>
<script>
var x, y
CellPadding = 15

menu = new Array()
currentPage = new Array()
HeightLevel = new Array()
FunctionControl = new Array()
ArrayLine = new Array()

currentPage[0] = 'Home'
menu[currentPage[0]] = new Array()
menu[currentPage[0]][0] = new Array('Info','info.html')
menu[currentPage[0]][1] = new Array('Overige info','overigeinfo.html')
menu[currentPage[0]][2] = new Array()
menu[currentPage[0]][2][0] = new Array('Contact')
menu[currentPage[0]][2][1] = new Array('Contactpagina','cp.html')
menu[currentPage[0]][2][2] = new Array('Contactpersonen','cps.html')

currentPage[1] = 'SportEve'
menu[currentPage[1]] = new Array()
menu[currentPage[1]][0] = new Array()
menu[currentPage[1]][0][0] = new Array('Home')
menu[currentPage[1]][0][1] = new Array('Info','info.html')
menu[currentPage[1]][0][2] = new Array('Overig','overig.html')
menu[currentPage[1]][1] = new Array('Overige info','overigeinfo.html')
menu[currentPage[1]][2] = new Array('Test','overigeinfo.html')

startContent = "<table cellspacing='0' cellpadding='0' style='cursor:pointer'>"
	for(x in currentPage)
	{
	startContent += "<tr><td id='" + 0 + currentPage[x] + "'>"
	startContent += "<span onClick='CreateSubMenu(\"" + currentPage[x] + "\",0,\"" + x + "\",\"" + currentPage[x] + "\")' style='padding-left:0px'>+ " + currentPage[x] + "</span>"
	startContent += "</td></tr>"
	}
startContent += "</table>"
document.write(startContent)


function CreateSubMenu(ContentName, ContentHeight, ContentNumber, TreeName)
{
	if(!FunctionControl[ContentHeight + TreeName])
	{
	FunctionControl[ContentHeight + TreeName] = false
		try
		{
		ArrayLine[TreeName][ContentHeight] = ContentNumber
		}
		catch(err)
		{
		ArrayLine[TreeName] = new Array()
		ArrayLine[TreeName][ContentHeight] = ContentNumber
		}
	}
	
	if(FunctionControl[ContentHeight + TreeName] == true)
	{
	FunctionControl[ContentHeight + TreeName] = false	
		if(ContentHeight == 0)
		{
		ContentPadding = (ContentHeight*CellPadding)
		Content = "<span id='" + ContentHeight + TreeName + "' style='padding-left:" + ContentPadding + "px'><span onClick='CreateSubMenu(\"" + ContentName + "\",\"" + ContentHeight + "\", \"" + ContentNumber + "\",\"" + ContentName + "\")'>+ " + TreeName + "</span></span>"	
		}
		else
		{
		ContentPadding = (ContentHeight*(CellPadding))-10
		Content = "<span id='" + ContentHeight + TreeName + "' style='padding-left:" + ContentPadding + "px'><span onClick='CreateSubMenu(\"" + ContentName + "\",\"" + ContentHeight + "\", \"" + ContentNumber + "\",\"" + ContentName + "\")'>+ " + TreeName + "</span></span>"	
		}
	document.getElementById(ContentHeight + TreeName).innerHTML = Content
	}
	else
	{
	FunctionControl[ContentHeight + TreeName] = true
		if(ContentHeight == 0)
		{
		ContentPadding = (ContentHeight*CellPadding)
		Content = "<span id='" + ContentHeight + TreeName + "' style='padding-left:" + ContentPadding + "px'><span onClick='CreateSubMenu(\"" + ContentName + "\",\"" + ContentHeight + "\", \"" + ContentNumber + "\",\"" + ContentName + "\")'>- " + TreeName + "</span></span>" 
		}
		else
		{
		ContentPadding = (ContentHeight*(CellPadding))-10
		Content = "<span id='" + ContentHeight + TreeName + "' style='padding-left:" + ContentPadding  + "px'><span onClick='CreateSubMenu(\"" + ContentName + "\",\"" + ContentHeight + "\", \"" + ContentNumber + "\",\"" + ContentName + "\")'>- " + TreeName + "</span></span>" 
		}
	
		if(ContentHeight != 0)
		{
		BasicEvalContent = eval("menu" + GetArrayTree(ContentName, ContentHeight, TreeName))
		}
		else
		{
		BasicEvalContent = eval("menu[currentPage[ContentNumber]]")
		}
	
		for(x in BasicEvalContent)
		{
		EvalContent = eval("BasicEvalContent[x]")
			if(EvalContent[0] instanceof Array)
			{
			ContentPadding = ((parseInt(ContentHeight)+1)*CellPadding)
				if(FunctionControl[ContentHeight + TreeName] == true)
				{
				Content += "<br><span id='" + (parseInt(ContentHeight)+1) + EvalContent[0][0] + "' style='padding-left:" + ContentPadding + "px'><span onClick='CreateSubMenu(\"" + ContentName + "\",\"" + (parseInt(ContentHeight)+1) + "\", \"" + x + "\",\"" + EvalContent[0][0] + "\")'>+ " + EvalContent[0][0] + "</span></span>"
				}
				else
				{
				Content += "<br><span id='" + (ContentHeight-1) + EvalContent[0][0] + "' style='padding-left:" + ContentPadding + "px'><span onClick='CreateSubMenu(\"" + ContentName + "\",\"" + (ContentHeight-1) + "\", \"" + x + "\",\"" + EvalContent[0][0] + "\")'>+ " + EvalContent[0][0] + "</span></span>"
				}
			}
			else
			{
				if(BasicEvalContent[1] instanceof Array)
				{
					if(ContentHeight != 1)
					{
					ContentPadding = ((parseInt(ContentHeight)+1)*(CellPadding+10))
					Content += "<br><a href='" + EvalContent[1] + "'><span style='text-decoration:none;font-size:10pt;color:#A9A9A9;padding-left:" + ContentPadding + "px'>" + EvalContent[0] + "</span></a>"	
					}
					else
					{
						if(x != 0)
						{
						ContentPadding = ((parseInt(ContentHeight)+1)*(CellPadding+10))
						Content += "<br><a href='" + EvalContent[1] + "'><span style='text-decoration:none;font-size:10pt;color:#A9A9A9;padding-left:" + ContentPadding + "px'>" + EvalContent[0] + "</span></a>"
						}
					}
				}
			}
		}
	document.getElementById(ContentHeight + TreeName).innerHTML = Content
	}
}


function GetArrayTree(name, height, TreeName)
{
LoopCounter = 0
EvalTree = ""

	while(LoopCounter <= height)
	{
		if(LoopCounter == 0)
		{
		EvalTree += "['" + eval("currentPage[ArrayLine[name][LoopCounter]]") + "']"
		}
		else
		{
		EvalTree += "[" + ArrayLine[TreeName][LoopCounter] + "]"
		}
	LoopCounter ++
	}
return EvalTree
}
</script>
</body>
</html>


Het script werkt volgens hoogten. Hij is standaard hoogte '0'. Als je een pop-up menu`tje verder gaat, word de hoogte ook hoger. Dus als ik op een waarde klik met een plusje ervoor, verschijnt een nieuw popup menu, en de hoogte word "+1". De hoogte bepaalt ook hoeveel hij inspringt naar rechts.

De eerste plusjes gaan foutloos. Echter bij de tweede plusjes (tweede) heb ik ingesteld dat als je erop klikt, de hoogte "+1" gaat. Echter als je daar meerdere keren opklikt, gaat het niet goed. Ik weet niet zeker of de fout daar ligt, maar ik kom er nu echt niet meer uit.

Kan iemand me helpen?
Alvast bedankt iedereen!!

Met vriendelijke groet,
Stormblast
 
Keep It Sweet & Simple! ;)
PHP: 
<html>
 <head>
  <title>Hedgehog Sitemap | Egel 070515 ;)</title>
  <script type="text/javascript">
   // Sitemap | Egel 070515 ;)
   function init() {
    var d = document.getElementById('menu').getElementsByTagName('div');
    for (var i = 0; i < d.length; i++) d[i].className = 'fold';
    };
   function fold(id) {
    id = id.parentNode;
    id.className = (id.className == 'fold' ? '' : 'fold' );
    };
  </script>
  <style type="text/css">
   #menu { width: 160px; color: #000; font: bold 13px verdana;}
   #menu a { color: #999; font-weight: normal; text-decoration: none;}
   #menu div, #menu span, #menu a { display: block; cursor: pointer;}
   #menu div.fold div, #menu div.fold a { display: none;}
   #menu div div, #menu div a { margin-left: 10px;}
  </style>
 </head>
 <body onload="init()">
  <div id="menu">
   <div>
    <span onclick="fold(this)">Home</span>
    <a href="info.html">Info</a>
    <a href="overigeinfo.html">Overige info</a>
    <div>
     <span onclick="fold(this)">Contact</span>
     <a href="cp.html">Contactpagina</a>
     <a href="cps.html">Contactpersonen</a>
    </div>
   </div>
   <div>
    <span onclick="fold(this)">SportEve</span>
    <div>
     <span onclick="fold(this)">Home</span>
     <a href="info.html">Info</a>
     <a href="overig.html">Overig</a>
    </div>
    <a href="overigeinfo.html">Overige info</a>
    <a href="test.html">Test</a>
   </div>
  </div>
 </body>
</html>
Als je wilt dat submenus mee inklappen (de verkenner doet dat niet) dan gebruik je deze fold():
PHP: 
//
   function fold(id) {
    id = id.parentNode;
    if (id.className == 'fold') {
     id.className = '';
     } else {
     id.className = 'fold';
     var d = id.getElementsByTagName('div');
     for (var i = 0; i < d.length; i++) d[i].className = 'fold';
     };
    };
En als je plusjes en minnetjes wilt vervang je de laatste regel van het stylesheet door deze twee:
PHP: 
/* */
   #menu div { background: url(min.gif) left 3px no-repeat; padding-left: 13px;}
   #menu div.fold { background-image: url(plus.gif);}
Dat ziet er dan zo uit: :)

hedgehog_sitemap.gif


Het is makkelijk uit te breiden EN het werkt als javascript uitstaat! :cool:


Vr.Gr. Egel.
 
Laatst bewerkt:
Geniaal, het werkt :D

Bedankt Egel, das toch wel een heel stuk korter :D

M. vr. g
Stormblast
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan