Nie utrudniaj sobie życia skorzystaj z biblioteki jquery! Abecadło, czyli jak korzystać z dobrodziejstw biblioteki jquery Interfejs API biblioteki

Transkrypt

1 Nie utrudniaj sobie życia skorzystaj z biblioteki jquery! Abecadło, czyli jak korzystać z dobrodziejstw biblioteki jquery Interfejs API biblioteki jquery, czyli gdzie szukać zaawansowanych rozwiązań Wtyczki, czyli o co jeszcze warto rozszerzyć dostępne możliwości

2 JQuery. Poradnik programisty Autor: W³odzimierz Gajda ISBN: Format: , stron: 288 Nie utrudniaj sobie ycia skorzystaj z biblioteki jquery! Abecad³o, czyli jak korzystaæ z dobrodziejstw biblioteki jquery Interfejs API biblioteki jquery, czyli gdzie szukaæ zaawansowanych rozwi¹zañ Wtyczki, czyli o co jeszcze warto rozszerzyæ dostêpne mo liwoœci Biblioteka jquery, zarówno w wersji pe³nej, jak i zminimalizowanej, pozwala programiœcie znacz¹co uproœciæ pracê i stopieñ skomplikowania kodu tworzonego w jêzyku JavaScript. Korzystaj¹c z jej mo liwoœci, programista mo e zmieniaæ atrybuty, modyfikowaæ wygl¹d poszczególnych elementów strony, dodawaæ lub usuwaæ elementy drzewa DOM. Mo e te wykonaæ zapytania Ajax, stosowaæ efekty specjalne, obs³u yæ typowe i nietypowe zdarzenia, a tak e pos³u yæ siê ró nymi wtyczkami, czêsto znacz¹co rozszerzaj¹cymi funkcjonalnoœæ kodu. Ksi¹ ka jquery. Poradnik programisty to doskona³e kompendium wiedzy na temat tej biblioteki. Dowiesz siê st¹d, jak rozpocz¹æ pracê z jquery, jak obchodziæ siê z selektorami i atrybutami, manipulowaæ modelem DOM czy przypisywaæ wybrany styl do okreœlonych elementów strony. Nauczysz siê stosowaæ funkcjê jquery, filtry i operacje na zbiorach elementów. Poznasz tak e rodzaje i sposób dzia³ania wtyczek, sam zaczniesz je tworzyæ, minimalizowaæ i kompresowaæ. Jeœli interesuje Ciê programowanie z wykorzystaniem mo liwoœci oferowanych przez JavaScript, a nie chcesz spêdzaæ wielu godzin na bezpoœrednim wpisywaniu skomplikowanego kodu, biblioteka jquery jest w³aœnie dla Ciebie! Korzystanie z biblioteki jquery Trzy warstwy dokumentu XHTML: struktura, wygl¹d i zachowanie Selektory CSS i zdarzenia XHTML Modyfikacja wygl¹du, odczyt i modyfikacja treœci elementów Odczyt i modyfikacja atrybutów Dodawanie i usuwanie wêz³ów drzewa DOM, wêdrówka po drzewie DOM Zbiory wêz³ów, tworzenie i usuwanie wêz³ów w drzewie DOM Efekty specjalne Funkcja jquery() w skrócie $() Odczyt i modyfikacja wêz³ów drzewa DOM Operacje przekszta³caj¹ce zbiór elementów Parametry wtyczek, ich tworzenie, minimalizacja i kompresja Wykorzystaj szanse, jakie daje Ci biblioteka jquery!

3 Spis tre ci Cz I Abecad o... 5 Rozdzia 1. Korzystanie z biblioteki jquery... 7 Poprawno osadzania kodu JavaScript w dokumentach HTML i XHTML Rozdzia 2. Trzy warstwy dokumentu XHTML: struktura, wygl d i zachowanie Rozdzia 3. Selektory CSS i zdarzenia XHTML Rozdzia 4. Modyfikacja wygl du elementów Rozdzia 5. Odczyt i modyfikacja tre ci elementów Rozdzia 6. Odczyt i modyfikacja atrybutów Rozdzia 7. Dodawanie i usuwanie w z ów drzewa DOM Rozdzia 8. W drówka po drzewie DOM Rozdzia 9. Zbiory w z ów Rozdzia 10. Ajax Rozdzia 11. Efekty specjalne Rozdzia 12. Co powiniene zapami ta z pierwszej cz ci? Cz II Interfejs API biblioteki jquery Rozdzia 13. Funkcja jquery() w skrócie $() Wywo anie $(funkcja) Wywo anie $(kod XHTML) Wywo anie $(selektor) Wywo anie $(element DOM) Wynik funkcji $ Tworzenie w z ów tekstowych Funkcje i metody statyczne Rozdzia 14. Selektory Zestawienie selektorów filtruj cych U ycie selektorów Wyst powanie selektorów

4 4 jquery. Poradnik programisty Rozdzia 15. Odczyt i modyfikacja w z ów drzewa DOM Rozszerzona sk adnia metod dost pu do w z ów Pe ne zestawienie metod dost pu do w z ów Rozdzia 16. Tworzenie i usuwanie w z ów w drzewie DOM Klonowanie w z ów Usuwanie w z ów Wymiana w z ów Zawijanie w z ów Rozdzia 17. Operacje przekszta caj ce zbiór elementów Dodawanie w z ów do zbioru Operacja cofnij Filtrowanie Zliczanie elementów zbioru Przodkowie, potomkowie i rodze stwo Przetwarzanie w z ów tekstowych Rozdzia 18. Co powiniene zapami ta z drugiej cz ci? Cz III Wtyczki Rozdzia 19. Pierwsza wtyczka Wywo anie wtyczki czenie biblioteki jquery z innymi bibliotekami JavaScript Definiowanie kilku wtyczek w jednym pliku.js Rozdzia 20. Parametry wtyczek Badanie obecno ci parametru Obiekty w roli parametrów Badanie typu parametrów Zmienna liczba parametrów funkcji Rozdzia 21. Tworzenie wtyczek Rozdzia 22. Minimalizacja i kompresja wtyczek Kompresja Rozdzia 23. Co powiniene zapami ta z trzeciej cz ci? Skorowidz

5 Rozdzia 11. Efekty specjalne Biblioteka jquery zawiera kilka metod s u cych do wykonywania prostych animacji. Nale do nich: slidedown() i slideup(), fadein() i fadeout() oraz animate(). Metody slidedown() i slideup() pozwalaj na p ynne rozwijanie i zwijanie elementu. Efekt graficzny polega na animacji elementu poprzez zwi kszenie lub zmniejszenie jego wysoko ci. Je li na ukrytym akapicie: $('p#info').hide(); wywo amy metod slidedown(): $('p#info').slidedown(); to akapit ten pojawi si na stronie w sposób animowany. Jego wysoko b dzie p ynnie zwi kszana od 0 do odpowiedniej warto ci. Wywo anie metody slideup() spowoduje ponowne ukrycie akapitu: $('p#info').slideup(); Tym razem jego wysoko b dzie zmniejszana do 0. Domy lnie animacja trwa 400 milisekund, lecz mo emy to zmieni, przekazuj c do metod slidedown() oraz slideup() parametr okre laj cy czas trwania animacji. Parametrem tym mo e by liczba okre laj ca, ile milisekund ma trwa animacja, np.: $('p#info').slideup(1200); $('p#info').slidedown(2500); b d jeden z napisów: slow lub fast. Napis slow ustala czas trwania animacji na 200 milisekund, a fast na 600. Drugim, równie opcjonalnym, parametrem funkcji slideup() i slidedown() jest funkcja anonimowa, wywo ywana po zako czeniu animacji. Je li chcesz, by po zako czeniu rozwijania akapitu kolor jego t a sta si czerwony, u yj kodu: $('p#info').slidedown(2500, function(){ $('p#info').css('background', 'red');

6 130 Cz I Abecad o Zwró uwag, e rozwi zanie niewykorzystuj ce funkcji anonimowej: $('p#info').slidedown(2500); $('p#info').css('background', 'red'); jest b dne. Wywo anie funkcji slidedown() nie powoduje wstrzymania wykonywania skryptu. Metoda css() w powy szym kodzie b dzie wywo ana natychmiast po uruchomieniu animacji, a nie po jej zako czeniu. Kolejne dwie funkcje dotycz ce efektów, czyli fadein() oraz fadeout(), powoduj pokazanie i ukrycie elementu przez zwi kszanie i zmniejszanie jego przezroczysto ci. Maj one identyczne parametry jak slidedown() i slideup(). Po wywo aniu: $('p#info').fadein(); akapit p#info pojawi si na stronie, za instrukcja: $('p#info').fadeout(); spowoduje ukrycie go. Tempo pojawiania si i znikania ustalamy, przekazuj c liczb lub napisy slow albo fast: $('p#info').fadein(1500); $('p#info').fadein('fast'); $('p#info').fadein('slow'); Funkcja automatyczna przekazana jako drugi parametr b dzie wywo ana po zako czeniu efektu: $('p#info').fadein(1000, function(){ //funkcja wywo ywana po zako czeniu animacji Ostatnia z wymienionych na wst pie funkcji, animate(), pozwala na p ynne modyfikowanie dowolnej w a ciwo ci CSS. Instrukcja: $('p#info').animate({ font-size: '200%', left: '200px', borderwidth: '10px' spowoduje p ynn zmian rozmiaru czcionki do 200%. Je li czcionka by a wi ksza, to b dzie zmniejszona, a je li by a mniejsza to b dzie zwi kszona. W a ciwo left b dzie p ynnie d y a do warto ci 200px, za grubo obramowania do 10px. Pierwszym parametrem metody animate() jest tablica asocjacyjna w a ciwo ci CSS, do których animacja ma p ynnie d y. Zwró uwag, e atrybuty pisane w kodzie CSS z dywizem, np. border-width, s w jquery zapisywane w notacji borderwidth. Dwa opcjonalne parametry metody animate() ustalaj czas trwania animacji oraz pozwalaj na wykonanie dowolnych akcji po jej zako czeniu: $('p#info').animate( { font-size: '200%', left: '200px', borderwidth: '10px', 5000,

7 Rozdzia 11. Efekty specjalne 131 ); function() { //funkcja wywo ywana po zako czeniu animacji wiczenie Zmodyfikuj kod kontrolki +/- wykonanej w wiczeniu 8.1 w taki sposób, by pokazywanie i ukrywanie tre ci odbywa o si w sposób p ynny z wykorzystaniem metod slide Down() oraz slideup(). Kod XHTML kontrolki zawiera hiper cze a, w którym umieszczamy znak + b d, oraz akapit p z tre ci. Akapit nale y ukry lub pokaza. Zarys kodu XHTML z wiczenia jest przedstawiony na listingu Rozwi zaniem wiczenia jest skrypt jquery przedstawiony na listingu Listing Zarys kodu XHTML kontrolki +/ <div class="element"> <h3><a href="#">+</a>lorem ipsum</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <div class="clearing"></div> </div> Listing Rozwi zanie wiczenia 11.1 $(function(){ $('.element p').hide(); $('.element a').click(function(){ if ($(this).html() == '+') { $(this).html('-'); $(this).parent().next().slidedown(); else { $(this).html('+'); $(this).parent().next().slideup(); W skrypcie jquery post pujemy identycznie jak w wiczeniu 8.1. W odpowiedzi na klikni cie hiper cza a, w zale no ci od tego, czy zawiera ono znak, + czy, rozwijamy b d zwijamy akapit. Do akapitu docieramy od klikni tego hiper cza (tj. od $(this)), wywo uj c metody parent() oraz next(). W celu pokazania akapitu wywo ujemy zamiast metody show() metod slidedown(): $(this).parent().next().slidedown(); Natomiast ukrycie akapitu wymaga wywo ania zamiast metody hide() metody slideup(): $(this).parent().next().slideup();

8 132 Cz I Abecad o wiczenie Dany jest plik menu.html oraz kilka plików, których nazwa rozpoczyna si od s owa fragment, np. fragment-ulica-bramowa.html. W pliku menu.html znajduje si menu g ówne oraz element div#tresc. Zarys pliku menu.html jest przedstawiony na listingu Napisz skrypt, który zmodyfikuje dzia anie menu w taki sposób, by klikni cie opcji menu powodowa o prze adowanie elementu div#tresc. Do elementu tego nale y za adowa zawarto pliku, którego nazwa jest zawarta w klikni tym hiper czu. Zadanie rozwi w taki sposób, by prze adowanie by o p ynne z wykorzystaniem efektów fadein() oraz fadeout(). Skrypt powinien dzia a w taki sposób, by podczas animacji opcje menu by y nieczynne. Rozwi zaniem zadania jest skrypt z listingu Listing Plik menu.html z wiczenia 11.2 <div id="pojemnik"> <ul id="menu"> <li><a href="fragment-ulica-bramowa.html">ulica bramowa</a></li> <li><a href="fragment-plac-po-farze.html">plac po farze</a></li>... </ul> <div id="tresc"></div> </div> Listing Rozwi zanie wiczenia 11.2 <script type="text/javascript"> trwa = 0; function wylacz_hiperlacza() { trwa = 1; $('a'). css('text-decoration', 'none'). hover( function(){ $(this).css('text-decoration', 'none');, function(){ $(this).css('text-decoration', 'none'); ); function wlacz_hiperlacza() { trwa = 0; $('a'). css('text-decoration', 'none'). hover( function(){ $(this).css('text-decoration', 'underline');, function(){ $(this).css('text-decoration', 'none');

9 Rozdzia 11. Efekty specjalne 133 ); $(function(){ wylacz_hiperlacza(); $('#tresc').hide(); $('#tresc').load('fragment-ulica-dominikanska.html'); $('#tresc').fadein(2000, function(){ wlacz_hiperlacza(); $('a').click(function(){ if (trwa == 0) { wylacz_hiperlacza(); var url = $(this).attr('href'); $('#tresc').fadeout(2000, function(){ $('#tresc').load(url); $('#tresc').fadein(2000, function(){ wlacz_hiperlacza(); return false; </script> W skrypcie z listingu 11.4 najpierw definiujemy zmienn trwa. Zmienna ta b dzie flag, informuj c o tym, e animacja jest w trakcie wykonywania. Je li warto zmiennej trwa wynosi 1, to animacja w a nie jest wykonywana i hiper cza nie powinny dzia a. W przeciwnym razie, czyli gdy warto zmiennej trwa wynosi 0, animacja nie jest wykonywana i hiper cza powinny dzia a. Za w czanie i wy czanie dzia ania hiper czy odpowiadaj funkcje wlacz_hiperlacza() oraz wylacz_hiperlacza(). Ustalaj one warto zmiennej trwa oraz modyfikuj style CSS hiper czy. Wewn trz tych funkcji wybieramy wszystkie hiper cza: $('a'). ustalamy ich style CSS: css('text-decoration', 'none'). i modyfikujemy efekt rollover: hover( function(){ $(this).css('text-decoration', 'none');, function(){ $(this).css('text-decoration', 'none'); );

10 134 Cz I Abecad o Metoda hover() przypisuje obs ug dwóch zdarze : onmouseenter oraz onmouseleave 1. Powy sza instrukcja jest równowa na dwóm instrukcjom: mouseenter(function(){ $(this).css('text-decoration', 'none'); ).mouseleave(function(){ $(this).css('text-decoration', 'none'); Dzia anie skryptu z listingu 11.4 rozpoczynamy od wy czenia hiper czy, ukrycia elementu #tresc, za adowania do elementu #tresc pliku fragment-ulica-dominikanska. html oraz animowanego wy wietlenia elementu #tresc: wylacz_hiperlacza(); $('#tresc').hide(); $('#tresc').load('fragment-ulica-dominikanska.html'); $('#tresc').fadein(2000, function(){ wlacz_hiperlacza(); Animacja b dzie trwa a 2 sekundy (tj milisekund). Po zako czeniu animacji hiper- cza zostan w czone, za co odpowiada wywo anie funkcji wlacz_hiperlacza(). Zasadnicz cz ci skryptu jest przypisanie obs ugi zdarzenia onclick do hiper czy. Hiper cza b d dzia a y wy cznie wtedy, gdy warto zmiennej trwa wynosi 0: $('a').click(function(){ if (trwa == 0) {... return false; W ten sposób wy czamy dzia anie hiper czy w trakcie trwania animacji. Zdarzenie onclick b dzie generowane, jednak dzi ki powy szej instrukcji if nie spowoduje ono wykonania adnych akcji. Je li animacja nie jest wykonywana, wówczas obs uga klikni cia przebiega nast puj co: najpierw wy czamy dzia anie hiper czy: wylacz_hiperlacza(); Nast pnie z atrybutu href klikni tego hiper cza do zmiennej url pobieramy nazw pliku: var url = $(this).attr('href'); 1 Zdarzenia mouseeneter oraz mouseleave nie wyst puj w drzewie DOM. S one emulowane przez bibliotek jquery. Pierwotnie zdarzenia te pojawi y si w przegl darce Internet Explorer. Zdarzenia mouseeneter i mouseleave ró ni si od zdarze mouseover i mouseout tym, e s generowane dok adnie jeden raz, dopóki kursor myszki nie opu ci wybranego elementu. Podczas jednokrotnego wskazania elementu wska nikiem myszki zdarzenia te zostan wygenerowane dok adnie jeden raz. Zdarzenia mouseover oraz mouseout mog by wygenerowane kilkukrotnie.

11 Rozdzia 11. Efekty specjalne 135 Teraz wy czamy widoczno elementu #tresc. Element ten stopniowo zniknie z ekranu: $('#tresc').fadeout(2000, function(){ //kod wykonywany, gdy element #tresc jest ju niewidoczny Gdy element #tresc jest niewidoczny, adujemy do niego zawarto pliku, którego nazwa znajduje si w zmiennej url: $('#tresc').load(url); po czym w czamy widoczno elementu #tresc: $('#tresc').fadein(2000, function(){ //kod wykonywany, gdy element #tresc jest ju widoczny Element ten pojawi si stopniowo na ekranie. Gdy element #tresc jest ju widoczny, ponownie w czamy dzia anie hiper czy: wlacz_hiperlacza(); wiczenie Dokument index.html zawiera znacznik img, który umieszcza na stronie WWW zdj cie zawarte w pliku fotka.jpg. Poni ej zdj cia znajduj si trzy hiper cza. Jedno jako etykiet ma strza k w lewo, drugie napis reset, a trzecie strza k w prawo. Zarys kodu XHTML jest przedstawiony na listingu Napisz skrypt jquery, który zmodyfikuje dzia anie hiper czy. Strza ka w lewo ma powodowa, e obraz p ynnym ruchem wyjedzie poza lew kraw d nadrz dnego elementu div, strza ka w prawo ma powodowa p ynne wyjechanie zdj cia poza praw kraw d elementu div, za napis reset ma powodowa powrót zdj cia do rodka elementu div. Rozwi zaniem zadania jest skrypt przedstawiony na listingu Listing Plik index.html z wiczenia 11.3 <body> <div id="element"> <img src="fotka.jpg" alt="" /> </div> <div> <a id="lewo" href="#"><<</a> <a id="reset" href="#">reset</a> <a id="prawo" href="#">>></a> </div> </body>

12 136 Cz I Abecad o Listing Skrypt z wiczenia 11.3 $(document).ready(function(){ $("#lewo").click(function(){ $('#element img').animate({ 'left' : "-100px" return false; $("#prawo").click(function(){ $('#element img').animate({ 'left' : "200px" return false; $("#reset").click(function(){ $('#element img').animate({ 'left' : "60px" return false; Skrypt z listingu 11.6 zawiera instrukcje, które przypisz procedury obs ugi zdarzenia onclick trzem hiper czom zawartym w dokumencie. Sednem rozwi zania jest p ynne przesuwanie zdj cia w trzy ró ne miejsca. W celu przesuni cia fotografii poza lew kraw d elementu div modyfikujemy w a ciwo CSS left, nadaj c jej warto 100 pikseli: $('#element img').animate({ 'left' : "-100px" Przesuni cie elementu img poza praw kraw d elementu div wykonuje instrukcja: $('#element img').animate({ 'left' : "200px" Natomiast powrót do pozycji startowej polega na przypisaniu w a ciwo ci left warto ci 60 pikseli: $('#element img').animate({ 'left' : "60px" Funkcja animate() spowoduje p ynn zmian w a ciwo ci left od warto ci bie cej do jednej z podanych liczb, czyli 100px, 60px lub 200px.

13 Rozdzia 11. Efekty specjalne 137 W rozwi zaniu tym wa n rol odgrywaj style CSS. Element img jest pozycjonowany bezwzgl dnie wewn trz zawieraj cego go elementu div: #element { position: relative; overflow: hidden; #element img { display: block; width: 80px; height: 60px; position: absolute; top: 10px; left: 60px;

14 Nie utrudniaj sobie życia skorzystaj z biblioteki jquery! Abecadło, czyli jak korzystać z dobrodziejstw biblioteki jquery Interfejs API biblioteki jquery, czyli gdzie szukać zaawansowanych rozwiązań Wtyczki, czyli o co jeszcze warto rozszerzyć dostępne możliwości Biblioteka jquery, zarówno w wersji pełnej, jak i zminimalizowanej, pozwala programiście znacząco uprościć pracę i stopień skomplikowania kodu tworzonego w języku Java- Script. Korzystając z jej możliwości, programista może zmieniać atrybuty, modyfikować wygląd poszczególnych elementów strony, dodawać lub usuwać elementy drzewa DOM. Może też wykonać zapytania Ajax, stosować efekty specjalne, obsłużyć typowe i nietypowe zdarzenia, a także posłużyć się różnymi wtyczkami, często znacząco rozszerzającymi funkcjonalność kodu. Książka jquery. Poradnik programisty to doskonałe kompendium wiedzy na temat tej biblioteki. Dowiesz się z niej, jak rozpocząć pracę z jquery, jak obchodzić się z selektorami i atrybutami, manipulować modelem DOM czy przypisywać wybrany styl do określonych elementów strony. Nauczysz się stosować funkcję jquery, filtry i operacje na zbiorach elementów. Poznasz także rodzaje i sposób działania wtyczek, sam zaczniesz je tworzyć, minimalizować i kompresować. Jeśli interesuje Cię programowanie z wykorzystaniem możliwości oferowanych przez JavaScript, a nie chcesz spędzać wielu godzin na bezpośrednim wpisywaniu skomplikowanego kodu, biblioteka jquery jest właśnie dla Ciebie! Trzy warstwy dokumentu XHTML: struktura, wygląd i zachowanie Zbiory węzłów, tworzenie i usuwanie węzłów w drzewie DOM Korzystanie z biblioteki jquery Efekty specjalne Selektory CSS i zdarzenia XHTML Funkcja jquery() w skrócie $() Modyfikacja wyglądu, odczyt i modyfikacja treści elementów Odczyt i modyfikacja atrybutów Dodawanie i usuwanie węzłów drzewa DOM, wędrówka po drzewie DOM Wykorzystaj szanse, jakie daje Ci biblioteka jquery! Odczyt i modyfikacja węzłów drzewa DOM Operacje przekształcające zbiór elementów Parametry wtyczek, ich tworzenie, minimalizacja i kompresja Cena: 39,00 zł 5455