Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Menu rozwijane
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
kamil_lk
23.08.2012, 08:49:50
Witam.

Mam gotowy skrypt, dzięki któremu można otrzymać rozwijane menu.

Wszystko śmiga jak należy, tzn prawie wszystko.

Aby menu pozostawało rozwinięte podczas przechodzenia z jednej strony na drugą to odnośnik MUSI znajdować się w menu, np.

index.php?section=User <- taki odnośnik mamy w menu i jest rozwinięte menu dotyczące Użytkowników, ale gdy przejdziemy pod adres
index.php?section=User&method=add <- to menu się zamyka ponieważ nie ma takiego odnośnika w nim zawartego

Czy mógłby ktoś przerobić skrypt, aby po rozszerzeniu adresu o kolejne pozycje menu pozostawało otwarte?

Pozdrawiam.

[HTML] pobierz, plaintext 
  1. /**
  2.  * @author Slawomir Koklowski {@link <a href="http://www.kurshtml.boo.pl}" target="_blank">http://www.kurshtml.boo.pl}</a>
  3.  * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
  4.  */
  5.  
  6. function Menu(id, style, otworz, wysun, czasRozwin, czasZwin, czasOtworz, czasZamknij, nieInicjalizuj)
  7. {
  8. 	if (typeof czasRozwin == 'undefined' || czasRozwin < 0) czasRozwin = 25;
  9. 	if (typeof czasZwin == 'undefined' || czasZwin < 0) czasZwin = 25;
  10. 	if (typeof czasOtworz == 'undefined' || czasOtworz < 0) czasOtworz = 250;
  11. 	if (typeof czasZamknij == 'undefined' || czasZamknij < 0) czasZamknij = 500;
  12.  
  13. 	var url = unescape(window.location.href.replace(/#.*/, ''));
  14. 	var base = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/[^\/\\]+$/, '');
  15.  
  16. 	if (style)
  17. 	{
  18. 		if (style.indexOf(':') < 0)
  19. 		{
  20. 			document.getElementById(id).className += ' ' + style;
  21. 		}
  22. 		else
  23. 		{
  24. 			style = style.replace(/(^\s+|(\s|;)+$)/g, '').split(/\s*;\s*/);
  25. 			for (var i = 0; i < style.length; i++)
  26. 			{
  27. 				style[i] = style[i].split(/\s*:\s*/);
  28. 				for (var j = 0, c, property = ''; j < style[i][0].length; j++)
  29. 				{
  30. 					c = style[i][0].charAt(j);
  31. 					property += c == '-' ? style[i][0].charAt(++j).toUpperCase() : c.toLowerCase();
  32. 				}
  33. 				eval('document.getElementById("' + id + '").style.' + property + ' = "' + style[i][1].replace(/"/g, '\\"') + '"');
  34. 			}
  35. 		}
  36. 	}
  37. 	
  38. 	for (var i = 0; i < document.getElementById(id).getElementsByTagName('dt').length; i++)
  39. 	{
  40. 		var dd = new Array();
  41. 		var el = document.getElementById(id).getElementsByTagName('dt')[i].nextSibling;
  42. 		var nodeName;
  43. 		while (el && (nodeName = el.nodeName.toLowerCase()) != 'dt')
  44. 		{
  45. 			if (nodeName == 'dd')
  46. 			{
  47. 				el._dt = document.getElementById(id).getElementsByTagName('dt')[i];
  48. 				if (otworz)
  49. 				{
  50. 					el.onmouseover = function()
  51. 					{
  52. 						clearTimeout(this._dt._timoutID);
  53. 						this._dt._displayed = false;
  54. 						this._dt.onclick();
  55. 					}
  56. 					el.onmouseout = function()
  57. 					{
  58. 						clearTimeout(this._dt._timoutID);
  59. 						var dt = this._dt;
  60. 						this._dt._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);
  61. 					};
  62. 				}
  63. 				dd[dd.length] = el;
  64. 			}
  65. 			el = el.nextSibling;
  66. 		}
  67. 		document.getElementById(id).getElementsByTagName('dt')[i]._dd = dd;
  68. 		document.getElementById(id).getElementsByTagName('dt')[i]._timoutID = null;
  69. 		document.getElementById(id).getElementsByTagName('dt')[i]._displayed = false;
  70. 		document.getElementById(id).getElementsByTagName('dt')[i].onclick = function()
  71. 		{
  72. 			clearTimeout(this._timoutID);
  73. 			if (!this._displayed)
  74. 			{
  75. 				var el = this.parentNode.getElementsByTagName('dt')[0];
  76. 				while (el)
  77. 				{
  78. 					if (el.nodeName.toLowerCase() == 'dt' && el != this)
  79. 					{
  80. 						el._displayed = false;
  81. 						if (czasZwin) display(el, 0);
  82. 						else display(el);
  83. 					}
  84. 					el = el.nextSibling;
  85. 				}
  86. 			}
  87. 			this._displayed = !this._displayed;
  88. 			if (this._displayed && czasRozwin || !this._displayed && czasZwin) display(this, 0);
  89. 			else display(this);
  90. 		};
  91. 		if (otworz)
  92. 		{
  93. 			document.getElementById(id).getElementsByTagName('dt')[i].onmouseover = function()
  94. 			{
  95. 				clearTimeout(this._timoutID);
  96. 				var dt = this;
  97. 				this._timoutID = setTimeout(function () { dt._displayed = false; dt.onclick(); }, czasOtworz);
  98. 			};
  99. 			document.getElementById(id).getElementsByTagName('dt')[i].onmouseout = function()
  100. 			{
  101. 				clearTimeout(this._timoutID);
  102. 				var dt = this;
  103. 				this._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);
  104. 			};
  105. 		}
  106. 	}
  107. 	
  108. 	start(document.getElementById(id).getElementsByTagName('dt')[0]);
  109. 	
  110. 	function start(dt)
  111. 	{
  112. 		var hide = true;
  113. 		var el = dt;
  114. 		while (el)
  115. 		{
  116. 			var nodeName = el.nodeName.toLowerCase();
  117. 			if (nodeName == 'dt')
  118. 			{
  119. 				dt = el;
  120. 				hide = true;
  121. 			}
  122. 			if (nodeName == 'dt' || nodeName == 'dd')
  123. 			{
  124. 				if (!nieInicjalizuj && el.getElementsByTagName('a').length)
  125. 				{
  126. 					var active = el.getElementsByTagName('a')[0].href && unescape(el.getElementsByTagName('a')[0].href.replace(/#.*/, '')) == url;
  127. 					if (!active)
  128. 					{
  129. 						var rel = el.getElementsByTagName('a')[0].getAttribute('rel');
  130. 						if (rel)
  131. 						{
  132. 							var matches = (' ' + rel + ' ').match(/\s+Collection\(([^)]+)\)\s+/i);
  133. 							if (matches)
  134. 							{
  135. 								matches = matches[1].split(',');
  136. 								for (var k = 0, pos = -1; k < matches.length; k++)
  137. 								{
  138. 									if (matches[k].charAt(0) == '[' && (pos = matches[k].lastIndexOf(']')) > 0)
  139. 									{
  140. 										if (new RegExp(unescape(matches[k].substring(1, pos)), matches[k].substring(pos + 1)).test(url))
  141. 										{
  142. 											active = true;
  143. 											break;
  144. 										}
  145. 									}
  146. 									else
  147. 									{
  148. 										if (/^[\/\\]/.test(matches[k])) matches[k] = window.location.protocol + '//' + window.location.host + matches[k];
  149. 										else if (!/^[a-z0-9]+:/i.test(matches[k])) matches[k] = base + matches[k];
  150. 										if (unescape(matches[k].replace(/[\/\\]\.([\/\\])/g, '$1').replace(/[^\/\\]+[\/\\]\.\.[\/\\]/g, '').replace(/#.*/, '')) == url)
  151. 										{
  152. 											active = true;
  153. 											break;
  154. 										}
  155. 									}
  156. 								}
  157. 							}
  158. 						}
  159. 					}
  160. 					if (active)
  161. 					{
  162. 						el.className = (el.className ? el.className + ' ' : '') + 'active';
  163. 						dt._displayed = true;
  164. 						display(dt);
  165. 						hide = false;
  166. 						var el_parentNode = el.parentNode;
  167. 						while (el_parentNode != document.getElementById(id))
  168. 						{
  169. 							if (el_parentNode.nodeName.toLowerCase() == 'dd')
  170. 							{
  171. 								var el_sibling = el_parentNode.previousSibling;
  172. 								while (el_sibling)
  173. 								{
  174. 									if (el_sibling.nodeName.toLowerCase() == 'dt')
  175. 									{
  176. 										el_sibling._displayed = true;
  177. 										display(el_sibling)
  178. 										break;
  179. 									}
  180. 									el_sibling = el_sibling.previousSibling;
  181. 								}
  182. 							}
  183. 							el_parentNode = el_parentNode.parentNode;
  184. 						}
  185. 					}
  186. 				}
  187. 			}
  188. 			if (nodeName == 'dd')
  189. 			{
  190. 				if (hide) el.style.display = 'none';
  191. 				start(el.getElementsByTagName('dt')[0]);
  192. 			}
  193. 			el = el.nextSibling;
  194. 		}
  195. 	}
  196.  
  197. 	function display(dt, i)
  198. 	{
  199. 		if (typeof i == 'undefined')
  200. 		{
  201. 			for (var i = 0; i < dt._dd.length; i++)
  202. 			{
  203. 				dt._dd[i].style.display = dt._displayed ? 'block' : 'none';
  204. 				if (!dt._displayed)
  205. 				{
  206. 					for (var j = 0; j < dt._dd[i].getElementsByTagName('dt').length; j++)
  207. 					{
  208. 						dt._dd[i].getElementsByTagName('dt')[j]._displayed = false;
  209. 						display(dt._dd[i].getElementsByTagName('dt')[j]);
  210. 					}
  211. 				}
  212. 			}
  213. 		}
  214. 		else if (i < dt._dd.length)
  215. 		{
  216. 			var dir = wysun ? !dt._displayed : dt._displayed;
  217. 			var n = dir ? i : dt._dd.length - 1 - i;
  218. 			dt._dd[n].style.display = dt._displayed ? 'block' : 'none';
  219. 			if (!dt._displayed)
  220. 			{
  221. 				for (var j = 0; j < dt._dd[n].getElementsByTagName('dt').length; j++)
  222. 				{
  223. 					dt._dd[n].getElementsByTagName('dt')[j]._displayed = false;
  224. 					display(dt._dd[n].getElementsByTagName('dt')[j]);
  225. 				}
  226. 			}
  227. 			dt._timoutID = setTimeout(function() { display(dt, i + 1); }, dt._displayed ? czasRozwin : czasZwin);
  228. 		}
  229. 	}
  230. }
[HTML] pobierz, plaintext
malum
10.03.2013, 12:00:41
Witam!
Czy rozwiązałeś może swój problem, bo walczę dokładnie z tym samym sad.gif
kamil_lk
10.03.2013, 14:54:17
Nie rozwiązałem. Ale napisałem coś podobnego, krótszego.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  7. <style type="text/css">
  8. ul ul{ display: none; }
  9. </style>
  10. </head>
  11.  
  12. <body>
  13.  
  14. <ul>
  15. 	<li><span>Menu 1</span>
  16.     	<ul>
  17.         	<li><span>Menu 1.1</span></li>
  18.             <li><span>Menu 1.2</span>
  19.                 <ul>
  20.                     <li><span>Menu 1.2.1</span>
  21.                         <ul>
  22.                         	<li><span>Menu 1.2.1.1</span></li>
  23.                         </ul>
  24.                     </li>
  25.                     <li><span>Menu 1.2.2</span></li>
  26.                 </ul>
  27.             </li>
  28.             <li><span><span>Menu 1.3</span></li>
  29.         </ul>
  30.     </li>
  31.     <li><span>Menu 2</span>
  32.     	<ul>
  33.         	<li><span>Menu 2.1</span></li>
  34.             <li><span>Menu 2.2</span>
  35.             	<ul>
  36.                     <li><span>Menu 2.2.1</span></li>
  37.                     <li><span>Menu 2.2.2</span></li>
  38.                     <li><span>Menu 2.2.3</span></li>
  39.                 </ul>
  40.             </li>
  41.             <li><span>Menu 2.3</span></li>
  42.         </ul>
  43.     </li>
  44.     <li><span>Menu 3</span></li>
  45. </ul>
  46. <script type="text/javascript">
  47. $(window).ready(function(){
  48. 	$("li span").bind('click', function() {
  49. 		if($(this).next("ul").css("display") == 'block')
  50. 		   $(this).next("ul").hide("300");
  51. 		else
  52. 		   $(this).next("ul").show("300");
  53. 	});
  54. });
  55. </script>
  56. </body>
  57. </html>
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.