JavaScript - framework jQuery - pokazywanie i ukrywanie elementów, funkcje toggle, show i hide

Kod:

Ewentualne Objaśnienia:

Chciałbym teraz przez kilka "lekcji" zająć się tematyką fremework'a JavaScript o nazwie jQuery (do pobrania http://jquery.com/ - dołączamy bibliotekę do strony analogicznie jak zewnętrzne skrypty JS). Nie będę tutaj robił jakiegoś specjalnego wstępu do tego zagadnienia - odsyłam np. do wikipedii http://pl.wikipedia.org/wiki/Framework . Również w sieci znajdziecie sporo dyskusji "za i przeciw" używaniu framework'ów, czy też na tematy wyższości jednego nad drugim. Moim zdaniem to bardzo przydatne narzędzia i warto je poznawać, opanowywać, ale też nie wolno sądzić, że można pominąć naukę JS (czy innego języka) od podstaw i korzystać tylko z rozwiązań gotowych. Również trzeba sobie zdawać, że do pewnych zadań po prostu nie opłacalne jest ładowanie tych kilkudziesięciu KB z punktu widzenia tego co chcemy zrobić. Ale przejdźmy do konkretów.

Tutaj mamy przykład 4 linków, których zadaniem jest chowanie/odkrywanie danego elementu (tutaj jest to jakiś tam niby news). W "czystym" JS zrobilibyśmy to po po prostu zmieniając wartość display czy też visibility dla danego elementu. Najkrócej zrobilibyśmy linki typu :

<a href="#" onclick="document.getElementyById('jakiesis').style.display='block';">pokaż</a>

<a href="#" onclick="document.getElementyById('jakiesis').style.display='none';">ukryj</a>

czy też na przykład napisalibyśmy funkcję, w której przekazujemy id elementu, który chcemy schować/ukryć i dalej sprawdzali czy jest ukryty czy też nie i zależnie od tego go ukrywali/pokazywali. No i oczywiście jeśli chcielibyśmy zrobić to wszystko zgodnie z pewnymi standardami to tego kodu byłoby więcej (przypisywanie akcji do elementów po załadowaniu dokumentu itd. - jeśli nie kojarzysz to zapraszam tutaj ).

Mniejsza z tym wszyscy zdajemy sobie sprawę jak należałoby to zrobić. Przy pomocy jQuery można to zrobić zdecydowanie szybciej (w sensie mniejszej ilości kodu), a dodatkowo możemy uzyskać ciekawy efekt. Jak widzieć w tym przykładzie news odsłania się stopniowo - mamy wrażenie pewnej animacji - jest ona zależna od parametru zwyczajnej funkcji - wystarczy ją odpowiednio ustawić, a pomyśl ile musiałbyś się "nakodować", żeby to zrobić od zera (oczywiście warto sobie zdawać sprawę jak można coś takiego zrobić chociaż teoretycznie, bo jak wspominałem wiedza z zakresu JS jest bardzo potrzebna, czasem framework po prostu akurat nie przyda się nam do danego rozwiązania i co wtedy ? Dlatego warto samemu pokombinować i spróbować w ramach ćwiczeń samemu popisać różne takie "cudeńka" ).

Przejdźmy więc już do kodu - mamy 5 linków, które ukrywają/pokazują nasz news (czyli element p o id "news"). Pierwsze 3 mają nadane akcję (click) w ten nazwijmy to "porządny" sposób, natomiast czwarty "po staremu" aby pokazać, że tak również można to zrobić (a o 5 na końcu).
Pierwszą sprawą jest funkcja $() - wygląda dziwnie prawda ? Odpowiedzialna jest ona za "pobranie" elementu o danym id czy też klasie (analogicznie jak zapis w CSS # lub .). Zamierzamy więc nadać naszym 3 pierwszym linką pewne czynności zaraz po wczytaniu tagów dokumentu (w sensie strony) czyli w JS pisalibyśmy :

document.DOMContentLoaded = function() {// tutaj nasze konkretne instrukcji przypisania akcji do elementów w momencie danego zdarzenia }

W jQuery do tego korzystamy z zapisu : $(document).ready() i następnie pobieramy w znany nam już sposób elementu o id link1 (analogicznie link2 i link3) oraz z racji, że chcemy przypisać akcję na zdarzenie kliknięcia piszemy konstrukcję typu :

$(link1).click( function { // co ma się dziać w momencie kliknięcia} );

Tak samo robimy dla każdego z 3 linków, następnie pobieramy element o id 'news' i dla niego korzystamy z 3 funkcji jQuery (inna dla każdego z linków) są to funkcje :
- toggle - ukrywa bądź pokazuje element (sama sprawdza czy trzeba ukryć czy też pokazać)
- show - jak nazwa wskazuje pokazuje element
- hide - ukrywa

Dla każdej z tych 3 funkcji możemy podać 2 argumenty - pierwszy określa szybkość animacji (zwijania, rozwijania elementu) czyli : slow, normal, fast lub jakaś wartość w milisekundach. Natomiast drugi argument (nie jest konieczny) określa funkcję, która ma zostać wywołana po wykonaniu tej głównej funkcji (toggle, show czy hide) - w tym przypadku są to po prostu jakieś tam alerty.

4 link to tak jak w 1 linku użycie toggle, ale jak to nazwałem "po staremu". Jeśli chodzi o link nr.5 to analogicznie jak link1 korzysta on z funkcji toggle, ale również zależnie od kliknięcia (parzyste czy też nie) zmienia się po prostu tekst tego linka. Uzyskaliśmy to dzięki użyciu funkcji która nazywa się... toggle - pozwala ona wykonać jakieś działanie w momencie parzystego i nieparzystego kliknięcia, co zapisujemy :

$(link).click( function {} ).toggle(function() { // kl. nieparzyste}, function() { //kl parzyste});

Nie musieliśmy korzystać np z metody innerHTML wystarczyło użyć metody jQuery 'text' (prawda jak łatwo ?) - dzięki temu zależnie od parzystego/nieparzystego kliknięcia zmieniany jest tekst naszego 5 linku. Zauważ również, że nie musimy w momencie zmieniana tego tekstu pisać ponownie $("#link5") ale wystarczy zapis $(this) ponieważ to właśnie dla elementu o id 'link5' nadajemy zdarzenia dla kliknięcia.

Przykład prosty, ale myślę, że pokazuje pewną przyjemność używania jQuery. Na jego podstawie można stworzyć np. jakieś eleganckie menu zakładkowe ;)

P.S. Nie ukrywam, że znając już w jakimś stopniu JS, samego jQuery zacząłem pierw się uczyć przeglądając i analizując przykłady z bloga ferrante - http://ferrante.pl/category/tech/jquery/ dlatego też pewne przykłady będą tutaj podobne (może nawet bardzo) więc uprzejmie informuje, że nie jest to żadna próba plagiatu :-)