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:
  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. </head>
  15. <table width="210" cellspacing="0" cellpadding="0" border="0">
  16.  
  17. <tr><td id="pan1" class="panel_nav" onmouseover="over('pan1');" onmouseout="out('pan1');" onclick="showHidden('show1');">&raquo; Nagłówek</td></tr>
  18. <tr id="show1" style="display:none;"><td class="panel_con">
  19. Zawartość</td></tr>
  20.  
  21. <tr><td class="panel_nav" onclick="showHidden('show2');">&raquo; Nagłówek</td></tr>
  22. <tr id="show2" style="display:none;"><td class="panel_con">
  23. Zawartość
  24. </td></tr>
  25.  
  26. <tr><td class="panel_nav" onclick="showHidden('show3');">&raquo; Nagłówek</td></tr>
  27. <tr id="show3" style="display:none;"><td class="panel_con">
  28. Zawartośc</td></tr>


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:
  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. </head>
  110. <body onload="loadStatus(); table2PanelsStatus()" onunload=" panelsStatus2Table(); saveStatus();">
  111.  
  112.  
  113. <table width="210" cellspacing="0" cellpadding="0" border="0">
  114.  
  115. <tr><td class="panel_nav" onclick="showHidden('show1');">&raquo; Nagłówek</td></tr>
  116. <tr id="show1"><td class="panel_con">
  117. Zawartość</td></tr>
  118.  
  119. <tr><td class="panel_nav" onclick="showHidden('show2');">&raquo; Nagłówek</td></tr>
  120. <tr id="show2"><td class="panel_con">
  121. Zawartość
  122. </td></tr>
  123.  
  124. <tr><td class="panel_nav" onclick="showHidden('show3');">&raquo; Nagłówek</td></tr>
  125. <tr id="show3"><td class="panel_con">
  126. Zawartość</td></tr>


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


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

 



RSS Aktualny czas: 11.10.2025 - 08:42