W poprzedniej części wprowadzenia do jQuery poznaliśmy podstawy korzystania z tego frameworka, takie jak używanie selektorów czy poruszanie się po DOM-ie. W niniejszym artykule przyjrzymy się pozostałym zagadnieniom, bez których nie sposób wykorzystać w pełni bogatych możliwości jQuery.
Zasadniczą rolą, jaką pełni JavaScript na stronach internetowych, jest obsługa zdarzeń
i wywoływanie przypisanych do nich akcji.
Jest to podstawowe rozszerzenie statycznych
dokumentów HTML o elementy dynamiczne,
umożliwiające nawiązywanie interakcji z użytkownikami.
Zdarzeniem może być np. kliknięcie,
aktywacja pola formularza czy naciśnięcie klawisza
na klawiaturze.
Jako webmaster masz kontrolę nad tym, co
dzieje się po wystąpieniu danej akcji – definiując
odpowiednie reguły. Możesz to zrobić, dodając
do elementów HTML atrybuty odpowiedzialne za
zdarzenia, np. w ten sposób:
Kliknij na mnie!
Albo na mnie!
Powyższy kod spowoduje zmianę koloru tekstu
zawartego w akapitach na czerwony po ich kliknięciu.
Zdecydowanie lepszym sposobem będzie
jednak nie dołączanie do kodu HTML atrybutów
odnoszących się do zdarzeń (jak tutaj \”onclick\”),
a zamiast tego umieszczenie odpowiedniej reguły
w zewnętrznym kodzie JavaScript.
Jest to właściwy sposób na separację struktury
dokumentu od warstwy zachowania. O ile w \”czystym\”
JavaScripcie osiągnięcie tego nie jest zbyt
proste (z uwagi na różnice w obsłudze odpowiednich
funkcji przez przeglądarki), o tyle korzystając
z jQuery, możemy dojść do tego w bardzo łatwy
sposób:
$(document).ready(function() {
$(\'.pk p\').click(function() {
$(this).css(\'color\', \'red\');
});
});
----------------------------
Kliknij na mnie!
Albo na mnie!
Zamiast umieszczać akcje wewnątrz elementów
\”p\” w kodzie HTML, sprawiliśmy, że po kliknięciu
na dowolny akapit będący potomkiem elementu
o klasie \”pk\”, wywołana zostanie metoda {stala}css(){/stala},
ustalająca kolor akapitu na czerwony. Zamiennikiem
atrybutu \”onclick\” jest tutaj metoda {stala}click(){/stala}
skojarzona ze zdarzeniem \”click\” – jednym z wielu
zdarzeń, które obsługuje jQuery.
Zwróć uwagę na użycie nowego obiektu \”this\” – jest to odwołanie
do elementu, który wywołał dane zdarzenie.
Załóżmy, że chcemy, aby tym razem kolor akapitów
został zmieniony po ich dwukrotnym kliknięciu
(tzw. dwukliku). Wszystko, czego potrzebujemy,
to zastąpienie obecnej metody {stala}click(){/stala} inną metodą
{stala}dblclick(){/stala}, powiązaną ze zdarzeniem \”dblclick\”:
$(document).ready(function() {
$(\'.pk p\').dblclick(function() {
$(this).css(\'color\', \'red\');
});
});
Przykładem ciekawej metody powiązanej
ze zdarzeniem może być {stala}toggle(){/stala}, która daje
w naszym przypadku możliwość przełączania
koloru tekstu akapitu w zależności od kolejności
kliknięcia na niego. W ten sposób możemy ustalić,
że po pierwszym kliknięciu tekst akapitu będzie
czerwony, a po kolejnym wróci do czarnego, po czym następne kliknięcie znowu będzie skutkowało
ustawieniem koloru czerwonego:
$(document).ready(function() {
$(\'.pk p\').toggle(function() {
$(this).css(\'color\', \'red\');
}, function() {
$(this).css(\'color\', \'black\');
});
});
W tym przypadku musimy dodać po przecinku
drugą funkcję, która spowoduje ustawienie dla
akapitu koloru czarnego. Sprawdzając działanie tego
kodu w przeglądarce, zwróć uwagę na to, że dla
każdego z dwóch akapitów ich stany zapamiętywane
są oddzielnie. Chcąc osiągnąć identyczny efekt w czystym
JavaScripcie, nie ucieklibyśmy od perspektywy
napisania znacznej ilości kodu. W jQuery możemy to
osiągnąć praktycznie bez żadnego wysiłku.
Przy okazji warto wspomnieć o kolejnej
metodzie: {stala}hover(){/stala}, która może zastąpić znane ci na
pewno zdarzenia \”mouseover\” i \”mouseout\”. Jej
użycie jest równie proste:
$(document).ready(function() {
$(\'.pk p\').hover(function() {
$(this).css(\'color\', \'red\');
}, function() {
$(this).css(\'color\', \'black\');
});
});
Tutaj również korzystamy z dwóch funkcji.
Pierwsza odpowiada za stan po najechaniu
kursorem na dany element, a drugi za stan po
jego opuszczeniu. Możemy użyć metody {stala}hover(){/stala} na
dowolnym elemencie jako zamiennika pseudoklasy
\”:hover\” w CSS, która nie jest w pełni obsługiwana
przez Internet Explorera.
Oczywiście nie musimy się ograniczać do
samych modyfikacji wizualnych, możliwych do
uzyskania w CSS. Spróbujmy za pomocą metody
{stala}hover(){/stala} osiągnąć efekt pojawiania się i znikania
dodatkowego akapitu, który domyślnie będzie
ukryty, a stanie się widoczny po najechaniu na
jeden z dwóch pozostałych.
Najpierw dodajmy dodatkowy element do kodu
HTML:
Najedź na mnie!
Albo na mnie!
Wtedy ja się pojawię!
W kodzie JavaScript powinniśmy na początku
ukryć ów nowy akapit, a potem dodać do metody
{stala}hover(){/stala} nowe funkcje, odkrywające i ukrywające
go. Skorzystamy z dwóch nowych metod: {stala}show(){/stala}
oraz {stala}hide(){/stala}.
Umożliwiają one, jak same nazwy
wskazują, ukrycie lub odkrycie danego elementu
(rysunek 1). Kod przedstawia się następująco:
$(document).ready(function() {
$(\'#poj\').hide();
$(\'.pk p\').hover(function() {
$(this).css(\'color\', \'red\');
$(\'#poj\').show();
}, function() {
$(this).css(\'color\', \'black\');
$(\'#poj\').hide();
});
});
Wywołanie metody {stala}hide(){/stala} na elemencie \”#poj\”
sprawi, że ten zostanie ukryty zaraz po tym, jak
zostanie załadowany model DOM dokumentu
i w praktyce będzie on od razu niewidoczny.
Nie wyczerpaliśmy jednak tematu. Warto
wspomnieć chociażby o możliwości zatrzymywania
efektów za pomocą metody stop() oraz kolejkowaniu
kolejnych kroków, składających się na całość
procesu animacji. Mając do dyspozycji bogactwo
rozszerzeń jQuery w zakresie dynamicznych zmian
wizualnych, jesteśmy w stanie tworzyć atrakcyjne
rozwiązania, które do niedawna kojarzone były
wyłącznie z animacjami flashowymi.
AJAX
Rozwiązania wykorzystujące komunikację
między serwisami internetowymi bez przeładowania
strony są dziś standardem. Framework jQuery
zdobył dużą popularność m.in. właśnie ze względu
na to, że oferuje proste i wygodne techniki implementacji
asynchronicznego przesyłu danych.
Za pomocą jQuery możemy w łatwy sposób
wstawić zawartość zewnętrznego pliku do dokumentu,
który wywołuje to żądanie. Służy do tego
metoda {stala}load(){/stala}, której działanie zaprezentowane
jest poniżej:
$(document).ready(function() {
$(\'#laduj\').load(\'laduj.html\');
});
----------------------------
Widzimy pusty element div i wywołanie
metody {stala}load(){/stala} z argumentem oznaczającym ścieżkę
do zewnętrznego pliku laduj.html. Plik ten zawiera
następującą treść:
Jestem z zewnątrz!
Cała operacja sprowadza się do umieszczenia
zawartości pliku do elementu o identyfikatorze
\”laduj\”. Za pomocą tej prostej konstrukcji jesteśmy
w stanie dynamicznie zmieniać treść dokumentu,
pobierając treść z zewnętrznych źródeł.
Spróbujmy dostosować menu użyte w jednym z poprzednich
przykładów, aby służyło do wczytywania zawartości
zewnętrznych plików. Kod HTML wyglądać
będzie w następujący sposób:
Wybierz pozycję z menu
W kodzie JavaScript umieszczamy odniesienie
do działania menu, wzbogacone o obsługę
zdarzenia \”click\”:
$(document).ready(function() {
$(\'#menu a\').hover(function() {
$(this).animate({width: \'160px\', opacity: 0.75, fontSize: \'17px\'}, 500 );}, function() {
$(this).stop().animate({width: \'120px\', opacity: 1, fontSize: \'13px\'}, 500 );}).click(function() {
$(\'#tresc\').load($(this).attr(\'href\'));
return false;
});
});
Za pomocą metody {stala}load(){/stala} do elementu
- \”{stala}#tresc{/stala}\” zostanie załadowana zawartość odpowiednich
plików – jej argumentem jest wartość - \”{stala}href{/stala}\” danego odsyłacza.
Tak więc w przypadku,
gdy klikniesz na pozycję \”jQuery\”, metoda
{stala}load(){/stala} przyjmie jako argument wartość \”jquery.html\” (taka jest bowiem wartość atrybutu \”href\”
pierwszej pozycji).
W ten sposób napisaliśmy
zwięzłą i uniwersalną konstrukcję. Dodanie \”return
false\” spowoduje anulowanie żądania przejścia do
strony, do której odnosi się pozycja w menu.
Warto zastanowić się, co się stanie, jeśli
będziemy chcieli otworzyć link z menu za pomocą
klawiatury lub na nowej karcie przeglądarki albo
gdy nasza przeglądarka nie będzie miała włączonej
obsługi JavaScript? W takich wypadkach
zostanie po prostu otworzony adres, do którego odnosi się odsyłacz – jest to więc przemyślane
rozwiązanie.
Oprócz metody {stala}load(){/stala}, jQuery zawiera sporo
innych wartościowych metod metod służących do
wygodnej wymiany danych z zewnętrznych źródeł.
Wymagają one współpracy skryptów po stronie
serwera, zatem nie będziemy ich tu przytaczać. Zachęcam
jednak do zapoznania się z nimi na stronie
dokumentacji jQuery.
Co dalej?
Tym samym kończymy nasze dwuczęściowe
wprowadzenie do frameworka jQuery. Oferuje on
szeroką gamę dodatkowych możliwości i zastosowań,
o których tu nie napisaliśmy, a które na
pewno odkryjesz sam.
Warto w tym celu zapoznać się z dokumentacją zawartą na stronie http://docs.jquery.com, jak i na innych stronach związanych
z rozszerzaniem standardowych możliwości
biblioteki. Duża liczba udostępnionych dodatków
do jQuery sprawia, że masz do dyspozycji potężne
narzędzie do wszechstronnego użycia. Życzymy
powodzenia w pracy z jQuery!
Efekty wizualne
Skoro jesteśmy już przy metodach {stala}show(){/stala}
i {stala}hide(){/stala}, nie sposób wspomnieć o możliwościach
tworzenia efektownych przejść i animacji w jQuery.
Dwie powyższe metody mogą przyjąć jako argumenty
wartości liczbowe (oznaczające milisekundy,
np. 1000, czyli jedną sekundę) lub zwyczajowe: \”slow\”, \”normal\” i \”fast\”. Służą one określeniu
czasu trwania przejścia ze stanu ukrytego do
widocznego i odwrotnie. Sprawdźmy, co się stanie,
kiedy dodamy do naszych metod przykładowe
argumenty:
$(document).ready(function() {
$(\'#poj\').hide();
$(\'.pk p\').hover(function() {
$(this).css(\'color\', \'red\');
$(\'#poj\').show(500);
}, function() {
$(this).css(\'color\', \'black\');
$(\'#poj\').hide(500);
});
});
Otrzymaliśmy w ten sposób efekt animacji trzeciego
akapitu, który, początkowo ukryty, pojawia
się, przyjmując docelowe wymiary. Cały proces
trwa, jak ustaliliśmy, pół sekundy.
Równie ciekawie prezentują się 2 kolejne
metody: {stala}slideDown(){/stala} oraz {stala}slideUp(){/stala}. Sprawiają one,
że docelowy element wysuwa się z góry i chowa.
Tym razem ustaliliśmy argumenty na \”normal\” dla
{stala}slideDown(){/stala} oraz \”fast\” dla {stala}slideUp(){/stala}. Spowoduje
to szybsze zanikanie elementu:
$(document).ready(function() {
$(\'#poj\').hide();
$(\'.pk p\').hover(function() {
$(this).css(\'color\', \'red\');
$(\'#poj\').slideDown(\'normal\');
}, function() {
$(this).css(\'color\', \'black\');
$(\'#poj\').slideUp(\'fast\');
});
});
Poznajmy jeszcze metody {stala}fadeIn(){/stala} oraz {stala}fadeOut(){/stala}, które służą do efektownej zmiany przezroczystości
elementu. Teraz nasz akapit przechodzi
łagodnie ze stanu ukrytego do widocznego:
$(document).ready(function() {
$(\'#poj\').hide();
$(\'.pk p\').hover(function() {
$(this).css(\'color\', \'red\');
$(\'#poj\').fadeIn(\'normal\');
}, function() {
$(this).css(\'color\', \'black\');
$(\'#poj\').fadeOut(\'normal\');
});
});
Mimo swojej prostoty, zaprezentowane
powyżej metody mogą być użyte do wywołania
interesujących efektów wizualnych. Dobrym
pomysłem będzie zademonstrowanie ich działania
na kolejnych przykładach.
Metody {stala}fadeIn(){/stala} i {stala}fadeOut(){/stala} możemy wykorzystać
m.in. do stworzenia efektu zmiany jednej
grafiki w drugą. Załóżmy, że mamy obrazek, po
najechaniu na który ma zmienić się on łagodnie
w drugi o tych samych wymiarach. Kod HTML dla
tego przykładu może wyglądać następująco:
![\"\"](\"img/1.jpg\")
![\"\"](\"img/2.jpg\")
W kodzie CSS pozycjonujemy oba obrazki tak,
aby wizualnie jeden zakrywał całkowicie drugi
(źródła CSS dołączono w materiałach do artykułu
na CD). Pozostaje już tylko napisać teraz odpowiedni
kod jQuery. Kluczem będzie tutaj zastosowanie
metody {stala}hover(){/stala}. Możemy spróbować w ten
sposób:
$(document).ready(function() {
$(\'#im img:last\').hide();
$(\'#im\').hover(function() {
$(this).find(\'img:first\').fadeOut(\'slow\');
$(this).find(\'img:last\').fadeIn(\'slow\');
}, function() {
$(this).find(\'img:last\').fadeOut(\'slow\');
$(this).find(\'img:first\').fadeIn(\'slow\');
});
});
Wstępnym krokiem jest tu ukrycie drugiego
obrazka. Korzystamy z dwóch grafik, zatem dla ułatwienia
będziemy tu operować selektorami \”{stala}:first{/stala}\” oraz \”{stala}:last{/stala}\”, oznaczającymi pierwszy i ostatni
(drugi w tym wypadku) pasujący element.
Następnie zdefiniowaliśmy akcje dla zdarzenia
najechania kursorem elementu obejmującego nasze
grafiki. Co się wtedy dzieje? Po najechaniu na
niego kursorem, brany jest pierwszy obrazek, a następnie
jest on łagodnie ukrywany – równocześnie
wtedy naszym oczom ukazuje się obrazek drugi.
Po zwolnieniu kursora z elementu wywoływana
jest akcja odwrotna – skutkująca tym, że ponownie
możemy zobaczyć nasz pierwotny obrazek. Całość
pokazano na rysunku 3.
Jest to prosty przykład, możemy jednak jeszcze
bardziej \”odchudzić\” jego kod. Jeśli śledziłeś
pierwszą część tego kursu, nie będziesz miał problemu
ze zrozumieniem poniższej konstrukcji:
$(document).ready(function() {
$(\'#im\').hover(function() {
$(this).find(\'img:first\').fadeOut(\'slow\').next().fadeIn(\'slow\');
}, function() {
$(this).find(\'img:last\').fadeOut(\'slow\').prev().fadeIn(\'slow\');
}).find(\'img:last\').hide();
});
Tym razem korzystanie z selektorów ograniczamy
do minimum, w zamian odwołując się do
metod {stala}next(){/stala} oraz {stala}prev(){/stala}, służących do wyszukania
elementów sąsiednich. Przenieśliśmy również polecenie
ukrycia ostatniego obrazka, dodając metodę
{stala}find(){/stala} do wybranego wcześniej elementu \”{stala}#im{/stala}\”.
W ten sposób nasz kod jest jeszcze prostszy.
Czas poeksperymentować z innymi metodami
efektów. Spróbujemy teraz zastosować metody
{stala}slideDown(){/stala} oraz {stala}slideUp(){/stala}:
$(document).ready(function() {
$(\'#im\').hover(function() {
$(this).find(\'img:first\').slideUp(\'slow\').next().slideDown(\'slow\');
}, function() {
$(this).find(\'img:last\').slideUp(\'slow\').prev().slideDown(\'slow\');
}).find(\'img:last\').hide();
});
Uzyskaliśmy dość oryginalny efekt wysuwania
i chowania grafik, przypominający nieco akcję
w trójwymiarze. Nie jest to może zbyt użyteczny
przykład, jednak pokazuje, że jQuery oferuje
bogate możliwości, których wykorzystanie zależy
jedynie od twojej inwencji.
Jeśli uważasz, że to niewiele, czas poznać
kolejną, najbardziej wszechstronną metodę do
tworzenia efektów: {stala}animate(){/stala}. Za jej pomocą
będziesz w stanie wyreżyserować własne efekty,
mając wpływ na takie parametry, jak położenie
elementu, jego wymiary czy przezroczystość.
Stwórzmy blok o wymiarach kwadratu:
W stylach CSS ustawiamy rozmiary naszego
diva i kolor tła. Mając to gotowe, spróbujmy wywołać
prostą animację, która zostanie wywołana
po kliknięciu w element.
$(document).ready(function() {
$(\'#k\').click(function() {
$(this).animate({
width: \'100px\',
height: \'100px\',
top: \'150px\',
left: \'300px\',
opacity: 0.5
}, 1500);
});
});
Metoda {stala}animate(){/stala} przyjmuje dwa argumenty:
opcje animacji (zmiany dotyczące samego elementu
w formie \”właściwość: jednostka\”) oraz czas
trwania animacji. Ustaliliśmy wartość drugiego
argumentu na półtorej sekundy. Sama animacja
przedstawia natomiast przejście bloku do stanu,
w którym jest oddalony o ustalone jednostki długości
od pozycji początkowej, a także ma zmienione
wymiary i nadaną częściową przezroczystość.
Następnym zadaniem będzie stworzenie menu,
którego elementy rozszerzają się po najechaniu na
nie kursorem myszy. Możemy także poddać płynnej
zmianie takie właściwości jak wielkość czcionki
bądź odstępy – właściwości te powinny dać wyrazić
się w jednostkach liczbowych.
Domyślnie jQuery nie obsługuje płynnego
przechodzenia innych właściwości, np. koloru
tła, chociaż służy do tego oficjalne rozszerzenie.
Wracając do przykładu, nasz kod HTML wygląda
następująco:
Mamy kilka pozycji w menu, odpowiednio ostylowanych.
Powinniśmy teraz rozpisać zachowanie
elementów po znalezieniu się nad nimi kursora:
$(document).ready(function() {
$(\'#menu a\').hover(function() {
$(this).animate({width: \'160px\',opacity: 0.75, fontSize: \'17px\'}, 500 );}, function() {
$(this).animate({width: \'120px\',opacity: 1,fontSize: \'13px\'}, 500 );
});
});
W efekcie powinniśmy otrzymać proste,
lecz efektowne w działaniu menu, widoczne na
rysunku 5.
