Majkowski W. - jQuery. Tworzenie animowanych witryn internetowych
Informacje o dokumencie
| Rozmiar : | 7.9 MB |
| Rozszerzenie: |
dareks_
ArkuszeMajkowski W. - jQuery. Tworzenie animowanych witryn internetowych.pdf
dareks_ 
EBooki Infornatyka
Tworzenie animowanych witryn internetowych s j O C S . i r •«
Spis treści W stęp..............................................................................................................................................7 Część I Tworzenie animowanych banerów reklamowych....................9 Rozdział 1. Tworzenie zaawansowanych banerów w jQ uery.........................................11 1.1. Wprowadzenie............................................................................................................... 11 1.1.1. Anatomia metody animateQ .............................................................................. 13 1.1.2. Anatomia metody delayQ ...................................................................................14 1.1.3. Anatomia metody effectQ...................................................................................16 1.1.4. Anatomia metody fadeln() ................................................................................ 20 1.1.5. Anatomia metody fadeOut() ..............................................................................20 1.1.6. Anatomia metody queueQ .................................................................................21 1.1.7. Anatomia metody dequeue() .............................................................................21 1.1.8. Anatomia metody clearQueue()........................................................................ 21 1.1.9. Anatomia metody css().......................................................................................22 1.2. Tworzenie projektów animowanych banerów reklamowych...................................... 22 1.2.1. Tworzenie banera typu Leaderboard o rozmiarze 728x90pikseli .....................22 1.2.2. Tworzenie banera typu Wide Skyscraper o rozmiarze 160x600 pikseli 26 1.2.3. Tworzenie banera typu Medium Rectangle o rozmiarze 300x250 pikseli 31 1.2.4. Tworzenie banera typu Rectangle o rozmiarze 180x 150 pikseli .................. 35 Część II Tworzenie animowanych witryn internetowych.................... 39 Rozdział 2. Tworzenie zaawansowanych menu w jQuery ..............................................41 2.1. Wprowadzenie...............................................................................................................41 2.1.1. Anatomia zdarzenia mouseover() ..................................................................... 42 2.1.2. Anatomia zdarzenia mouseoutQ ....................................................................... 42 2.1.3. Anatomia zdarzenia mouseenter() ....................................................................43 2.1.4. Anatomia zdarzenia mouseleaveQ.................................................................... 43 2.1.5. Anatomia zdarzenia hoverQ ..............................................................................44 2.1.6. Anatomia zdarzenia clickQ................................................................................ 44 2.1.7. Anatomia metody sbdeUp() ..............................................................................45 2.1.8. Anatomia metody sbdeDown() .........................................................................45 2.1.9. Anatomia metody sbdeToggle() ....................................................................... 46 2.1.10. Anatomia metody show() ................................................................................ 46 2.1.11. Anatomia metody hide().................................................................................. 47 2.1.12. Anatomia metody fadeTo() .............................................................................47
6 Spis treści 2.1.13. Anatomia metody find() .................................................................................. 48 2.1.14. Anatomia metody next().................................................................................. 48 2.1.15. Anatomia metody siblings() ............................................................................48 2.1.16. Anatomia metody children()............................................................................49 2.1.17. Anatomia metody stop() .................................................................................. 49 2.1.18. Anatomia selektora :animated .........................................................................50 2.1.19. Anatomia filtra is() ...........................................................................................50 2.2. Tworzenie projektów animowanych m enu................................................................51 2.2.1. Tworzenie rozsuwanego menu poziomego......................................................51 2.2.2. Tworzenie rozsuwanego menu pionowego...................................................... 54 2.2.3. Tworzenie menu z użyciem wielu efektów specjalnych.................................58 2.2.4. Tworzenie menu wielopoziomowego...............................................................70 Rozdział 3. Tworzenie zaawansowanych galerii fotografiiw jQuery............... 79 3.1. Wprowadzenie...............................................................................................................79 3.1.1. Anatomia zdarzenia load() ................................................................................ 79 3.1.2. Anatomia metody on()........................................................................................80 3.1.3. Anatomia metody bind().....................................................................................80 3.1.4. Anatomia metody addClass() ............................................................................81 3.1.5. Anatomia metody removeClass() ..................................................................... 81 3.1.6. Anatomia metody toggleClass() ....................................................................... 82 3.1.7. Anatomia metody hasClass().............................................................................82 3.1.8. Anatomia metody append() ...............................................................................83 3.1.9. Anatomia metody attr() ......................................................................................83 3.1.10. Anatomia metody html() ................................................................................. 83 3.1.11. Anatomia metody remove().............................................................................84 3.1.12. Anatomia metody empty()...............................................................................84 3.1.13. Anatomia metody eq() ......................................................................................84 3.1.14. Anatomia metody index()................................................................................85 3.1.15. Anatomia metody position() ............................................................................85 3.1.16. Anatomia właściwości length..........................................................................85 3.2. Tworzenie projektów animowanych galerii fotografii .............................................86 3.2.1. Tworzenie galerii fotografii z wyświetlanym dynamicznie systemem nawigacji i możliwością automatycznego odtwarzania pokazu zdjęć ..........86 3.2.2. Tworzenie galerii fotografii z miniaturami......................................................94 Rozdział 4. Animowanie stron internetowych w jQuery .............................................101 4.1. Wprowadzenie.............................................................................................................101 4.1.1. Anatomia metody wrapAll()............................................................................ 101 4.2. Tworzenie projektów animowanych stron internetowych..................................... 102 4.2.1. Tworzenie animowanego szablonu strony internetowej ...............................102 Rozdział 5. Tworzenie zaawansowanych formularzy w jQuery ..................... 115 5.1. Wprowadzenie.............................................................................................................115 5.1.1. Anatomia zdarzenia focus()............................................................................. 115 5.1.2. Anatomia zdarzenia blur() ............................................................................... 116 5.1.3. Anatomia zdarzenia select() ............................................................................ 116 5.1.4. Anatomia zdarzenia change() ..........................................................................117 5.1.5. Anatomia zdarzenia submit() ..........................................................................117 5.1.6. Anatomia metody val().....................................................................................118 5.1.7. Anatomia metody each() ..................................................................................118 5.2. Tworzenie projektów formularzy..............................................................................119 5.2.1. Tworzenie interaktywnego formularza ankietowego.................................119 Skorowidz ..........................................................................................................131
Wstęp Biblioteka jQuery a tworzenie animowanych witryn internetowych Programistyczna biblioteka jQuery to jeden z najpopularniejszych darmowych frame- worków skryptowego języka programowania JavaScript. Obok innych tego typu biblio tek, takich jak: Prototype, Dojo Toolkit, script.aculo.us czy MooTools, stanowi niezbędne i niezastąpione narzędzie dla webmasterów projektujących animowane, interaktywne i dynamiczne witryny internetowe. Biblioteka jQuery, ze względu na możliwość obsługi zdarzeń, różnego rodzaju metod animacyjnych i efektów specjalnych oraz kompatybilność w stosunku do większości przeglądarek internetowych czy bardzo popularnych obecnie urządzeń mobilnych, sta nowi poważną konkurencję dla technologii Flash i obiektowego języka programowania ActionScript. Co znajdziesz w tej książce? Książka składa się z pięciu rozdziałów prezentujących zastosowanie biblioteki jQuery w tworzeniu animowanych witryn internetowych. Każdy rozdział zawiera wyczerpu jąco opisane konkretne zagadnienie. Czytelnik ma możliwość wyboru interesującego go problemu z danego rozdziału, niemniej jednak kompleksowe zapoznanie się z treścią książki, zgodnie z kolejnością zaproponowaną w spisie treści, gwarantuje dogłębne poznanie metod i technik animacyjnych opartych na frameworku jQuery. Rozdział 1. prezentuje filozofię, metodologię, typy animacji i efekty specjalne wyko rzystywane do tworzenia animowanych banerów reklamowych. Ponadto omówiono w nim strukturę banerów internetowych oraz sposoby manipulowania poszczególnymi składowymi banera w zależności od czasu trwania animacji i ustalonej kolejności.
8 Wstęp Rozdział 2. poświęcony został przede wszystkim problematyce obsługi zdarzeń myszy umożliwiających interakcję użytkownika ze stroną WWW poprzez system nawigacji animowanego menu internetowego. Dodatkowo szerzej zaprezentowano zestaw różnego rodzaju metod animacyjnych. W rozdziale 3. szczegółowo opisano zasady tworzenia animowanych galerii fotografii z wykorzystaniem procedur obsługi zdarzeń myszy w powiązaniu z metodami anima- cyjnymi i efektami specjalnymi. Rozdział 4. przedstawia całościowy proces tworzenia animowanego szablonu dwuko lumnowej strony internetowej składającej się z: rotatora zdjęć, wysuwanego menu, ani mowanej lewej i prawej sekcji tekstowej oraz stopki. Rozdział 5. poświęcono obsłudze interaktywnego formularza internetowego, automa tycznie kontrolującego wymagalność uzupełnienia pól obowiązkowych i weryfrkującego poprawność danych wprowadzonych przez użytkownika. Dla kogo przeznaczona jest ta książka? Książka, ze względu na szeroki zakres podejmowanej problematyki, dotyczącej animo wania witryn internetowych, przeznaczona jest zarówno dla średnio zaawansowanych projektantów stron WWW, jak również dla początkujących webmasterów. Dla tych drugich zgłębienie wiedzy prezentowanej w książce ułatwi fakt, że zawiera ona kom plet gotowych przykładów, które z powodzeniem można zastosować w tworzonych projektach witryn internetowych. Materiały Wszystkie niezbędne materiały (pliki graficzne i pełne kody źródłowe) w postaci goto wych przykładów przeznaczonych do zastosowania na stronach WWW można znaleźć pod adresemftp://ftp.helion.pl/przyklady/jqtwan.zip.
CZĘŚĆ I TWORZENIE ANIMOWANYCH BANERÓW REKLAMOWYCH
Rozdział 1. Tworzenie zaawansowanych banerów w JQuery 1.1. f i Wskazówka f i Wskazówka W rozdziale pierwszym wykonamy cztery animowane banery reklamowe następują cych typów1: 1. Leaderboard o rozmiarze 728x90 pikseli (px). 2. Wide Skyscraper o rozmiarze 160x600 pikseli. 3. Medium Rectangle o rozmiarze 300x250 pikseli. 4. Rectangle o rozmiarze 180x150 pikseli. Wprowadzenie Baner internetowy jest to wirtualna (cyfrowa) forma graficznej reklamy umieszczonej w określonym miejscu strony WWW, prezentującej kombinację statycznych lub ani mowanych zdjęć, tekstów czy filmów, zaprojektowanych w celu przekazania marke tingowej informacji. Animacja komputerowa jest to programistycznie generowany widok cyfrowy sekwen cyjnie zmienianych w czasie obiektów, np.: zdjęć, tekstów lub filmów tworzących wra żenie ruchu. 1 http://www. iab.net/guidelines/508676/508767/UAP.
12 Część I ♦ Tworzenie animowanych banerów reklamowych Powyższe banery znajdują zastosowanie jako standardowe reklamy internetowe ustano wione przez Europejskie Stowarzyszenie Reklamy Interaktywnej (ang. EIAA — Euro pean Interactive Advertising Association) i Biuro Reklamy Interaktywnej w Europie (ang. IAB Europe — Interactive Advertising Bureau Europe)2. Internetowe banery reklamowe charakteryzują następujące standardy3: ♦ określony rozmiar, czyli wielkość banera mierzona w pikselach; ♦ określona wielkość pliku — maksymalnie 40 kilobajtów; ♦ określony czas trwania animacji — maksymalnie 15 sekund; ♦ określony maksymalny rozmiar dla tzw. Hot Spot-u, tzn. interaktywnego przycisku, którego wielkość nie może przekraczać 'A wielkości banera; ♦ określona pozycja na warstwach nakładanych elementów w stosie z zakresu od 0 do 4999; ♦ odpowiedni dobór wielkości i kroju czcionki oraz szaty graficznej odróżniającej się od pozostałej zawartości strony WWW; ♦ określone maksymalne zużycie procesora w trakcie odtwarzania animacji o górnej granicy 20%; ♦ określona ilość odtwarzanych klatek na sekundę w liczbie 24. Internetowe banery reklamowe przygotujemy na podstawie następujących technologii: 1. XHTML 1.0 (The Extensible HyperText Markup Languagef. 2. CSS 3.0 (Cascading Style Sheetsf. 3. Biblioteka jQuery 1.7.16 z dodatkiem Easing 1.37. 4. Biblioteka jQuery Ul 1.10.08. 5. Biblioteka jQuery TOOLS9. 6. JavaScript10. 2 http://www.iab.net/guidelines/508676/508767/ad unit. 3 http://www.iab.net/guidelines/508676/508767/displayguidelines. 4 http://www.w3.org/TR/xhtmll/. 5 http://www.w3.org/TR/1998/REC CSS2 19980512/. 6 http://docs.jquery.com/Downloading jQuery. 7 http://gsgd.co.uk/sandbox/jquery/easing/. 8 http://jqueryui.com/download. 9 http://jquerytools.org/. 10http://ecma international.org/ecma 262/5.1/.
Rozdział 1. ♦ Tworzenie zaawansowanych banerów w jQuery 13 1.1.1. Anatomia metody animate() Metoda animate() umożliwia tworzenie animacji z wykorzystaniem: ♦ numerycznych właściwości CSS, ♦ czasu odtwarzania animacji, ♦ efektów specjalnych, ♦ funkcji wykonywanych po zakończeniu działania animacji. $ lub jQuery (selektor),anim ate({properties}, [duration], [easing], "-►[complete]) ;n . $ lub jQuery — aliasy (odwołania) biblioteki jQuery12. Sel ektor — umożliwia wybieranie elementów ze struktury dokumentu HTML13. Parametry metody animate]) zawiera tabela 1.1. Tabela 1.1. Parametry metody animate() Parametr Opis działania properties Umożliwia użycie dowolnej numerycznej właściwości CSS kontrolowanej przez wartość liczbową. Dla właściwości pisanych w kodzie CSS z dywizem stosujemy tzw. notację wielbłądzią (ang. lower camel case), np. fontSi ze zamiast font si ze itd. duration* Określa czas odtwarzania animacji przy użyciu słów kluczowych sl ow(domyślna wartość: 600 milisekund), normal (domyślna wartość: 400 milisekund) i fast (domyślna wartość: 200 milisekund). Ponadto parametr umożliwia określanie czasu odtwarzania animacji poprzez zastosowanie liczb całkowitych wyrażonych w milisekundach (1000 ms 1 sekunda). easing* Określa typ animacji, czyli efekt przenikania (wbudowane typy podstawowe: 1i near, swi ng). complete* Umożliwia wywołanie funkcji wykonywanej po zakończeniu działania animacji. * parametr opcjonalny Preferowaną praktyką doboru odpowiednich efektów specjalnych jest ich testowanie poprzez zastosowanie różnego rodzaju schematów konfiguracyjnych. Dodatek Easing 1.3 biblioteki jQuery, którego autorem jest George McGinley Smith, udostępnia 32 typy animacji. Typy te zawiera tabela 1.2. Diagramy typów animacji, prezentując graficznie określony kształt linii, która charakte ryzuje przebieg animacji, wskazują momenty przyspieszenia lub zwolnienia tempa ani macji14. Diagramy typów animacji zawiera rysunek 1.1 (patrz s. 15 i 16). 11http://api.jquery.com/animate/. 12http://api.jquery.com/jQuery/#jQuery1. 13http://api.jquery.com/category/selectors/. 14http://jqueryui. com/demos/effect/#easing.
14 Część I ♦ Tworzenie animowanych banerów reklamowych Tabela 1.2. Typy animacji (efektówprzenikania) dodatku Easing 1.3 bibliotekijQuery Typ Opis działania Linear Rozpoczyna, kontynuuje i kończy animację ze stałą prędkością, bez zastosowania wizualizacji płynnego wygładzenia ruchu czy symulacji przyspieszenia lub zwolnienia tempa odtwarzania animacji. Swing Rozpoczyna, kontynuuje i kończy animację ze stałą prędkością z zastosowaniem wizualizacji płynnego wygładzenia ruchu. easylnCJuad easylnCubic easylnCJuart easylnCJuint easylnSine easyInExpo easylnCi rc easylnElastic easylnBack easylnBounce Rozpoczyna animację z prędkością równą zero, a następnie przyspiesza. easyOutOuad easyOutCubic easyOutQuart easyOutQuint easyOutSine easyOutExpo easyOutCi rc easyOutElastic easyOutBack easyOutBounce Rozpoczyna animację z pełną prędkością, a następnie zwalnia. easylnOutCJuad easylnOutCubic easyInOutQuart easyInOutQuint easylnOutSine easyInOutExpo easylnOutCi rc easylnOutElastic easylnOutBack easylnOutBounce Rozpoczyna animację z prędkością równą zero, następnie przyspiesza do połowy trwania animacji, po czym zwalnia do prędkości równej zero. 1.1.2. Anatomia metody delay() Metoda delayO umożliwia opóźnienie wykonywania w czasie następujących po so bie kolejno animacji. $lubjQuery (metoda) .delay(duration, [queueName]);1S. $ lub jQuery — aliasy (odwołania) biblioteki jQuery. 15http://api.jquery.com/delay/.
Rozdział 1. ♦ Tworzenie zaawansowanych banerów w jQuery 15 Diagramy typów animacji In Out InOut linear swing easelnQuad easeOutQuad easelnOutQjjad linear swing easelnCubic easeOutCubic easeinOutCubic easelnQuint easeOutQjjint easelnOutQuint ease Inbine easeOutSine easelnOutSine easeInExpo easeOutE>po easeInOut Expo Rysunek 1.1. Diagramy typów animacji (witryna internetowa bibliotekijQuery Ul) ciąg dalszy rysunku na następnej stronie
16 Część i « Tworzenie animowanych banerów reklamowych Diagramy typów animacji In Out InOut linear swing saselnCii-r easeGutCirc easelnOutCirc ease InElastic easeOut Elastic ease InOut Elastic easelnBack easeOutBack easelnOutBack easelnBounce easeOutBounce easelnOutBounce Rysunek 1.1. Diagramy typów animacji (witiyna internetowa bibliotekijQueiy Ul) ciąg dalszy Parametry metody delay() zawiera tabela 1.3. Tabela 1.3. Parametiy metody JćlayO Parametr Opis działania iduration Określa czas opóźnienia odtwarzania animacji przy użyciu słów kluczowych slow (domyślna wartość: 600 milisekund), norma1 (domyślna wartość: 400milisekund) i,fast. (domyślna wartość: 200 milisekund). queueName* Określa nazwę kolejki. * parametr opcjonalny 1.1.3. Anatomia metody effect() Metoda e ffe c t() umożliwia tworzenie animacji z wykorzystaniem:
Rozdział 1. ♦ Tworzenie zaawansowanych banerów w jQuery 17 ♦ efektów specjalnych, ♦ czasu odtwarzania animacji, ♦ funkcji wykonywanych po zakończeniu działania animacji. $ lub jQuery (selektor) .effect(effect, [options], [speed], [ca llb a ck ]);16. $ lub jQuery — aliasy (odwołania) biblioteki jQuery. Sel ektor — umożliwia wybieranie elementów ze struktury dokumentu HTML. Parametry metody e ffe c t]) zawiera tabela 1.4. Tabela 1.4. Parametry metody effect() Parametr Opis działania effect Określa nazwę efektu. options* Umożliwia ustawienie parametrów efektu. speed* Określa czas odtwarzania animacji przy użyciu słów kluczowych sl ow(domyślna wartość: 600 milisekund), norma1 (domyślna wartość: 400 milisekund) i fast (domyślna wartość: 200 milisekund). calIback* Umożliwia wywołanie funkcji wykonywanej po zakończeniu działania animacji. parametr opcjonalny Biblioteka jQuery Ul udostępnia 15 typów animacji, które wykorzystuje metoda e ffe c t])17. Typy animacji zawiera tabela 1.5. Tabela 1.5. Typy animacji (efektów specjalnych) biblioteki interfejsu użytkownikajQuery Ul Typ Opis działania Argumenty Wartości domyślne parametru Inne dopuszczalne wartości parametru Blind Animowany element di rection vertical horizontal jest rozwijany lub zwijany w kierunku pionowym lub poziomym. code hide show Clip Animowany element di rection vertical horizontal jest powiększany lub pomniejszany w kierunku pionowym lub poziomym. code hide show Drop Animowany element di rection left right, up, down jest przesuwany w określonym kierunku. code hide show 16http://docs.jquery.com/UI/Effects/effect. 17http://jqueryui.com/docs/effect/, http://docs.j query.com/UI/Effects.
18 Część I ♦ Tworzenie animowanych banerów reklamowych Tabela 1.5. Typy animacji (efektów specjalnych) biblioteki interfejsu użytkownikajQuery Ul ciąg dalszy Typ Opis działania Argumenty Wartości domyślne parametru Inne dopuszczalne wartości parametru Explode Fade Fold Puff Slide Scale Animowany element jest ukrywany lub pokazywany poprzez rozdzielenie lub połączenie tworzących go części. Animowany element zanika lub pojawia się. Animowany element jest ukrywany lub pokazywany. Animowany element jest pomniejszany lub powiększany. Animowany element jest przesuwany w określonym kierunku. pieces mode Animowany element jest ukrywany lub pokazywany poprzez skalowanie wymiarów. horizFirst mode size mode percent di recti on distance mode di recti on from origin percent scale 9 hide false hide 15 hide 150 left el.outerWidth show both [ 'middle', 'center'] 0 / 1 0 0 both liczby z przedziału 9 340 show true show liczba całkowita w pikselach show liczba całkowita w pikselach right, up, down liczba całkowita w pikselach mniejsza od wysokości lub szerokości animowanego elementu hide vertical, horizontal liczba całkowita określająca początkowe wymiary elementu parametr tablicowy umożliwiający ustawienie punktu zanikania lub pokazywania elementu liczba całkowita określająca skalę pomniejszenia lub powiększenia elementu parametr określający obszar skalowanego elementu (zawartość, obramowanie i marginesy wewnętrzne) lub tylko zawartość elementu
Rozdział 1. ♦ Tworzenie zaawansowanych banerów w jQuery 19 Tabela 1.5. Typy animacji (efektów specjalnych) biblioteki interfejsu użytkownikajQuery Ul ciąg dalszy Typ Opis działania Argumenty Wartosci domyslne parametru Inne dopuszczalne wartości parametru Bounce Animowany efekt di rection up down,left,right improwizuje odbijanie distance 20 liczba całkowita elementu w pionie lub poziomie. określająca odległość odbijania mode effect show, hide times 5 liczba całkowita określająca czas trwania animacji Highl ight Animowany element jest podświetlany color #ffff99 kolory w notacji heksadecymalnej określonym kolorem. mode show hide Pulsate Animowany efekt pulsuje i zmienia przezroczystość elementu. times 5 liczba całkowita określająca powtórzenia efektu pulsowania mode show hide Shake Animowany element di rection left right, up, down zmienia położenie, naśladując efekt potrząsania. distance 20 liczba całkowita określająca odległość potrząsania elementu times 3 liczba całkowita określająca powtórzenia efektu potrząsania Size Animowany element jest powiększany lub pomniejszany from liczba całkowita określająca początkowe wymiary elementu poprzez zmianę to liczba całkowita wymiarów. określająca końcowe wymiary elementu origin ['to p ', 'le f t '] parametr tablicowy umożliwiający ustawienie punktu zanikania lub pokazywania elementu scale both parametr określający obszar skalowanego elementu (zawartość, obramowanie i marginesy wewnętrzne) lub tylko zawartość elementu Transfer Animowany efekt className nazwa klasy CSS przenosi obramowanie elementu na inny element. to selektorjQuery
20 Część I ♦ Tworzenie animowanych banerów reklamowych 1.1.4. Anatomia metody fadeln() Metoda fadeln() umożliwia pokazywanie elementów poprzez animowanie skali ich przezroczystości. $ lub jQuery (selektor) .fadeIn([duration], [easing], [ca llb a ck ]);18. $ lub jQuery — aliasy (odwołania) biblioteki jQuery. Sel ektor — umożliwia wybieranie elementów ze struktury dokumentu HTML. Parametry metody fadeln() zawiera tabela 1.6. Tabela 1.6. Parametry metodyfadelnQ Parametr Opis działania durati on* Określa czas odtwarzania animacji przy użyciu słów kluczowych sl ow(domyślna wartość: 600 milisekund), normal (domyślna wartość: 400 milisekund) i fast (domyślna wartość: 200 milisekund). easing* Określa typ animacji, czyli efekt przenikania (wbudowane typy podstawowe: 1i near, swing), cal 1back* Umożliwia wywołanie funkcji wykonywanej po zakończeniu działania animacji. * parametr opcjonalny 1.1.5. Anatomia metody fadeOut() Metoda fadeOut() umożliwia ukrywanie elementów poprzez animowanie skali ich prze zroczystości. $ lub jQuery (selektor) .fadeIn([duration], [easing], [ca llb a ck ]);19. $ lub jQuery — aliasy (odwołania) biblioteki jQuery. Sel ektor — umożliwia wybieranie elementów ze struktury dokumentu HTML. Parametry metody fadeOut() zawiera tabela 1.7. Tabela 1.7. Parametry metodyfadeOutQ Parametr Opis działania durati on* Określa czas odtwarzania animacji przy użyciu słów kluczowych sl ow(domyślna wartość: 600 milisekund), normal (domyślna wartość: 400 milisekund) i fast (domyślna wartość: 200 milisekund). easing* Określa typ animacji, czyli efekt przenikania (wbudowane typy podstawowe: 1i near, swing), cal 1back* Umożliwia wywołanie funkcji wykonywanej po zakończeniu działania animacji. * parametr opcjonalny 18http://api.jquery.com/fadeln/. 19http://api.jquery.com/fadeOut/.
Rozdział 1. ♦ Tworzenie zaawansowanych banerów w jQuery 21 1.1.6. Anatomia metody queue() Metoda queueO umożliwia sekwencyjne wykonywanie wielu animacji ustawionych w kolejce. $ lub jQuery (selektor),queue([queue name]. [new queue], [callback]);20 $ lub jQuery — aliasy (odwołania) biblioteki jQuery. Sel ektor — umożliwia wybieranie elementów ze struktury dokumentu HTML. Parametry metody queue() zawiera tabela 1.8. Tabela 1.8. Parametry metody queue() Parametr Opis działania queue name* Określa nazwę kolejki (domyślna nazwa to fx). new queue* Umożliwia użycie tablicy funkcji, która zastępuje dotychczasową zawartość kolejki, cal 1back* Umożliwia wywołanie funkcji wykonywanej po zakończeniu działania kolejki. * parametr opcjonalny 1.1.7. Anatomia metody dequeue() Metoda dequeue]) umożliwia usunięcie sekwencyjnie wykonywanych animacji usta wionych w kolejce, celem wykonania animacji spoza kolejki. $ lub jQuery (selektor) .dequeue][queue name]);21. $ lub jQuery — aliasy (odwołania) biblioteki jQuery. Sel ektor — umożliwia wybieranie elementów ze struktury dokumentu HTML. Parametry metody dequeue() zawiera tabela 1.9. Tabela 1.9. Parametry metody dequeue() Parametr Opis działania queue name* Określa nazwę kolejki (domyślna nazwa to fx). * parametr opcjonalny 1.1.8. Anatomia metody clearQueue() Metoda clearQueueO umożliwia usunięcie z kolejki wszystkich animacji, które nie zostały wykonane. Używanie metody cl earQueue() bez podania argumentu powoduje usunięcie animacji z domyślnej kolejki o nazwie fx. 20http://api.jquery.com/queue/. 21 http://api.jquery.com/dequeue/.
22 Część I ♦ Tworzenie animowanych banerów reklamowych SlubjQuery (selek to r).clearQueue([queue name]);22. $ lub jQuery — aliasy (odwołania) biblioteki jQuery. Sel ektor — umożliwia wybieranie elementów ze struktury dokumentu HTML. Parametry metody cl earQueue() zawiera tabela 1.10. Tabela 1.10. Parametry metody clearQueue() Parametr Opis działania queue name* Określa nazwę kolejki (domyślna nazwa to fx). parametr opcjonalny 1.1.9. Anatomia metody css() Metoda css() umożliwia stylizowanie elementów z wykorzystaniem kaskadowych arkuszy stylów. SlubjQuery (selektor) ,css(propertyName, value);23. $ lub jQuery — aliasy (odwołania) biblioteki jQuery. Sel ektor — umożliwia wybieranie elementów ze struktury dokumentu HTML. Parametry metody css() zawiera tabela 1.11. Tabela 1.11. Parametry metody css() Parametr Opis działania propertyName Nazwa właściwości CSS. value Wartość właściwości CSS. 1.2. Tworzenie projektów animowanych banerów reklamowych 1.2.1. Tworzenie banera typu Leaderboard o rozmiarze 728x90 pikseli Schemat obiektów banera typu Leaderboard o rozmiarze 728x90 pikseli zawiera rysunek 1.2. 22http://api.jquery.com/clearQueue/. 23http://api.jquery.com/css/.
Rozdział 1. ♦ Tworzenie zaawansowanych banerów w jQuery 23 W staw własny plik logo.png o wym iarach 180x90 pikseli W staw własny plik hasło.png o wym iarach 450x40 pikseli . I Logo Lorem ipsum dolor sit amet Lit ennsequat nulla sed justo dictum hendrerit nee at nisi. Asnean malesunda, quam id consequat. W staw w łasny plik tekst.png o wym iarach 415x45 pikseli W staw w łasny plik przycisk.png o wym iarach 40x40 pikseli Rysunek 1.2. Schemat obiektów bañera typu Leaderboard o rozmiarze 728 x90pikseli Opis budowy i działania animacji banera typu Leaderboard Baner składa się z czterech animowanych obiektów: logo, hasła, tekstu i przycisku. W pierwszej fazie animacji pojawia się logo w wyniku wykorzystania efektu typu easeOutElastic symulującego rozciąganie elastycznej taśmy gumowej. Następnie poja wia się hasło w wyniku zastosowania efektu typu easęOlitSOunce pozorującego trzy krotne odbicie piłki. Po haśle wsuwa się tekst w wyniku wykorzystania efektu typu eąsylnci rc, który naśladuje tzw. szybkie wsunięcie. Jako ostatni z kolejki następują cych po sobie animowanych obiektów wjeżdża migotający (zmieniający przezroczy stość) przycisk jako realizacja efektu typu aaselnQui nt. W drugiej fazie animacji, po trwającym 12 sekund jednoczesnym wyświetlaniu wszyst kich obiektów banera, następuje ich powrót na pozycje startowe, po czym animacja zostaje zapętlona i odtwarzana ponownie. Zawartość foldera o nazwie baner leaderboard 728 x 90: ♦ plik baner leaderboard.html, ♦ folder css z plikiem style.css. ♦ folderj query 1.7,1 z plikiem jquery-1. J.l.m in.js, ♦ folderjquery easing plugin ¡.3zplikiQ m jqueiy.easing.l.3.js, ♦ folderjquery functions z plikiem jquery functions.js, ♦ folder ¡mg z plikami graficznymi: ♦ logo.png — wymiary 180x90 pikseli; ♦ hasło.png — wymiary 450x40 pikseli; ♦ tekst.png — wymiary 415x45 pikseli; ♦ przycisk.png — wymiary 40x40 pikseli.
24 Część I ♦ Tworzenie animowanych banerów reklamowych Kod źródłowy pliku style.css znajduje się na listingu 1.1. Listing 1.1. Plik style.css Kod źródłowy pliku style.css Objaśnienie body { Stylizujemy element body, przypisując marginesom zewnętrznym, margin:0px; wewnętrznym i obramowaniu wartość równą 0 pikseli. padding:Opx; border:0px;} img { Formatujemy element img, przypisując marginesom zewnętrznym, margin:0px; wewnętrznym i obramowaniu wartość równą 0 pikseli. padding:Opx; border:0px;} div#kontener { Stylizujemy wyśrodkowany kontener, z obramowaniem wi dth:728px; o odpowiednich wymiarach, w ramach którego wyświetlać się będą height:90px; dynamicznie animowane obiekty banera. Aby obiekty banera overflow:hidden; pojawiały się wyłącznie wewnątrz obramowania, a poza jego margin top:100px; obszarem pozostawały niewidoczne, ustawiamy dla kontenera margin bottom:Opx; właściwość overfl owz wartością hi dden. margin right:auto; margin left:auto; padding:Opx; border:lpx solid #c0c0c0;} div#logo { Ustawiamy położenie i wymiary dla obiektu 1ogo z wykorzystaniem position:relative; pozycjonowania względnego, które zachowuje element w rozkładzie top:Opx; zawartości witryny, a jednocześnie przed wyświetleniem strony left: 200px; w przeglądarce przesuwa logo z jego domyślnego położenia wi dth:180px; na docelową pozycję. height:90px;} div#haslo { Ustawiamy położenie i wymiary dla obiektu hasl o position:relative; z wykorzystaniem pozycjonowania względnego. top: 90px; left:750px; wi dth:450px; height:40px;} div#tekst { Ustawiamy położenie i wymiary dla obiektu tekst position:relative; z wykorzystaniem pozycjonowania względnego. top:10px; left:225px; wi dth:415px; height:45px;} div#przycisk { Ustawiamy położenie i wymiary dla obiektu przyci sk position:relative; z wykorzystaniem pozycjonowania względnego. top: 140px; left:750px; background co lo r:# ffffff; width:40px; height:40px;} Kod źródłowy pliku baner leaderboard.html znajduje się na listingu 1.2. Kod źródłowy plikuj query functions.js znajduje się na listingu 1.3.
Rozdział 1. ♦ Tworzenie zaawansowanych banerów w jQuery 25 Listing 1.2. Plikbaner leaderboard.html Kod źródłowy pliku baner leaderboard.html<1ink rel="stylesheet" href="css/style.css" ^►type="text/css" />
26 Część I ♦ Tworzenie animowanych banerów reklamowych Listing 1.3. Plikjquery functions.js ciąg dalszy Kod źródłowy pliku jquery functions.js function animacja dwa(){ $ ( ' # h a s l o ' ) .animate( { t o p : ' 9 0 p x ' , "-►left:' 210px'} ,2000,'easeOutBounce' ,function(){anim acja tnzyO }) .del ay (8500) ,animate({top: ’ 90p x‘ , l e f t : ’750px’ } , 2 0 0 0 , ’easelnBack ’ );} function animacja tnzyO{ $ (’#tekst’) ,animate({top: '85px'. le f t :'225px'},900,'easelnCinc' ,function(){animacja cztenyO}) .del a y (8000),animate({top:' 10px'.left: '225px'} ,2000,'jswing');} function animacja czteny(){ $ ('#pnzycisk' ) .animate({top:' 140px', "-►left: '670px'} ,900,'easelnQuint', function( ) { ani macja()}) ,animate( {opacity '.5'},500) ,animate( {opacity '1 '} ,500) ,animate( {opacity '.5'},500) ,animate( {opacity '1 '} ,500) ,animate( {opacity '.5'},500) ,animate( {opacity '1 '} ,500) ,animate( {opacity '.5'},500) ,animate( {opacity '1 '} ,500) ,animate( {opacity '.5'},500) ,animate( {opacity '1 '} ,500) ,animate( {opacity '.5'},500) ,animate( {opacity '1 '} ,500) ,animate( {opacity '.5'},500) ,animate( {opacity '1 '} ,500) ,animate( {opacity '.5'},500) ,animate( {opacity '1 '} ,500) ,animate( {top:' 140px',le f t : '750px'} 500,'jswing');} Objaśnienie Definicja funkcji animacja dwa(), która poprzez użycie selektora identyfikatora #hasl o umożliwia dostęp do elementu divo nazwie hasl o w obrębie struktury składni w pliku baner leaderboard.html. Funkcja animuje zawartość elementu di v, tzn. plik haslo.png, który zmienia pozycję na stronie WWW. Następnie funkcja animacja dwa() wywohije funkcję animacja trzyO. Definicja funkcji animacja trzy O, która poprzez użycie selektora identyfikatora #tekst umożliwia dostęp do elementu divo nazwie tekst w obrębie struktury składni w pliku baner leaderboard.html. Funkcja animuje zawartość elementu di v, tzn. plik tekst.png, który zmienia pozycję na stronie WWW. Następnie funkcja animacja trzyO wywołuje funkcję animacja cztery(). Definicja funkcji animacja cztery O, która poprzez użycie selektora identyfikatora #przyci sk umożliwia dostęp do elementu d ivo nazwie przyci sk w obrębie struktury składni w pliku baner leaderboard.html. Funkcja animuje zawartość elementu div, tzn. plikprzycisk.png, który zmienia przezroczystość i pozycję na stronie WWW. Następnie funkcja animacja cztery () wywołuje funkcję animacja(), dzięki czemu animacja bañera zostaje zapętlona, a proces odtwarzania jest powtarzany. 1.2.2. Tworzenie banera typu Wide Skyscraper o rozmiarze 160x600 pikseli Schemat obiektów banera typu Wide Skyscraper o rozmiarze 160x600 pikseli zawiera rysunek 1.3.
Rozdział 1. ♦ Tworzenie zaawansowanych banerów w ¡Query 27 Rysunek 1.3. Schemat obiektów banera typu Wide Skyscraper o rozmiaizre 160x600 pikseli Lorem ipsum dolor - sit amet W :!aw i-ii jny plik h : o wymiarach 160x270 pikseli U t consequat nulla sed justo dictum hendnerit nec at nisi. Aenean malesunda, quam id consequat. W staw własny plik tekst.png o wymiarach 160x190 pikseli Wstaw własny plih przycisk.pny u wymiarach 40x40 pikseli Opis budowy i działania animacji banera typu Wide Skyscraper Baner składa się z czterech animowanych obiektów: logo, hasła, tekstu i przycisku. W pierwszej fazie animacji pojawia się logo w wyniku wykorzystania efektu explode, który powoduje złożenie logo z szesnastu części. Następnie pojawia się hasło w wyniku zastosowania efektu efektu drop. Po haśle wsuwa się tekst przy użyciu efektu sl i de. Na końcu zostaje animowany przycisk w wyniku wykorzystania efektu shake. W drugiej fazie animacja zostaje zapętlona i odtwarzana ponownie. Zawartość folderu o nazwie baner wide skyscraper 160 x. 600: ♦ plik baner wide skyscraper.html, ♦ folder css z plikiem style.css. ♦ folderj query 1.7.1 z plikiemj query-1.7.1. min.js, ♦ folderjquery functions z plikiem jquery fnnctions.js, ♦ folderjquery-ni-1.10.O.ciistom z plikiem jquery-ui-l .10.0.custom, min.fs, ♦ folder effects z plikami biblioteki ¡Query Ul 1.10.0: ♦ jqnery.effects.bluid.js, ♦ j query, effects, bounce.js.
28 Część I ♦ Tworzenie animowanych banerów reklamowych ♦ jquery.effects,clip.js, ♦ jquery. effects,core.js, ♦ jquery. effects.drop.js, ♦ jquery, effects.explode.js, ♦ jquery, effectsfadejs, ♦ jquery,effects.fold.js, ♦ j query.effects.highlight.js, ♦ jquery.effects.pulsate.js, ♦ jquery, effects.scale.js, ♦ jquery, effects.shake.js, ♦ jquery,effects.slide.js, ♦ jquery. effects.trartsfer.js, ♦ folder img z plikami graficznymi: ♦ logo.png — wymiary 160x90 pikseli; ♦ haslo.png — wymiary 160x270 pikseli; ♦ tekst.png — wymiary 160x190 pikseli; ♦ przycisk.png — wymiary 40x40 pikseli. Kod źródłowy pliku style.css znajduje się na listingu 1.4. Listing 1.4. Plik style.css Kod źródłowy pliku style.css Objaśnienie body { Formatujemy element body, przypisując marginesom zewnętrznym, margin:0px; wewnętrznym i obramowaniu wartość równą 0 pikseli. padding:Opx; border:0px;} img { Formatujemy element img, przypisując marginesom zewnętrznym, margin:0px; wewnętrznym i obramowaniu wartość równą 0 pikseli. padding:Opx; border:0px;} div#kontener { Formatujemy wyśrodkowany kontener, z obramowaniem wi dth:160px; o odpowiednich wymiarach, w ramach którego wyświetlać się będą height:600px; dynamicznie animowane obiekty banera. Aby obiekty banera overflow:visible; pojawiały się wyłącznie wewnątrz obramowania, a poza jego margin top:100px; obszarem pozostawały niewidoczne, ustawiamy dla kontenera margin bottom:Opx; właściwość overfl owz wartością hi dden. margin right:auto; margin left:auto; padding:Opx; border:lpx solid #c0c0c0;}