Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> jQuery, i mały problem
Manwe89
post
Post #1





Grupa: Zarejestrowani
Postów: 81
Pomógł: 3
Dołączył: 28.10.2008
Skąd: Łuków

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


Otóż mam menu:
  1. <div id="menu">
  2. <ul>
  3. <li>
  4. <a id="link1" href='#'>Element 1</a>
  5. <ul class="submenu" id="sub1">
  6. <li><a href="#">Jeden</a></li>
  7. <li><a href="#">Dwa</a></li>
  8. <li><a href="#">Trzy</a></li>
  9. </ul>
  10. </li>
  11. <li>
  12. <a id="link2" href='#'>Element 2</a>
  13. <ul class="submenu" id="sub2">
  14. <li><a href="#">Jeden</a></li>
  15. <li><a href="#">Dwa</a></li>
  16. <li><a href="#">Trzy</a></li>
  17. </ul>
  18. </li>
  19. <li>
  20. <a id="link3" href='#'>Element 3</a>
  21. <ul class="submenu" id="sub3">
  22. <li><a href="#">Jeden</a></li>
  23. <li><a href="#">Dwa</a></li>
  24. <li><a href="#">Trzy</a></li>
  25. </ul>
  26. </li>
  27. <li>
  28. <a id="link4" href='#'>Element 4</a>
  29. <ul class="submenu" id="sub4">
  30. <li><a href="#">Jeden</a></li>
  31. <li><a href="#">Dwa</a></li>
  32. <li><a href="#">Trzy</a></li>
  33. </ul>
  34. </li>
  35. </ul>
  36. </div>


no i teraz mam pytanie. Jak zrobic w jQuery taki myk, zeby po kliknieciu powiedzmy w link1 rozwinelo sie submenu o id sub1, w link2 -> sub2 itd. rekurencyjnie. Budowanie w jQuery oddzielnego kodu dla kazdego przypadku zwieksza wage skryptu. Biorac pod uwage fakt ze jest to tylko szkielet musze brac na poprawke mozliwosc znacznego rozbudowania. Wszyscy mowili ze jQuery jest takie fajne (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) w czystym js daloby rade napisac funkcje ktora by to robila ze wzgl na podane parametry. Czy w jQuery da rade zrobic cos podobnego? Czy pozostaje mi tylko budowa funkcji w js, ktora bedzie tworzyla odpowiednie wywolanie funkcji w jQuery?
Go to the top of the page
+Quote Post
erix
post
Post #2





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




Cytat
Wszyscy mowili ze jQuery jest takie fajne

I jest fajne, tylko trzeba zrozumieć, w jaki sposób możesz poruszać się po drzewie DOM.

Cytat
zeby po kliknieciu powiedzmy w link1 rozwinelo sie submenu o id sub1, w link2 -> sub2 itd. rekurencyjnie.

W Twoim przypadku, to nie jest rekurencja, tylko takie podpinanie zdarzeń, aby nie było potrzeby pisania uchwytu dla każdego linka z osobna.

Z palca:
Kod
$(document).ready(function(){
   $('#menu > a').click(function(e){
      e.preventDefault();
      $(this).parent().find('u').slideDown();
   });
});
Go to the top of the page
+Quote Post
Manwe89
post
Post #3





Grupa: Zarejestrowani
Postów: 81
Pomógł: 3
Dołączył: 28.10.2008
Skąd: Łuków

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


teraz sztuka polega na tym zeby zrozumiec (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
tak wiec po kliknieciu wywolywana jest funkcja do której jest przekazywane zdarzenie.
preventDefault? anuluje zdarzenie jesli to mozliwe... po co to?
$(this) -> wskazuje na wybrany element
.parent() -> po co?
.find('u') -> czaje
.slideDown() czaje (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
kubetson
post
Post #4





Grupa: Zarejestrowani
Postów: 7
Pomógł: 1
Dołączył: 1.04.2009

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


Kod
preventDefault? anuluje zdarzenie jesli to mozliwe... po co to?


To zapobiega realizacji domyślnej funkcji zdarzenia, czyli przejścia do linku. W Twoim przypadku jest to "#", a to chyba może działać tak, że będzie Cie przenosić na samą górę strony, a tego nie chcemy
Go to the top of the page
+Quote Post
Manwe89
post
Post #5





Grupa: Zarejestrowani
Postów: 81
Pomógł: 3
Dołączył: 28.10.2008
Skąd: Łuków

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


yhm (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) dosyc ciekawe (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) jeszcze enigmatyczna kwestia jest tylko dla mnie po co ten parent()? (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

Cytat(erix @ 2.04.2009, 12:08:39 ) *
Z palca:
Kod
$(document).ready(function(){
      $('#menu > a').click(function(e){
         e.preventDefault();
         $(this).parent().find('u').slideDown();
      });
   });


zmieniłem na:
Kod
$(document).ready(function(){
      $('#menu > ul > li> a').click(function(e){
         e.preventDefault();
         $(this).parent().find('ul').slideDown();
      });
   });


i juz smiga (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) dziekowa (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

a na sam koniec zrobilem tak:
Kod
$(document).ready(function(){
    $('#menu > ul > li> a').toggle(
     function(e){
        e.preventDefault();
        $(this).parent().find('ul').slideDown();
     },
     function(e){
       e.patrentDefault();
       $(this).parent().find('ul').slideUp();
     })
});

i działa we dwie strony (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
i jeszcze jedno pytanko. Bo kiedy zrobie tak:
Kod
$(document).ready(function(){
    $('#menu > ul > li> a').toggle(
     function(e){
        e.preventDefault();
       $('#menu > ul > li > ul').slideUp();
        $(this).parent().find('ul').slideDown();
     },
     function(e){
       e.patrentDefault();
       $(this).parent().find('ul').slideUp();
     })
});

to nie zawsze dziala rozwijanie. Tzn. kidy klikam na <li>ponizsze to ladnie, a kiedy na <li> wyzsze od aktualnie kliknietego to dopiro za drugim razem dziala. Jak mam "wyrzucic" z slideUp aktualnie kliknietego <li>?

Ten post edytował Manwe89 2.04.2009, 12:36:55
Go to the top of the page
+Quote Post
erix
post
Post #6





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




Kod
i juz smiga  dziekowa

Literówka; miałem na myśli listę.

Cytat
to nie zawsze dziala rozwijanie. Tzn. kidy klikam na <li>ponizsze to ladnie, a kiedy na <li> wyzsze od aktualnie kliknietego to dopiro za drugim razem dziala. Jak mam "wyrzucic" z slideUp aktualnie kliknietego <li>?

Strzelam, że jest to powiązane z selektorami. > nakazuje przeszukiwanie dla najbliższego podrzędnego poziomu, a bez tego selektora - wszystkie dzieci o takim tagu; nawet "dzieci dzieci". (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post

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: 22.09.2025 - 02:30