Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> rozwijane menu "z pamiecia"
lukaskolista
post
Post #1





Grupa: Zarejestrowani
Postów: 872
Pomógł: 94
Dołączył: 31.03.2010

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 3)
Grand93
post
Post #2





Grupa: Zarejestrowani
Postów: 58
Pomógł: 1
Dołączył: 2.08.2010
Skąd: Dębica

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/smile.gif)
Potem tylko przy wczytywaniu stronki odczytać cookie - funkcja explode, i działa pięknie ładnie (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
lukaskolista
post
Post #3





Grupa: Zarejestrowani
Postów: 872
Pomógł: 94
Dołączył: 31.03.2010

Ostrzeżenie: (0%)
-----

jak zapisac tablice js do cookie i pozniej ja odczytac? Bo w normalnej postaci sie nie da zapisac do cookie (IMG:style_emoticons/default/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
Go to the top of the page
+Quote Post
Grand93
post
Post #4





Grupa: Zarejestrowani
Postów: 58
Pomógł: 1
Dołączył: 2.08.2010
Skąd: Dębica

Ostrzeżenie: (0%)
-----

A bardzo prosto można zapisać - za pomocą bodajże implode (IMG:style_emoticons/default/winksmiley.jpg)
a odczytujesz explode()

po co uzywasz body onload skoro możesz to dodać do funkcji jquery ?
$(function(){getmenu();});
Go to the top of the page
+Quote Post
« Następny starszy · XML, AJAX · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 15:13
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn