Witajcie w kolejnej części kursu jQuery. Skoro potrafimy zainstalować jQuery i napisać proste funkcje, a także potrafimy już swobodnie używać funkcji fade, slide oraz show/hide, zademonstruje jak w prosty sposób ułatwiać sobie życie przy budowaniu aplikacji z części drugiej kursu.
Czego dowiesz się z artykułu?
- jak wykorzystać funkcję toggle()
- jak wykorzystać funkcję toggleClass()
Metody toggle() oraz toggleClass()
Dzisiejszą część kursu jQuery zacznijmy od pokazania, jak możemy sobie ułatwić życie przy konstruowaniu listy podobnej do pokazanej w drugiej części kursu jQuery.
Ostatecznie stworzyliśmy listę wiadomości, których pełen tekst był widoczny po kliknięciu, a same wiadomości były pokazywane i ukrywane za pomocą różnych metod jQuery.
Efekt końcowy drugiej części kursu jQuery
A gdyby tak zastąpić 2 przyciski do zwijania i rozwijania pełnej treści i zastąpić je jednym? Tutaj właśnie pomocna staje się inna funkcja jQuery – toggle(). Funkcja ta, jak sama nazwa wskazuje służy do przełączania – w tym przypadku widoczności obiektu do którego się odnosi.
Do zademonstrowania możliwości funkcji toggle(), posłużmy się przykładem, na którym skończyliśmy część drugą kursu jQuery. Zacznijmy od zmiany poszczególnego bloku wiadomości, usuwając link „Rozwiń”, i zmieniając nazwę linku zwiń na „zwiń/rozwiń” oraz zmieniając dla tegoż linku klasę na „toggle”.
-
<div class="pojOne">
-
<div class="pojTop">
-
<a href="#" class="toggle">Zwiń/Rozwiń</a>
-
Pierwsza wiadomość
-
</div>
-
<div class="clear"></div>
-
<div class="pojBottom">
-
Treść pierwszej wiadomości demonstrująca w jaki sposób
-
wykorzystać funkcję z biblioteki jQuery
-
<b>toggle()</b>
-
</div>
-
</div>
Teraz pozostała tylko mała zmiana w JavaScript-cie. Dla każdego z linków „Zwiń/Rozwiń” ustawimy zdarzenie click w którym zdefiniujemy wykorzystanie funkcji toggle() na odpowiadające bloki pełnych wiadomości.
-
$(function(){
-
$("a.toggleOne").click(function(){
-
$(".pojOne .pojBottom").toggle();
-
});
-
-
$("a.toggleTwo").click(function(){
-
$(".pojTwo .pojBottom").toggle();
-
});
-
-
$("a.toggleThree").click(function(){
-
$(".pojThree .pojBottom").toggle();
-
});
-
});
Tym sposobem mamy uproszczoną wersję listy wiadomości.
Efekt końcowy przykładu wykorzystania funkcji toggle()
Oczywiści podobnie jak w przypadku fade, slide i show możemy jako parametr funkcji podać liczbę milisekund trwania animacji, jak również użyć predefiniowanych szybkości animacji: slow, normal i fast.
Podając inny parametr do każdej funkcji otrzymujemy:
-
$(function(){
-
$("a.toggleOne").click(function(){
-
$(".pojOne .pojBottom").toggle(1000);
-
});
-
-
$("a.toggleTwo").click(function(){
-
$(".pojTwo .pojBottom").toggle('fast');
-
});
-
-
$("a.toggleThree").click(function(){
-
$(".pojThree .pojBottom").toggle('normal');
-
});
-
});
Przykład wykorzystania funkcji toggle() z parametrami
Przypuśćmy jednak, że zamiast zmiany widoczności części głównej wiadomości, chcemy zmienić coś jeszcze, na przykład kolor tła nagłówka. Do tego celu posłuży nam inna funkcja jQuery, a mianowicie toggleClass(). Za jej pomocą możemy, nie tylko przełączać widoczność bloku jak to miało miejsce w przypadku metody toggle(), ale możemy dla danego elementu przełączać atrybut klasy, który zostaje nadany do elementu lub go pozbawiony. Zacznijmy jednak od zdefiniowania naszej dodatkowej klasy, która będzie nakładać na element tło czerwone, a kolor czcionki zmieni na biały.
-
.colorRed{
-
background-color:#ff0000;
-
color: #fff;
-
}
Dodatkowo w naszej metodzie JavaScript-owej dodajemy wywołanie metody toggleClass:
-
$("a.toggleOne").click(function(){
-
$(".pojOne .pojBottom").toggle(1000);
-
$(this.parentNode).toggleClass('colorRed');
-
});
Po wcześniejszym wywołaniem metody toggle() dodaliśmy wywołanie metody toggleClass(), jako parametr podając nazwę klasy, którą wcześniej zdefiniowaliśmy w naszym pliku css. Warto zauważyć, że selektor wykorzystany w przykładzie nieco różni się od tych przedstawianych do tej pory w kursie.
this określa nam element na którym została wywołana funkcja wewnątrz zdarzenia – w tym przypadku jest to element < a > z nadaną klasą „toggleOne”. Dodatkowo użycie parentNode powoduje wybranie elementu który jest bezpośrednim rodzicem elementu this. Szczegółowy opis filtrów i selektorów wykorzystywanych w jQuery zostanie rozpisany w dalszej części kursu jQuery.
Przykład wykorzystania funkcji toggleClass()
Oczywiście w tej części kursu została przedstawiona tylko idea wykorzystania metod toggle() i toggleClass(). W praktyce jednym z zastosowań metod jest opisany wyżej system wiadomości, ale metody te są szeroko wykorzystywane także w bardziej zaawansowany sposób.
Kolejna cześć kursu już niebawem, a w niej szczegółowo opiszę wykorzystanie funkcji animate().
Zapisz się na RSS by dowiadywać się o nowościach w serwisie!
2 komentarze do “Szybki kurs: godzina dziennie z jQuery #3 – toggle”
kurs świetny jednak mam jedno pytanie dlaczego zawsze przy uruchamianiu (kliknięciu na element) skryptu strona zawsze przeskakuje do góry. Chciałem użyć tych animacji do stworzenia rozwijanego menu bocznego jednak niezbyt się to sprawdza przez ten mały defekt. Tak po prostu jest w Jquery czy jest na to jakiś sposób.
Przy okazji Pozdrawiam kawał dobrej roboty i mówi to o ogólnie całym serwisie.
dzięki
Jeżeli chodzi o odpowiedz, to jest to domyślne zachowanie, więc wystarczy w zdarzeniu wywpłać: event.preventDefault();
np:
$(‘a’).click(function(event){
// obsługa zdarzenia click
event.preventDefault();
});
Opis znajdziesz na: http://blog.alchemycode.pl/2010/05/03/co-mozesz-zrobic-dla-swojego-jquery-wydajnosc/