Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Panel w JS + ciasteczka
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
onlyX
5.06.2005, 18:27:14
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.
Draugfor
5.06.2005, 23:49:40
No dobra!

Bedziesz potrzebowal kilku funkcji do obslugi cookie (zapis, odczyt) - najlepiej sciagnij sobie takie funkcje z jakiejs strony ze skryptami, bo szkoda czasu, zeby to pisac samemu (no, chyba ze chcesz dobrze poznac JS).

Przydalaby sie jakas tablica, np.
Kod
//Ile jest tych pojawiajajacych sie i znikajacych paneli:
var showCount=3;
//Tablica z danymi (czy panel otwarty):
var showStatus=new Array(showCount);
//np. showStatus[0]=1 - panel pierwszy otwarty.
//showStatus[1]=1 - panel drugi zamkniety.


O ile mi wiadomo, to w cookie nie mozna tak po prostu zapisac obiektu czy tablicy, wiec potrzebna bedzie funkcja do konwersji naszej tablicy showStatus w ciag znakow i na odwrot.
Otrzymany ciag znakow bedzie zapisywany z cookie jako ustawienia uzytkownika np. przy zamykaniu strony
[HTML] pobierz, plaintext 
  1. <body onunload="saveShow()">
[HTML] pobierz, plaintext

a przy otwieraniu wczytany i skonwertowany do tablicy showStatus, o czym nizej.

No i do tego 2 funkcje, ktore odczytaja wartosci display wszystkich paneli i zapisza je do tablicy showStatus (to pierwsza funkcja) oraz odczytaja wartosci z tabeli showStatus i wedlug nich poustawiaja styl display wszystkich paneli (to druga).

Pewnie nie wszystko jest jasne, wiec smialo pytaj. smile.gif
onlyX
6.06.2005, 00:31:20
O to chodzi, że wszystko jasne. Potwierdziłeś moje przypuszczenia. Znam możliwości JS, gorzej z praktyką. sad.gif
Miałem nadzieję na jakieś konkrety (linki, przyklady, artykuły, gotowe rozwiązanie biggrin.gif ).
Draugfor
6.06.2005, 14:20:49
Leniu Ty. 8)
Cookies: http://www.hotscripts.com/JavaScript/Scrip...kies/index.html
na skroty: http://scripts.franciscocharrua.com/javascript_cookies.php

No i pare funkcji:
Kod
<script type="text/javascript">
<!--

var showCount=3;
var showStatus=new Array(showCount);

//Status paneli zostaje zapisany w tabeli
function panelsStatus2Table()
{
    if(!document.getElementById)return;

    for(var i=0;i<showCount;i++)
  if(document.getElementById("show"+(i+1)).style.display=="none")
     showStatus[i]=0;
  else
     showStatus[i]=1;
}

//Status paneli zostaje ustawiony wg danych w tabeli
function table2PanelsStatus()
{
    if(!document.getElementById)return;

    for(var i=0;i<showCount;i++)
  if(showStatus[i]==0)document.getElementById("show"+(i+1)).style.display="none";
  else document.getElementById("show"+(i+1)).style.display="block";
}

//Pokaz/schowaj zawartosc
function showHidden(id)
{
    if(!document.getElementById)return;
    
    element=document.getElementById(id);
    if(element.style.display=="none")
  element.style.display="block";
    else
  element.style.display="none";
}

//-->
</script>


I jak?
onlyX
6.06.2005, 15:25:46
A więc tak:
1. Sporo czasu zajęło mi rozszyfrowanie twoich komentarzy (tabela=tablica).
2. style.display="block" nie działa w FireFoxie zamieniłem na: style.display="".
3. Analizujac inne skrypty wymyśliłem funkcje do zamiany stringa na tablicę i na odwrót, ale nie wiem czy działają.
4. Próbowałem wszystko poskładać w całość i zatrzymałem sie w jednym miejscu. Jak narazie wszystko działa, ale nie dla pierwszego panelu:
[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. }
  11.  
  12. //wywolywana przy opuszczaniu strony
  13. function saveStatus(){
  14. 	setCookie('panel', array2string(showStatus));
  15. }
  16.  
  17. function array2string(arr) {
  18.     var str;
  19.     for(i = 0; i<showCount; i++) {
  20.         str = str + showStatus[i] + ":";
  21.     }
  22.     return str;
  23. }
  24. function string2array(str){
  25. 	return arr = str.split(":");
  26. }
  27.  
  28. function setCookie(name, value) {
  29.     //If name is the empty string, it places a ; at the beginning
  30.     //of document.cookie, causing clearCookies() to malfunction.
  31.     if(name != '')
  32.     document.cookie = name + '=' + value;
  33. }
  34.  
  35. function getCookie(name) {
  36.     //Without this, it will return the first value 
  37.     //in document.cookie when name is the empty string.
  38.     if(name == '')
  39.     return('');
  40.  
  41.     name_index = document.cookie.indexOf(name + '=');
  42.  
  43.     if(name_index == -1)
  44.     return('');
  45.  
  46.     cookie_value =  document.cookie.substr(name_index + name.length + 1,
  47.     document.cookie.length);
  48.  
  49.     //All cookie name-value pairs end with a semi-colon, except the last one.
  50.     end_of_cookie = cookie_value.indexOf(';');
  51.     if(end_of_cookie != -1)
  52.     cookie_value = cookie_value.substr(0, end_of_cookie);
  53.  
  54.     //Restores all the blank spaces.
  55.     space = cookie_value.indexOf('+');
  56.     while(space != -1) {
  57.         cookie_value = cookie_value.substr(0, space) + ' ' +
  58.         cookie_value.substr(space + 1, cookie_value.length);
  59.  
  60.         space = cookie_value.indexOf('+');
  61.     }
  62.  
  63.     return(cookie_value);
  64. }
  65.  
  66.  
  67. //Status paneli zostaje zapisany w tabeli
  68. //table2array
  69.  
  70. function panelsStatus2Table() {
  71.     if(!document.getElementById)return;
  72.  
  73.     for(var i=0; i<showCount; i++)
  74.     if(document.getElementById("show"+(i+1)).style.display=="none")
  75.     showStatus[i]=0;
  76.     else
  77.     showStatus[i]=1;
  78. }
  79.  
  80. //Status paneli zostaje ustawiony wg danych w tabeli
  81. //array2table
  82.  
  83. function table2PanelsStatus() {
  84.     if(!document.getElementById)return;
  85.  
  86.     for(var i=0; i<showCount; i++)
  87.     if(showStatus[i]==0)document.getElementById("show"+(i+1)).style.display="none";
  88.     else document.getElementById("show"+(i+1)).style.display="";
  89. }
  90.  
  91. //Pokaz/schowaj zawartosc
  92. //show-hide
  93.  
  94. function showHidden(id) {
  95.     if(!document.getElementById)return;
  96.  
  97.     element=document.getElementById(id);
  98.     if(element.style.display=="none")
  99.     element.style.display="";
  100.     else
  101.     element.style.display="none";
  102. }
  103.  
  104. //-->
  105.  
  106. </script>
  107. </head>
  108. <body onload="loadStatus(); table2PanelsStatus()" onunload=" panelsStatus2Table(); saveStatus();">
  109.  
  110.  
  111. <table width="210" cellspacing="0" cellpadding="0" border="0">
  112.  
  113. <tr><td class="panel_nav" onclick="showHidden('show1');">&raquo; Nagłówek</td></tr>
  114. <tr id="show1"><td class="panel_con">
  115. Zawartość</td></tr>
  116.  
  117. <tr><td class="panel_nav" onclick="showHidden('show2');">&raquo; Nagłówek</td></tr>
  118. <tr id="show2"><td class="panel_con">
  119. Zawartość
  120. </td></tr>
  121.  
  122. <tr><td class="panel_nav" onclick="showHidden('show3');">&raquo; Nagłówek</td></tr>
  123. <tr id="show3"><td class="panel_con">
  124. Zawartość</td></tr>
  125. </table>
[HTML] pobierz, plaintext

Nie mogę dojść czemu.

EDIT:
Kiedy w linię:
[HTML] pobierz, plaintext 
  1. if(showStatus[i]==0)document.getElementById("show"+(i+1)).style.display="none";
[HTML] pobierz, plaintext

zamienię na:
[HTML] pobierz, plaintext 
  1. if(showStatus[i]==0)document.getElementById("show"+(i)).style.display="none";
[HTML] pobierz, plaintext

to użycie panelu 2 ustawia stan panelu 1, a panelu 3 - panelu 2, ale wtedy panel 1 "działa" smile.gif
Draugfor
6.06.2005, 20:29:13
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";
onlyX
6.06.2005, 21:09:55
Wow, Draugfor. jesteś mistrzem. Jeszcze jak mi powiesz dlaczego akurat dla tego jednego panelu nie działało, a dla innych tak, to będę ci wdzięczny przez następne 2 min. smile.gif

A tak na serio, to wielkie dzięki.

PS. Jeśli dobrze kapuję, aby niektóre panele były domyślnie schowane wystarczy dodać w style"display.none" do danego elementu.
Draugfor
6.06.2005, 22:08:17
Mam ochote na jeszcze 2 minuty. cool.gif

Nie dzialalo, bo zmienna str nie byla zadeklarowana przy definicji.
Zawsze jak masz cos takiego:
Kod
var str;
str=str+cokolwiek;

to rodzi to problem, bo co wlasciwie jest w zmiennej str? Najczesciej smieci.
Dlatego Ty miales problem - bo byly smieci, a konkretnie wartosc JS zwana NaN - Not a Number.
Wystarczylo "wyzerowac" na poczatku zmienna str - nadac jej wartosc pustego ciagu i po herbacie.
Przed dokonaniem tej poprawki JS zapisywalo w cookie cos takiego
NaN: 1: 1
A po
1: 1: 1
(lub zera).

Ad. PS. - tak. Mozesz oczywiscie napisac wlasna funkcje, ktora przy <body onload[...]> poustawia styl poszczegolnych paneli.

Pozdrawiam. smile.gif
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.