Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00376 006333 13601792 na godz. na dobę w sumie
jQuery. Poradnik programisty - książka
jQuery. Poradnik programisty - książka
Autor: Liczba stron: 288
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-2518-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> jquery - programowanie
Porównaj ceny (książka, ebook, audiobook).

Nie utrudniaj sobie życia - skorzystaj z biblioteki jQuery!

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!

Wykorzystaj szanse, jakie daje Ci biblioteka jQuery!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Nie utrudniaj sobie życia Nie utrudniaj sobie życia —— skorzystaj z biblioteki skorzystaj z biblioteki jQuery 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 zarówno w wersji pełnej, jak i zminimalizowanej, jQuery, zarówno w wersji pełnej, Biblioteka jQuery, 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 poszcze- gó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 wtyczka- mi, często znacząco rozszerzającymi funkcjonalność kodu. Książka Poradnik programisty” to doskonałe kompendium wiedzy na temat tej jQuery. Poradnik programisty” Książka „„jQuery. 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ę programo- wanie 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 • Korzystanie z biblioteki jQuery • 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, Wykorzystaj szanse, jakie daje Ci biblioteka jakie daje Ci biblioteka jQuery! jQuery! Cena: 39,00 zł 5455 • 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 JQUEPP.indd 1 JQUEPP.indd 1 14-07-10 12:31:38 14-07-10 12:31:38 JQuery. Poradnik programisty Autor: W³odzimierz Gajda ISBN: 978-83-246-2518-5 Format: 158235, 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! Spis treĈci CzöĈè I Abecadäo ....................................................................... 5 Rozdziaä 1. Korzystanie z biblioteki jQuery .......................................................... 7 PoprawnoĞü osadzania kodu JavaScript w dokumentach HTML i XHTML .................. 13 Rozdziaä 2. Trzy warstwy dokumentu XHTML: struktura, wyglñd i zachowanie .... 15 Rozdziaä 3. Selektory CSS i zdarzenia XHTML ................................................... 21 Rozdziaä 4. Modyfikacja wyglñdu elementów .................................................... 29 Rozdziaä 5. Odczyt i modyfikacja treĈci elementów ........................................... 39 Rozdziaä 6. Odczyt i modyfikacja atrybutów ...................................................... 47 Rozdziaä 7. Dodawanie i usuwanie wözäów drzewa DOM .................................... 59 Rozdziaä 8. Wödrówka po drzewie DOM ............................................................ 79 Rozdziaä 9. Zbiory wözäów ................................................................................ 95 Rozdziaä 10. Ajax ............................................................................................. 109 Rozdziaä 11. Efekty specjalne .......................................................................... 129 Rozdziaä 12. Co powinieneĈ zapamiötaè z pierwszej czöĈci? .............................. 139 Interfejs API biblioteki jQuery ..................................... 143 CzöĈè II Rozdziaä 13. Funkcja jQuery() — w skrócie $() ................................................. 145 Wywoáanie $(funkcja) .................................................................................................. 145 Wywoáanie $(kod XHTML) ......................................................................................... 146 Wywoáanie $(selektor) ................................................................................................. 150 Wywoáanie $(element DOM) ....................................................................................... 154 Wynik funkcji $ ............................................................................................................ 156 Tworzenie wĊzáów tekstowych ..................................................................................... 159 Funkcje i metody statyczne .......................................................................................... 159 Rozdziaä 14. Selektory ..................................................................................... 163 Zestawienie selektorów filtrujących ............................................................................. 164 UĪycie selektorów ........................................................................................................ 167 WystĊpowanie selektorów ............................................................................................ 169 4 jQuery. Poradnik programisty Rozdziaä 15. Odczyt i modyfikacja wözäów drzewa DOM .................................... 173 Rozszerzona skáadnia metod dostĊpu do wĊzáów ......................................................... 176 Peáne zestawienie metod dostĊpu do wĊzáów ............................................................... 178 Rozdziaä 16. Tworzenie i usuwanie wözäów w drzewie DOM ............................... 185 Klonowanie wĊzáów ..................................................................................................... 189 Usuwanie wĊzáów ......................................................................................................... 190 Wymiana wĊzáów ......................................................................................................... 191 Zawijanie wĊzáów ......................................................................................................... 194 Rozdziaä 17. Operacje przeksztaäcajñce zbiór elementów ................................... 197 Dodawanie wĊzáów do zbioru ...................................................................................... 197 Operacja „cofnij” .......................................................................................................... 201 Filtrowanie .................................................................................................................... 203 Zliczanie elementów zbioru .......................................................................................... 204 Przodkowie, potomkowie i rodzeĔstwo ........................................................................ 205 Przetwarzanie wĊzáów tekstowych ............................................................................... 208 Rozdziaä 18. Co powinieneĈ zapamiötaè z drugiej czöĈci? .................................. 215 CzöĈè III Wtyczki ..................................................................... 217 Rozdziaä 19. Pierwsza wtyczka ......................................................................... 219 Wywoáanie wtyczki ...................................................................................................... 221 àączenie biblioteki jQuery z innymi bibliotekami JavaScript ...................................... 224 Definiowanie kilku wtyczek w jednym pliku .js ........................................................... 226 Rozdziaä 20. Parametry wtyczek ....................................................................... 231 Badanie obecnoĞci parametru ....................................................................................... 232 Obiekty w roli parametrów ........................................................................................... 233 Badanie typu parametrów ............................................................................................. 235 Zmienna liczba parametrów funkcji ............................................................................. 238 Rozdziaä 21. Tworzenie wtyczek ....................................................................... 241 Rozdziaä 22. Minimalizacja i kompresja wtyczek ............................................... 265 Kompresja .................................................................................................................... 266 Rozdziaä 23. Co powinieneĈ zapamiötaè z trzeciej czöĈci? ................................. 271 Skorowidz .................................................................................... 273 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 mili- sekund, 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Ğla- ją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 mili- sekund, 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 ); }); 130 CzöĈè I 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 urucho- mieniu 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Ĕcze- niu 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 modyfiko- wanie 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. Pierw- szym 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, Rozdziaä 11. i Efekty specjalne 131 function() { //funkcja wywoáywana po zakoĔczeniu animacji } ); çwiczenie 11.1. ________________________________________________ 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 11.1. Rozwiązaniem üwiczenia jest skrypt jQuery przedstawiony na listingu 11.2. Listing 11.1. 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 11.2. 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(); 132 CzöĈè I i Abecadäo çwiczenie 11.2. ________________________________________________ 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 11.3. 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áa- dowaü 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 11.4. Listing 11.3. 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 11.4. 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 ); } Rozdziaä 11. i 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Ğü zmien- nej 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 ); } ); 134 CzöĈè I i Abecadäo Metoda hover() przypisuje obsáugĊ dwóch zdarzeĔ: onmouseenter oraz onmouseleave1. 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. 2000 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. Rozdziaä 11. i 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 11.3. ________________________________________________ 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 11.5. Napisz skrypt jQuery, który zmody- fikuje 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 powo- dowaü 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 11.6. Listing 11.5. Plik index.html z üwiczenia 11.3 body div id= element img src= fotka.jpg alt= / /div div a id= lewo href= # lt; lt; /a a id= reset href= # reset /a a id= prawo href= # gt; gt; /a /div /body 136 CzöĈè I i Abecadäo Listing 11.6. 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ą kra- wĊ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. Rozdziaä 11. i 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; } Nie utrudniaj sobie życia Nie utrudniaj sobie życia —— skorzystaj z biblioteki skorzystaj z biblioteki jQuery 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 zarówno w wersji pełnej, jak i zminimalizowanej, jQuery, zarówno w wersji pełnej, Biblioteka jQuery, 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 poszcze- gó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 wtyczka- mi, często znacząco rozszerzającymi funkcjonalność kodu. Książka Poradnik programisty” to doskonałe kompendium wiedzy na temat tej jQuery. Poradnik programisty” Książka „„jQuery. 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ę programo- wanie 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 • Korzystanie z biblioteki jQuery • 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, Wykorzystaj szanse, jakie daje Ci biblioteka jakie daje Ci biblioteka jQuery! jQuery! Cena: 39,00 zł 5455 • 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 JQUEPP.indd 1 JQUEPP.indd 1 14-07-10 12:31:38 14-07-10 12:31:38
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

jQuery. Poradnik programisty
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: