webForumDet fria alternativet

Bygga om treemenu

4 svar · 326 visningar · startad av Pedda

PeddaMedlem sedan juni 20006 032 inlägg
#1

Jag har en treemenu som jag vill lägga till en funktion i.
Tyvärr så är mina javascript kunskaper begränsade, så jag tar er till hjälp.

Jag vill ha en funktion som stänger alla öppna noder när den anropas men vet inte riktigt hur jag ska gå till väga.

//*************************************************************************************************
function setTreeMode(name, value, expires, path, domain, secure) 
{
  var curCookie = name + "=" + escape(value) +
      ((expires) ? "; expires=" + expires.toGMTString() : "") +
      ((path) ? "; path=" + path : "") +
      ((domain) ? "; domain=" + domain : "") +
      ((secure) ? "; secure" : "");
  document.cookie = curCookie;
  //alert(curCookie);
}

//*************************************************************************************************
function getTreeMode(name) 
{
  var dc = document.cookie;
  var prefix = name + "=";
  var begin = dc.indexOf("; " + prefix);
  if (begin == -1) 
  {
    begin = dc.indexOf(prefix);
    if (begin != 0) return null;
  } 
  else
    begin += 2;
  var end = document.cookie.indexOf(";", begin);
  if (end == -1)
    end = dc.length;
  return unescape(dc.substring(begin + prefix.length, end));
}

//*************************************************************************************************

var menu_state = new Array();
	
function treeNode(expand, caption, link, target, number, level) 
{
	// Node properties
	this.expand  = expand;
	this.caption = caption;
	this.link    = link;
	this.target  = target;
	this.number  = number;
	this.level   = level;
	this.next    = null;
	this.subtree = null;
	// Node methods
	this.AddChild   = treeAddChild;
	this.AddSibling = treeAddSibling;
	this.Display	= treeDisplay;
}

var buildProgress = 0;

function addToTree(arr) 
{
	var start = buildProgress;
	var m = new treeNode(menu_state[start]=='1',arr[start][1],arr[start][2],arr[start][3], start, arr[start][0]);
	buildProgress++;

	var done = (buildProgress >= arr.length);
	var s = m;

	while (!done) 
	{
		if (arr[start][0] == arr[buildProgress][0]) 
		{
			j = buildProgress;
			s = s.AddSibling(menu_state[j]=='1',arr[j][1],arr[j][2],arr[j][3], j, arr[j][0]);
			buildProgress++;
		} 
		else if (arr[start][0] < arr[buildProgress][0]) 
		{
			s.subtree = addToTree(arr);
		} 
		else if (arr[start][0] > arr[buildProgress][0]) 
		{
			done = true;
		}
		done = done || (buildProgress >= arr.length);
	}
	return m;
}

function treeExpand(n) 
{
	menu_state[n] = '1';
	setTreeMode('TREEMENU_STATE', menu_state.join('|'));
	history.go(0);
}

function treeCollapse(n) 
{
	menu_state[n] = '0';
	setTreeMode('TREEMENU_STATE', menu_state.join('|'));
	history.go(0);
}

function buildMenu(arr) 
{
	var menu_state_cookie = getTreeMode('TREEMENU_STATE');
	if (menu_state_cookie != undefined) 
	{
		menu_state = menu_state_cookie.split('|');
	}
	buildProgress = 0;
	return addToTree(arr, 0);
}

function treeAddSibling(expand,caption,link,target, number, level) 
{
	s = this;
	while (s.next != null) 
	{
		s = s.next;	
	}
	s.next = new treeNode(expand,caption,link,target, number, level);
	return s.next;
}

function treeAddChild(expand, caption, link, target, number, level) 
{
	var n;
	if (this.subtree == null) 
	{
		n = new treeNode(expand,caption,link,target, number, level);
		this.subtree = n;
	} 
	else 
	{
		n = this.subtree.AddSibling(expand,caption,link,target,number, level);
	}
	return n;
}

function indent(level) 
{
	document.write('<TABLE><TR>');
	for (i=0; i<level; i++) 
	{
		//document.write('<img src="../../../images/tree_space2.gif" align=middle>');
		//STMA
		//document.write('<TD VALIGN=TOP height=10>&nbsp;&nbsp;&nbsp;&nbsp;</TD>');
		document.write('<TD VALIGN=TOP><font size="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></TD>');
	}
	
	
}

function treeDisplay() 
{
	indent(this.level);
	if (this.subtree == null)
	{
		var link = this.link;
		link = link.toUpperCase();

		//skala bort sökvägen till link för att få filnamn
		var fileName = link;
		var slash = fileName.lastIndexOf("\/");
		fileName = fileName.slice(slash + 1, fileName.length);
		
		//Kontrollera om fileName innehåller index + html
		var searchString1 = fileName.search("INDEX");
		var searchString2 = fileName.search(".HTML");
		//alert(fileName + ":::" + slash + ":::" + searchString1 + ":::" + searchString2);

		var len = link.length;
		var extension = link.slice(len-4, len);
		extension = extension.toUpperCase();
		//Första if kollar om filnamnet innehåller både index och html
		if((searchString1!=-1) && (searchString2!=-1))
		{
			//alert("det är index .html");
			document.write('<TD VALIGN=TOP><img src="../../../images/index.gif" align=middle></TD>');
		}
		else if(extension=="HTML")
		{
			//HTML-skal med film i sig, kan ge problem 
			document.write('<TD VALIGN=TOP><img src="../../../images/mpeg.gif" align=middle></TD>');
			//alert("html: " + extension);
		}else if(extension == ".MPG" || extension == "MPEG")
		{
			//Det är en MPEG fil
			//alert("mpg: " + extension);
			document.write('<TD VALIGN=TOP><img src="../../../images/mpeg.gif" align=middle></TD>');
		}
		else if(extension==".DOC")
		{
			//Det är ett word dokument
			//alert("doc: " + extension);
			document.write('<TD VALIGN=TOP><img src="../../../images/word.gif" align=middle></TD>');
		}
		else if(extension==".DOT")
		{
			//Det är en wordmall
			//alert("dot: " + extension);
			document.write('<TD VALIGN=TOP><img src="../../../images/word.gif" align=middle></TD>');
		}
		else if(extension==".XLS")
		{
			//Det är ett Excel dokument
			//alert("xls: " + extension);
			document.write('<TD VALIGN=TOP><img src="../../../images/excel.gif" align=middle></TD>');
		}
		else if(extension==".XLT")
		{
			//Det är en excelmall
			//alert("xlt: " + extension);
			document.write('<TD VALIGN=TOP><img src="../../../images/excel.gif" align=middle></TD>');
		}
		else if(extension==".PPT")
		{
			//En powerpoint
			document.write('<TD VALIGN=TOP><img src="../../../images/ppt.gif" align=middle></TD>');
			//alert("ppt: " + extension);
		}
		else if(extension==".PPS")
		{
			//En powerpoint
			document.write('<TD VALIGN=TOP><img src="../../../images/ppt.gif" align=middle></TD>');
			//alert("pps: " + extension);
		}
		else if(extension==".PDF")
		{
			//En adobe pdf
			document.write('<TD VALIGN=TOP><img src="../../../images/pdfmini.gif" align=middle></TD>');
			//alert("pdf: " + extension);
		}
		else if(extension==".EXE")
		{
			//En adobe pdf
			document.write('<TD VALIGN=TOP><img src="../../../images/applic.gif" align=middle></TD>');
			//alert("exe: " + extension);
		}
		else if(extension==".ZIP")
		{
			//En zip fil
			document.write('<TD VALIGN=TOP><img src="../../../images/zip.gif" align=middle></TD>');
			//alert("zip: " + extension);
		}
		else if(extension==".HTML")
		{
			//HTML-skal med film i sig, kan ge problem 
			document.write('<TD VALIGN=TOP><img src="../../../images/mpeg.gif" align=middle></TD>');
			//alert("html: " + extension);
		}else
		{
			document.write('<TD VALIGN=TOP><img src="images/text.gif" align=middle></TD>');
			//document.write('<img src="../../../images/tree_space2.gif" align=middle>');
			//alert("resten" + extension);
		}

	}
	else
		if (this.expand)
		{
			if(this.link != '')
			{
				document.write('<TD VALIGN=TOP><a href="javascript: treeCollapse('+this.number+')"><img src="images/tree_collapse.gif" align=middle border=no></a></TD>');
			}
			else
			{
				document.write('<TD VALIGN=TOP><a href="javascript: treeCollapse('+this.number+')"><img src="../../../images/folder_open.gif" align=middle border=no></a></TD>');
			}
		}else{
			if(this.link != '')
			{
				document.write('<TD VALIGN=TOP><a href="javascript: treeExpand('+this.number+')"><img src="images/tree_expand.gif" align=middle border=no></a></TD>');
			}else{
				document.write('<TD VALIGN=TOP><a href="javascript: treeExpand('+this.number+')"><img src="../../../images/folder_close.gif" align=middle border=no></a></TD>');
			}
		}
	if (this.link != '') {
		document.writeln('<TD><a href="'+this.link+'" target="'+this.target+'" title="'+this.caption+'"><font class="loptxt">'+this.caption+'</font></a></TD>');
	} else {
		//document.write('<TD VALIGN=TOP><img src="../../../images/folder_open.gif" align=middle></TD>');
		document.writeln('<TD> <font class="loptxt">'+this.caption+'</font></TD>');
	}
	document.write('</TR></TABLE>');
	if (this.subtree!=null && this.expand) this.subtree.Display();
	if (this.next != null) this.next.Display();
}
colioneMedlem sedan juni 20014 421 inlägg
#2

det kommer vara enklare att hjälpa om man får lite mer data, exempelvis en del av en sida där du bygger upp menyn på riktigt. :)

PeddaMedlem sedan juni 20006 032 inlägg
#3

colione skrev:

det kommer vara enklare att hjälpa om man får lite mer data, exempelvis en del av en sida där du bygger upp menyn på riktigt. :)

Här kommer ett exempel på hur en meny kan vara uppbyggd:

<html xmlns:xlink='http://www.w3.org/1999/xlink'><head>
<META http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>../del3/ipm/del3a_ipm.xml</title>
<link rel='stylesheet' type='text/css' href='../../../formatmall/tocsaki.css' title='style1'></script><SCRIPT LANGUAGE='JavaScript' SRC='../../../jsmenu/treemenu.js'></script>
<script language='JavaScript' src='../../../jsmenu/fm_functions.js'></script>
<script language='JavaScript'>
menuitems = new Array();
menuitems[0] = [0, 'Titelsida','../del3/ipm/del3a_ipm.xml','main'];
menuitems[1] = [0, '1 Produktionsledning hos producenter', '../del3/ipm/del3_produktionsledning_hos_producenter.xml#b76fcc04-fb22-4595-9d4e-46025e8160d9', 'main'];
menuitems[2] = [1, '1.1 Inledning', '../del3/ipm/del3_produktionsledning_hos_producenter.xml#632c57cb-1898-4f2a-bd48-d0570d04c2be', 'main'];
menuitems[3] = [2, '1.1.1 Syfte och omfattning', '../del3/ipm/del3_produktionsledning_hos_producenter.xml#957fb713-a61a-4b73-8341-00bbdcc9d02e', 'main'];

... osv. Kortar av lite här ;)

menuitems[277] = [2, '3.4.3 Ändring av MF och Teknisk Order för underhållsåtgärd av engångskaraktär', '../del3/ipm/del3_anvisningar_for_TO.xml#5a5c0726-d6c2-4803-b12c-5a23a509fea8', 'main'];
menu = buildMenu(menuitems);
</script>
</head>
<body text='#000000' bgcolor='#EFEFEF' background='../frames/left_middle.jpg'><p class='overskrift'>Del 3A, Tekniska Order <img src='../../../images/bok_utskrift.gif'></p>
<table>
<tr>
<td>
<script language='JavaScript'>
menu.Display();
</script>
</td>
</tr>
</table>
</body>
</html>
colioneMedlem sedan juni 20014 421 inlägg
#4

Är kke inte den allra snyggaste lösningen, men den fungerar. Följande ska in i tree-menus js-fil

function collapseAll() {
for	(i=0;i<menu_state.length;i++) {
	treeCollapse(i)
}
}

Funktionen stänger dock inte menyn i rätt ordning, dvs från den underst öppna noden och upp utan från root-noden och när den är stängd stängs under-noder till den, etc. Det gör egentligen ingen skillnad hur du gör det, men vill du göra det i sista öppna noden mot roten istället får du skriva om collapseAll-funktionen såhär:

function collapseAll() {
for	(i=menu_state.length;i>0;i--) {
	treeCollapse(i)
}
}
PeddaMedlem sedan juni 20006 032 inlägg
#5

Funkade fint. Tack. (y)

143 ms totalt · 3 externa anrop · v20260731065814-full.3ab8d573
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
140 ms — hämta tråd, inlägg och bilagor (db)