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
onlyX
post
Post #2





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

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

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" (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował onlyX 6.06.2005, 16:12:19
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: 14.10.2025 - 13:36
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn