Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JS] chowanie elementów
Edpl
post
Post #1





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 6.05.2006

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

Witam,
w panelu administracyjnym systemu który obecnie pisze, korzystam z formularzy i innych elementów strony posiadających "display=none" i pokazujących się dopiero po kliknięciu w jakiś link. Chciałbym żeby przy rozwinięciu którejś opcji, ta poprzednio otwarta się chowała.
Jak to zrobić najlepiej? Możnaby chować wszystkie elementy posiadające zdefiniowane 'id' o obojętnej wartości (jak?). Tu pojawia się problem z planowanym wprowadzeniem CSS'a... wtedy chowała by mi się większość strony... jak to rozwiązać lepiej?

Zaznaczam, że w javascripcie jestem zielony.


--------------------
hardware: HP Compaq 6720s
software: ArchLinux, 2.6.29, KDE 4.3 beta 2, Kate
Go to the top of the page
+Quote Post
#luq
post
Post #2





Grupa: Zarejestrowani
Postów: 589
Pomógł: 91
Dołączył: 22.05.2008
Skąd: Gliwice

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

Zrobić sobie obiekt do tego celu.
W jednej właściwości będzie przechowywany aktualnie otwarty element (lub jego id).
Metoda close() zamykająca aktualnie otwarte, oraz metoda open() w której najpierw jest wywołana metoda close() a później "otwierany" jest element podany jako parametr.


--------------------
Moja gra - scraby.io
Go to the top of the page
+Quote Post
erix
post
Post #3





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
A po co?

Jest przecież selektor: warstwa:visible [;


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Edpl
post
Post #4





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 6.05.2006

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

Pomysł dobry, dziwie sie, że wcześniej nie wpadlem na to... ale jak zrealizowac? chcialem podobnie na 'zmiennych' (przypominam ze w java scripcie jestem zielony i nawet nie wiem czy sie dobrze do tego zabieralem.
Mialem taki kod:

[HTML] pobierz, plaintext 
  1. <script language="JavaScript">
  2. <!--
  3. function show(parametr)
  4. // Function that will swap the display/no display for
  5. // all content within span tags
  6. {
  7. if (parametr.style.display == "none")
  8. {
  9. parametr.style.display = "";
  10. }
  11. else
  12. {
  13. parametr.style.display = "none";
  14. }
  15. }
  16. -->
  17. </script>
[HTML] pobierz, plaintext


Probowalem zrobic to tak:

[HTML] pobierz, plaintext 
  1. if (parametr.style.display == "none"){
  2. stary.style.display = "none";
  3. parametr.style.display = "";
  4. stary = parametr;
  5. }
[HTML] pobierz, plaintext


ale oczywiscie nie dziala... o obiektach nic nie wiem niestety.

Ten post edytował Edpl 20.06.2009, 22:11:38


--------------------
hardware: HP Compaq 6720s
software: ArchLinux, 2.6.29, KDE 4.3 beta 2, Kate
Go to the top of the page
+Quote Post
erix
post
Post #5





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Ja to robię mniej więcej tak. Załóżmy takie menu:
[HTML] pobierz, plaintext 
  1. <dl>
  2.     <dt>asd</dt>
  3.     <dd>sda</dd>
  4.  
  5.     <dt>asd</dt>
  6.     <dd>sda</dd>
  7.  
  8.     <dt>asd</dt>
  9.     <dd>sda</dd>
  10. </dl>
[HTML] pobierz, plaintext


<dd/> zawiera treść, są domyślnie ukryte.

Teraz JS:
Kod
$('dl dt').click(function(e){
  e.preventDefault();
  $(this).parent()
    .find('dd:visible').slideUp()
    .end().next().slideDown();
}

Przyznam, że ostatnio spodobały mi się konstrukcje bazujące na uchwytach zdarzeń (e), o tym poczytaj gdzieś, gdzie opisany jest DOM; IMHO to dużo bardziej eleganckie rozwiązanie niż zwykłe return false. Co dalej?

Bieżący uchwyt, to kotwica rozwijająco-chowająca, czyli wyzwalacz zdarzeń. Po kolei: wskakuje na poziom rodzica i wyszukuje w nim wszystkie widoczne warstwy treści, po czym je zwija. Następnie wraca "do siebie" (za pomocą czego, to sprawdź w dokumentacji) i szuka swojego sąsiada, którego rozwija. [;

Jak widzisz, całego potworka można zapisać w postaci wywoływania metod łańcuchowych obiektu jQuery i m.in. dlatego jest on taki za...jefajny. [;

A jak to dostosować do Twojego kodu? Zadanie domowe. [;


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Edpl
post
Post #6





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 6.05.2006

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

a ja jednak pierwszy pomysł doprowadziłem do działania;)
Twój sposób erix był zbyt niezrozumiały dla kogoś kto w ogóle się nie interesuje javascriptem, bo używa go naprawde sporadycznie;)

mój kod wygląda tak:

[PHP] pobierz, plaintext 
  1. <?php
  2. function show(parametr)
  3. {
  4. if (parametr.style.display == "none")
  5. {
  6.   if (typeof(stary) == "undefined"){
  7.   } else {
  8.     stary.style.display = "none";
  9.   }
  10.   parametr.style.display = "";
  11.   stary = document.getElementById(parametr.id);
  12. }
  13. else
  14. {
  15. parametr.style.display = "none";
  16. }
  17. }
  18. ?>
[PHP] pobierz, plaintext


--------------------
hardware: HP Compaq 6720s
software: ArchLinux, 2.6.29, KDE 4.3 beta 2, Kate
Go to the top of the page
+Quote Post
erix
post
Post #7





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Cytat
Twój sposób erix był zbyt niezrozumiały dla kogoś kto w ogóle się nie interesuje javascriptem, bo używa go naprawde sporadycznie;)

Po przeczytaniu kursu JavaScript, pobieżnym przejrzeniu dokumentacji DOM nie powinno być problemów. [;


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

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

 

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

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

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