Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Panel w JS + ciasteczka, zapamiętywanie konfiguracji użytkownika
onlyX
post
Post #1





Grupa: Zarejestrowani
Postów: 119
Pomógł: 0
Dołączył: 15.07.2003
Skąd: Grajewo

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

Mam panel-tabelę z chowanymi elementami za pomocą JS:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function showHidden(obj){
  3. obj = document.getElementById(obj);
  4. obj.style.display == 'none' ? obj.style.display = '' : obj.style.display = 'none';
  5. }
  6. function over(obj){
  7. obj = document.getElementById(obj);
  8. obj.style.backgroundColor = '#CCCCCC';
  9. }
  10. function out(obj){
  11. obj = document.getElementById(obj);
  12. obj.style.backgroundColor = '#454545';
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <table width="210" cellspacing="0" cellpadding="0" border="0">
  18.  
  19. <tr><td id="pan1" class="panel_nav" onmouseover="over('pan1');" onmouseout="out('pan1');" onclick="showHidden('show1');">&raquo; Nagłówek</td></tr>
  20. <tr id="show1" style="display:none;"><td class="panel_con">
  21. Zawartość</td></tr>
  22.  
  23. <tr><td class="panel_nav" onclick="showHidden('show2');">&raquo; Nagłówek</td></tr>
  24. <tr id="show2" style="display:none;"><td class="panel_con">
  25. Zawartość
  26. </td></tr>
  27.  
  28. <tr><td class="panel_nav" onclick="showHidden('show3');">&raquo; Nagłówek</td></tr>
  29. <tr id="show3" style="display:none;"><td class="panel_con">
  30. Zawartośc</td></tr>
  31. </table>
[HTML] pobierz, plaintext


Chciałbym rozbudować go o możliwość zapamiętywania wyborów uzytkownika (które panele zamknięte, a które otwarte). Z tym, że nie wiem jak do tego się zabrać.
Chciałbym, żeby cała konfiguracja była przechowywana w jednym cistku (może w tablicy) i w przypadku nieznalezienia ciastka, uzywana była domyślna konfiguracja. Może będzie całkowicie przebudować kod (atrybuty id, style i funkcje js). Moja wiedza o JS jest narazie zbyt uboga, żeby zrobic to samemu. Może moglibyście wskazać mi jakies przykłady, artykuły, bądź poddać pomysły.

Z góry dziękuję za jaką kolwiek pomoc.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Draugfor
post
Post #2





Grupa: Zarejestrowani
Postów: 131
Pomógł: 0
Dołączył: 13.07.2003
Skąd: Torun/Poznan

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

Sprobuj tak:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. <!--
  3.  
  4. var showCount=3;
  5. var showStatus=new Array(showCount);
  6.  
  7. //wywolywana przy wejsciu na strone
  8. function loadStatus(){
  9. 	showStatus = string2array(getCookie('panel'));
  10. 	alert(showStatus);
  11. }
  12.  
  13. //wywolywana przy opuszczaniu strony
  14. function saveStatus(){
  15. 	setCookie('panel', array2string(showStatus));
  16. 	alert(array2string(showStatus));
  17. }
  18.  
  19. function array2string(arr) {
  20. var str="";
  21. for(i = 0; i<showCount; i++) {
  22. str = str + showStatus[i] + ":";
  23. }
  24. return str;
  25. }
  26.  
  27. function string2array(str){
  28. return arr = str.split(":");
  29. }
  30.  
  31. function setCookie(name, value) {
  32. //If name is the empty string, it places a ; at the beginning
  33. //of document.cookie, causing clearCookies() to malfunction.
  34. if(name != '')
  35. document.cookie = name + '=' + value;
  36. }
  37.  
  38. function getCookie(name) {
  39. //Without this, it will return the first value
  40. //in document.cookie when name is the empty string.
  41. if(name == '')
  42. return('');
  43.  
  44. name_index = document.cookie.indexOf(name + '=');
  45.  
  46. if(name_index == -1)
  47. return('');
  48.  
  49. cookie_value = document.cookie.substr(name_index + name.length + 1,
  50. document.cookie.length);
  51.  
  52. //All cookie name-value pairs end with a semi-colon, except the last one.
  53. end_of_cookie = cookie_value.indexOf(';');
  54. if(end_of_cookie != -1)
  55. cookie_value = cookie_value.substr(0, end_of_cookie);
  56.  
  57. //Restores all the blank spaces.
  58. space = cookie_value.indexOf('+');
  59. while(space != -1) {
  60. cookie_value = cookie_value.substr(0, space) + ' ' +
  61. cookie_value.substr(space + 1, cookie_value.length);
  62.  
  63. space = cookie_value.indexOf('+');
  64. }
  65.  
  66. return(cookie_value);
  67. }
  68.  
  69.  
  70. //Status paneli zostaje zapisany w tabeli
  71. //table2array
  72.  
  73. function panelsStatus2Table() {
  74. if(!document.getElementById)return;
  75.  
  76. for(var i=0; i<showCount; i++)
  77. if(document.getElementById("show"+(i+1)).style.display=="none")
  78. showStatus[i]=0;
  79. else
  80. showStatus[i]=1;
  81. }
  82.  
  83. //Status paneli zostaje ustawiony wg danych w tabeli
  84. //array2table
  85.  
  86. function table2PanelsStatus() {
  87. if(!document.getElementById)return;
  88.  
  89. for(var i=0; i<showCount; i++)
  90. if(showStatus[i]==0)document.getElementById("show"+(i+1)).style.display="none";
  91. else document.getElementById("show"+(i+1)).style.display="";
  92. }
  93.  
  94. //Pokaz/schowaj zawartosc
  95. //show-hide
  96.  
  97. function showHidden(id) {
  98. if(!document.getElementById)return;
  99.  
  100. element=document.getElementById(id);
  101. if(element.style.display=="none")
  102. element.style.display="inline";
  103. else
  104. element.style.display="none";
  105. }
  106.  
  107. //-->
  108.  
  109. </script>
  110. </head>
  111. <body onload="loadStatus(); table2PanelsStatus()" onunload=" panelsStatus2Table(); saveStatus();">
  112.  
  113.  
  114. <table width="210" cellspacing="0" cellpadding="0" border="0">
  115.  
  116. <tr><td class="panel_nav" onclick="showHidden('show1');">&raquo; Nagłówek</td></tr>
  117. <tr id="show1"><td class="panel_con">
  118. Zawartość</td></tr>
  119.  
  120. <tr><td class="panel_nav" onclick="showHidden('show2');">&raquo; Nagłówek</td></tr>
  121. <tr id="show2"><td class="panel_con">
  122. Zawartość
  123. </td></tr>
  124.  
  125. <tr><td class="panel_nav" onclick="showHidden('show3');">&raquo; Nagłówek</td></tr>
  126. <tr id="show3"><td class="panel_con">
  127. Zawartość</td></tr>
  128. </table>
[HTML] pobierz, plaintext


Zmiany:
linia 20: bylo var str; jest var str="";
linia 102: bylo display=""; jest display="inline";
Go to the top of the page
+Quote Post

Posty w temacie
- onlyX   Panel w JS + ciasteczka   5.06.2005, 18:27:14
- - Draugfor   No dobra! Bedziesz potrzebowal kilku funkcji ...   5.06.2005, 23:49:40
- - onlyX   O to chodzi, że wszystko jasne. Potwierdziłeś moje...   6.06.2005, 00:31:20
- - Draugfor   Leniu Ty. 8) Cookies: http://www.hotscripts.com/Ja...   6.06.2005, 14:20:49
- - onlyX   A więc tak: 1. Sporo czasu zajęło mi rozszyfrowani...   6.06.2005, 15:25:46
- - Draugfor   Sprobuj tak: [HTML] pobierz, plaintext <script ...   6.06.2005, 20:29:13
- - onlyX   Wow, Draugfor. jesteś mistrzem. Jeszcze jak mi pow...   6.06.2005, 21:09:55
- - Draugfor   Mam ochote na jeszcze 2 minuty. Nie dzialalo, bo...   6.06.2005, 22:08:17

« Następny starszy · JavaScript · 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 · Przełącz na: Linearny+ · Drzewo

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

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