Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: rozwijane menu "z pamiecia"
Forum PHP.pl > Forum > XML, AJAX
lukaskolista
20.08.2010, 21:32:29
Witam. Chcialbym zrobic rozwijane menu, ktore po przeladowaniu strony pamietaloby wszystkie otwarte wezly drzewa i wyswietlalo sie. Chodzi mi o to, aby uzytkownik mogl dowolnie otwierac i zamykac podkategorie menu, a po przeladowaniu strony menu byloby takie samo, jak przed przeladowaniem. Wiecie moze, jak zrobic cos takiego? Z gory dziekuje za pomoc smile.gif
Grand93
20.08.2010, 21:37:30
Można by to zrobić na cookie:
Masz cookie dajmy na to menu, a w nim np. po znaku | id menu, bądź też numery drzew ( funkcja jQuery eq() )
A całość wyglądałaby w ten sposób:
User wchodzi na stronkę bez Cookie - ciastko zostaje zapisane bez żadnych id,
User otwiera drzewo - jQuery zapisuje do Cookie które drzewo zostało otwarte smile.gif
Potem tylko przy wczytywaniu stronki odczytać cookie - funkcja explode, i działa pięknie ładnie smile.gif
lukaskolista
21.08.2010, 07:20:50
jak zapisac tablice js do cookie i pozniej ja odczytac? Bo w normalnej postaci sie nie da zapisac do cookie sad.gif

moj skrypt wyglada tak: (getMenu() i displayMenu() wywolywane przez <body onload="">)
style.css
[HTML] pobierz, plaintext 
  1. .menu_title {
  2. 	font-weight: bold;
  3. }
  4.  
  5. .menu_childs {
  6. 	margin-left: 20px;
  7. }
[HTML] pobierz, plaintext


menu.html
[HTML] pobierz, plaintext 
  1. <div id="displayMenu">
  2. 			<div id="menu_1">
  3. 				<div id="menu_1_title" class="menu_title">
  4. 					<a href="#" onClick="showChilds(1)" id="show_1">Rozwin</a>
  5. 					<a href="#" onClick="hideChilds(1)" id="hide_1">Schowaj</a>
  6. 					Makijaz
  7. 				</div>
  8. 				<div id="menu_1_childs" class="menu_childs">
  9. 					<div id="menu_2">
  10. 						<div id="menu_2_title" class="menu_title">
  11. 							<a href="#" onClick="showChilds(2)" id="show_2">Rozwin</a>
  12. 							<a href="#" onClick="hideChilds(2)" id="hide_2">Schowaj</a>
  13. 							Oczy
  14. 						</div>
  15. 						<div id="menu_2_childs" class="menu_childs">
  16. 							<div id="menu_8_title" class="menu_title">Tusze do rzęs</div>
  17. 						</div>
  18. 					</div>
  19. 					<div id="menu_3">
  20. 						<div id="menu_3_title" class="menu_title">Twarz</div>
  21. 						<div id="menu_3_childs" class="menu_childs"></div>
  22. 					</div>
  23. 					<div id="menu_4">
  24. 						<div id="menu_4_title" class="menu_title">Usta</div>
  25. 						<div id="menu_4_childs" class="menu_childs"></div>
  26. 					</div>
  27. 				</div>
  28. 			</div>
  29.  
  30.  
  31.  
  32.  
  33. 			<div id="menu_5">
  34. 				<div id="menu_5_title" class="menu_title">
  35. 					<a href="#" onClick="showChilds(5)" id="show_5">Rozwin</a>
  36. 					<a href="#" onClick="hideChilds(5)" id="hide_5">Schowaj</a>
  37. 					Ciało
  38. 				</div>
  39. 				<div id="menu_5_childs" class="menu_childs">
  40. 					<div id="menu_6">
  41. 						<div id="menu_6_title" class="menu_title">Brzuch</div>
  42. 						<div id="menu_6_childs" class="menu_childs"></div>
  43. 					</div>
  44. 					<div id="menu_7">
  45. 						<div id="menu_7_title" class="menu_title">Nogi</div>
  46. 						<div id="menu_7_childs" class="menu_childs"></div>
  47. 					</div>
  48. 				</div>
  49. 			</div>
  50.  
  51. 		</div>
[HTML] pobierz, plaintext


scripts.js
[PHP] pobierz, plaintext 
  1. var menu = new Array();
  2.  
  3. function getMenu() {
  4. 	if (getCookie('menu') == false) {
  5. 		menu = new Array();
  6. 		menu[1] = new Array(0, 'Makijaz', false);
  7. 			menu[2] = new Array(1, 'Oczy', false);
  8. 				menu[8] = new Array(2, 'Tusze do rzęs', null);
  9. 			menu[3] = new Array(1, 'Twarz', null);
  10. 			menu[4] = new Array(1, 'Usta', null);
  11.  
  12.  
  13. 		menu[5] = new Array(0, 'Ciało', false);
  14. 			menu[6] = new Array(5, 'Brzuch', null);
  15. 			menu[7] = new Array(5, 'Nogi', null);
  16. 	} else {
  17. 		menu = getCookie('menu');
  18. 	}
  19. }
  20.  
  21.  
  22. function displayMenu() {
  23.  
  24. 	setCookie('menu', menu);
  25.  
  26. 	for (i = 1; i < menu.length; i++) {
  27. 		var childs = document.getElementById('menu_'+i+'_childs');
  28. 		if (menu[i][2] == true) {
  29. 			childs.style.visibility = 'visible';
  30. 			childs.style.position = 'static';
  31. 			childs.style.left = '-1000px';
  32.  
  33. 			enableMenuButton('hide_'+i);
  34. 			disableMenuButton('show_'+i);
  35. 		} else if (menu[i][2] == false) {
  36. 			childs.style.visibility = 'hidden';
  37. 			childs.style.position = 'absolute';
  38. 			childs.style.left = '-1000px';
  39.  
  40. 			disableMenuButton('hide_'+i);
  41. 			enableMenuButton('show_'+i);
  42. 		}
  43. 	}
  44.  
  45. }
  46.  
  47.  
  48. function enableMenuButton(elementID) {
  49. 	var menuButton = document.getElementById(elementID);
  50. 	menuButton.style.visibility = 'visible';
  51. 	menuButton.style.left = '-1000px';
  52. 	menuButton.style.position = 'static';
  53. }
  54.  
  55. function disableMenuButton(elementID) {
  56. 	var menuButton = document.getElementById(elementID);
  57. 	menuButton.style.visibility = 'hidden';
  58. 	menuButton.style.left = '-1000px';
  59. 	menuButton.style.position = 'absolute';
  60. }
  61.  
  62. function showChilds(ID) {
  63. 	menu[ID][2] = true;
  64.  
  65. 	enableMenuButton('hide_'+ID);
  66. 	disableMenuButton('show_'+ID);
  67.  
  68. 	displayMenu();
  69. }
  70.  
  71. function hideChilds(ID) {
  72. 	menu[ID][2] = false;
  73.  
  74. 	disableMenuButton('hide_'+ID);
  75. 	enableMenuButton('show_'+ID);
  76.  
  77. 	displayMenu();
  78. }
  79.  
  80.  
  81. // COOKIE
  82. function setCookie(c_name,value) {
  83. 	// var exdate=new Date();
  84. 	// exdate.setDate(exdate.getDate()+expiredays);
  85. 	document.cookie=c_name+ "=" +escape(value);
  86. } 
  87.  
  88. function getCookie(c_name) {
  89. 	if (document.cookie.length>0) {
  90. 		c_start=document.cookie.indexOf(c_name + "=")
  91. 		if (c_start!=-1) { 
  92. 			c_start=c_start + c_name.length+1 
  93. 			c_end=document.cookie.indexOf(";",c_start)
  94. 			if (c_end==-1) {
  95. 				c_end=document.cookie.length
  96. 				return unescape(document.cookie.substring(c_start,c_end))
  97. 			}
  98. 		} 
  99. 	}
  100.  
  101. 	return false;
  102. }
[PHP] pobierz, plaintext
Grand93
21.08.2010, 12:42:49
A bardzo prosto można zapisać - za pomocą bodajże implode winksmiley.jpg
a odczytujesz explode()

po co uzywasz body onload skoro możesz to dodać do funkcji jquery ?
$(function(){getmenu();});

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.