jQuery. Tworzenie animowanych witryn internetowych 978-83-246-6235-7 [PDF]

Zitiervorschau

---

Wszelkie prawa zastrzeone. Nieautoryzowane rozpowszechnianie caoci lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metod kserograficzn, fotograficzn, a take kopiowanie ksiki na noniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki wystpujce w tekcie s zastrzeonymi znakami firmowymi bd towarowymi ich wacicieli. Autor oraz Wydawnictwo HELION dooyli wszelkich stara, by zawarte w tej ksice informacje byy kompletne i rzetelne. Nie bior jednak adnej odpowiedzialnoci ani za ich wykorzystanie, ani za zwizane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponosz równie adnej odpowiedzialnoci za ewentualne szkody wynike z wykorzystania informacji zawartych w ksice. Redaktor prowadzcy: Ewelina Burska Autor zdj : Marcin Majkowski Projekt okadki: Studio Gravite/Olsztyn Obarek, Pokoski, Pazdrijowski, Zaprucki Materiay graficzne na okadce zostay wykorzystane za zgod Shutterstock. Wydawnictwo HELION ul. Kociuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: [email protected] WWW: http://helion.pl (ksigarnia internetowa, katalog ksiek) Drogi Czytelniku! Jeeli chcesz oceni t ksik, zajrzyj pod adres http://helion.pl/user/opinie?jqtwan_ebook Moesz tam wpisa swoje uwagi, spostrzeenia, recenzj. Materiay do ksiki mona znale pod adresem: ftp://ftp.helion.pl/przyklady/jqtwan.zip

ISBN: 978-83-246-6235-7 Copyright © Helion 2013 Printed in Poland.

x Poleć książkę na Facebook.com x Kup w wersji papierowej x Oceń książkę

x Księgarnia internetowa x Lubię to! » Nasza społeczność

onie Aldonie i córce Julii

Spis treci Wstp ................................................................................................................. 7

Cz I

Tworzenie animowanych banerów reklamowych ............... 9

Rozdzia 1. Tworzenie zaawansowanych banerów w jQuery ................................ 11 1.1. Wprowadzenie ....................................................................................................... 11 1.1.1. Anatomia metody animate() ........................................................................ 13 1.1.2. Anatomia metody delay() ............................................................................ 14 1.1.3. Anatomia metody effect() ............................................................................ 16 1.1.4. Anatomia metody fadeIn() .......................................................................... 20 1.1.5. Anatomia metody fadeOut() ........................................................................ 20 1.1.6. Anatomia metody queue() ........................................................................... 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 728×90 pikseli ................... 22 1.2.2. Tworzenie banera typu Wide Skyscraper o rozmiarze 160×600 pikseli .......... 26 1.2.3. Tworzenie banera typu Medium Rectangle o rozmiarze 300×250 pikseli ....... 31 1.2.4. Tworzenie banera typu Rectangle o rozmiarze 180×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 mouseout() .................................................................. 42 2.1.3. Anatomia zdarzenia mouseenter() ............................................................... 43 2.1.4. Anatomia zdarzenia mouseleave() ............................................................... 43 2.1.5. Anatomia zdarzenia hover() ........................................................................ 44 2.1.6. Anatomia zdarzenia click() .......................................................................... 44 2.1.7. Anatomia metody slideUp() ........................................................................ 45 2.1.8. Anatomia metody slideDown() ................................................................... 45 2.1.9. Anatomia metody slideToggle() .................................................................. 46 2.1.10. Anatomia metody show() .......................................................................... 46 2.1.11. Anatomia metody hide() ............................................................................ 47 2.1.12. Anatomia metody fadeTo() ....................................................................... 47

6

Spis treci 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 menu ............................................................ 51 2.2.1. Tworzenie rozsuwanego menu poziomego .................................................. 51 2.2.2. Tworzenie rozsuwanego menu pionowego .................................................. 54 2.2.3. Tworzenie menu z uyciem wielu efektów specjalnych .............................. 58 2.2.4. Tworzenie menu wielopoziomowego .......................................................... 70

Rozdzia 3. Tworzenie zaawansowanych galerii fotografii w 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 waciwoci length .................................................................... 85 3.2. Tworzenie projektów animowanych galerii fotografii .......................................... 86 3.2.1. Tworzenie galerii fotografii z wywietlanym dynamicznie systemem nawigacji i moliwoci 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

Wstp Biblioteka jQuery a tworzenie animowanych witryn internetowych Programistyczna biblioteka jQuery to jeden z najpopularniejszych darmowych frameworków skryptowego jzyka programowania JavaScript. Obok innych tego typu bibliotek, takich jak: Prototype, Dojo Toolkit, script.aculo.us czy MooTools, stanowi niezbdne i niezastpione narzdzie dla webmasterów projektujcych animowane, interaktywne i dynamiczne witryny internetowe. Biblioteka jQuery, ze wzgldu na moliwo obsugi zdarze, rónego rodzaju metod animacyjnych i efektów specjalnych oraz kompatybilno w stosunku do wikszoci przegldarek internetowych czy bardzo popularnych obecnie urzdze mobilnych, stanowi powan konkurencj dla technologii Flash i obiektowego jzyka programowania ActionScript.

Co znajdziesz w tej ksice? Ksika skada si z piciu rozdziaów prezentujcych zastosowanie biblioteki jQuery w tworzeniu animowanych witryn internetowych. Kady rozdzia zawiera wyczerpujco opisane konkretne zagadnienie. Czytelnik ma moliwo wyboru interesujcego go problemu z danego rozdziau, niemniej jednak kompleksowe zapoznanie si z treci ksiki, zgodnie z kolejnoci zaproponowan w spisie treci, gwarantuje dogbne poznanie metod i technik animacyjnych opartych na frameworku jQuery. Rozdzia 1. prezentuje filozofi, metodologi, typy animacji i efekty specjalne wykorzystywane do tworzenia animowanych banerów reklamowych. Ponadto omówiono w nim struktur banerów internetowych oraz sposoby manipulowania poszczególnymi skadowymi banera w zalenoci od czasu trwania animacji i ustalonej kolejnoci.

8

Wstp

Rozdzia 2. powicony zosta przede wszystkim problematyce obsugi zdarze myszy umoliwiajcych interakcj uytkownika 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 obsugi zdarze myszy w powizaniu z metodami animacyjnymi i efektami specjalnymi. Rozdzia 4. przedstawia caociowy proces tworzenia animowanego szablonu dwukolumnowej strony internetowej skadajcej si z: rotatora zdj , wysuwanego menu, animowanej lewej i prawej sekcji tekstowej oraz stopki. Rozdzia 5. powicono obsudze interaktywnego formularza internetowego, automatycznie kontrolujcego wymagalno uzupenienia pól obowizkowych i weryfikujcego poprawno danych wprowadzonych przez uytkownika.

Dla kogo przeznaczona jest ta ksika? Ksika, ze wzgldu na szeroki zakres podejmowanej problematyki, dotyczcej animowania witryn internetowych, przeznaczona jest zarówno dla rednio zaawansowanych projektantów stron WWW, jak równie dla pocztkujcych webmasterów. Dla tych drugich zgbienie wiedzy prezentowanej w ksice uatwi fakt, e zawiera ona komplet gotowych przykadów, które z powodzeniem mona zastosowa w tworzonych projektach witryn internetowych.

Materiay Wszystkie niezbdne materiay (pliki graficzne i pene kody ródowe) w postaci gotowych przykadów przeznaczonych do zastosowania na stronach WWW mona znale pod adresem ftp://ftp.helion.pl/przyklady/jqtwan.zip.

CZ I

TWORZENIE ANIMOWANYCH BANERÓW REKLAMOWYCH

10

Cz I i Tworzenie animowanych banerów reklamowych

Rozdzia 1. i Tworzenie zaawansowanych banerów w jQuery

11

Rozdzia 1.

Tworzenie zaawansowanych banerów w jQuery 1.1. Wprowadzenie Baner internetowy jest to wirtualna (cyfrowa) forma graficznej reklamy umieszczonej w okrelonym miejscu strony WWW, prezentujcej kombinacj statycznych lub animowanych zdj , tekstów czy filmów, zaprojektowanych w celu przekazania marketingowej informacji.

Animacja komputerowa jest to programistycznie generowany widok cyfrowy sekwencyjnie zmienianych w czasie obiektów, np.: zdj , tekstów lub filmów tworzcych wra enie ruchu.

W rozdziale pierwszym wykonamy cztery animowane banery reklamowe nastpujcych typów1: 1. Leaderboard o rozmiarze 728×90 pikseli (px). 2. Wide Skyscraper o rozmiarze 160×600 pikseli. 3. Medium Rectangle o rozmiarze 300×250 pikseli. 4. Rectangle o rozmiarze 180×150 pikseli.

1

http://www.iab.net/guidelines/508676/508767/UAP.

Cz I i Tworzenie animowanych banerów reklamowych

12

Powysze banery znajduj zastosowanie jako standardowe reklamy internetowe ustanowione przez Europejskie Stowarzyszenie Reklamy Interaktywnej (ang. EIAA — European Interactive Advertising Association) i Biuro Reklamy Interaktywnej w Europie (ang. IAB Europe — Interactive Advertising Bureau Europe)2. Internetowe banery reklamowe charakteryzuj nastpujce standardy3:  okrelony rozmiar, czyli wielko banera mierzona w pikselach;  okrelona wielko pliku — maksymalnie 40 kilobajtów;  okrelony czas trwania animacji — maksymalnie 15 sekund;  okrelony maksymalny rozmiar dla tzw. Hot Spot-u, tzn. interaktywnego

przycisku, którego wielko nie moe przekracza ¼ wielkoci banera;  okrelona pozycja na warstwach nakadanych elementów w stosie z zakresu

od 0 do 4999;  odpowiedni dobór wielkoci i kroju czcionki oraz szaty graficznej odróniajcej

si od pozostaej zawartoci strony WWW;  okrelone maksymalne zuycie procesora w trakcie odtwarzania animacji

o górnej granicy 20%;  okrelona ilo odtwarzanych klatek na sekund w liczbie 24.

Internetowe banery reklamowe przygotujemy na podstawie nastpujcych technologii: 4

1. XHTML 1.0 (The Extensible HyperText Markup Language) . 2. CSS 3.0 (Cascading Style Sheets)5. 3. Biblioteka jQuery 1.7.16 z dodatkiem Easing 1.37. 4. Biblioteka jQuery UI 1.10.08. 5. Biblioteka jQuery TOOLS9. 6. JavaScript10.

2

http://www.iab.net/guidelines/508676/508767/ad_unit. http://www.iab.net/guidelines/508676/508767/displayguidelines. 4 http://www.w3.org/TR/xhtml1/. 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/. 10 http://ecma-international.org/ecma-262/5.1/. 3

Rozdzia 1. i Tworzenie zaawansowanych banerów w jQuery

13

1.1.1. Anatomia metody animate() Metoda animate() umoliwia tworzenie animacji z wykorzystaniem:  numerycznych waciwoci CSS,  czasu odtwarzania animacji,  efektów specjalnych,  funkcji wykonywanych po zakoczeniu dziaania animacji. $ lub jQuery (selektor).animate({properties}, [duration], [easing], ´[complete]);11. $ lub jQuery — aliasy (odwoania) biblioteki jQuery12. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML13.

Parametry metody animate() zawiera tabela 1.1. Tabela 1.1. Parametry metody animate() Parametr

Opis dziaania

properties

Umoliwia uycie dowolnej numerycznej waciwoci CSS kontrolowanej przez warto liczbow. Dla waciwoci pisanych w kodzie CSS z dywizem stosujemy tzw. notacj wielbdzi (ang. lower camel case), np. fontSize zamiast font-size itd.

duration*

Okrela czas odtwarzania animacji przy uyciu sów kluczowych slow (domylna warto : 600 milisekund), normal (domylna warto : 400 milisekund) i fast (domylna warto : 200 milisekund). Ponadto parametr umoliwia okrelanie czasu odtwarzania animacji poprzez zastosowanie liczb cakowitych wyraonych w milisekundach (1000 ms = 1 sekunda). Okrela typ animacji, czyli efekt przenikania (wbudowane typy podstawowe:

easing*

linear, swing). complete*

Umoliwia wywoanie funkcji wykonywanej po zakoczeniu dziaania 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, udostpnia 32 typy animacji. Typy te zawiera tabela 1.2. Diagramy typów animacji, prezentujc graficznie okrelony ksztat linii, która charakteryzuje przebieg animacji, wskazuj momenty przyspieszenia lub zwolnienia tempa animacji14. Diagramy typów animacji zawiera rysunek 1.1 (patrz s. 15 i 16). 11

http://api.jquery.com/animate/. http://api.jquery.com/jQuery/#jQuery1. 13 http://api.jquery.com/category/selectors/. 14 http://jqueryui.com/demos/effect/#easing. 12

Cz I i Tworzenie animowanych banerów reklamowych

14

Tabela 1.2. Typy animacji (efektów przenikania) dodatku Easing 1.3 biblioteki jQuery Typ

Opis dziaania

Linear

Rozpoczyna, kontynuuje i koczy animacj ze sta prdkoci, bez zastosowania wizualizacji pynnego wygadzenia ruchu czy symulacji przyspieszenia lub zwolnienia tempa odtwarzania animacji.

Swing

Rozpoczyna, kontynuuje i koczy animacj ze sta prdkoci z zastosowaniem wizualizacji pynnego wygadzenia ruchu.

easyInQuad easyInCubic easyInQuart easyInQuint easyInSine easyInExpo easyInCirc easyInElastic easyInBack easyInBounce

Rozpoczyna animacj z prdkoci równ zero, a nastpnie przyspiesza.

easyOutQuad easyOutCubic easyOutQuart easyOutQuint easyOutSine easyOutExpo easyOutCirc easyOutElastic easyOutBack easyOutBounce

Rozpoczyna animacj z pen prdkoci, a nastpnie zwalnia.

easyInOutQuad easyInOutCubic easyInOutQuart easyInOutQuint easyInOutSine easyInOutExpo easyInOutCirc easyInOutElastic easyInOutBack easyInOutBounce

Rozpoczyna animacj z prdkoci równ zero, nastpnie przyspiesza do poowy trwania animacji, po czym zwalnia do prdkoci równej zero.

1.1.2. Anatomia metody delay() Metoda delay() umoliwia opónienie wykonywania w czasie nastpujcych po sobie kolejno animacji. $ lub jQuery (metoda).delay(duration, [queueName]);15. $ lub jQuery — aliasy (odwoania) biblioteki jQuery.

15

http://api.jquery.com/delay/.

Rozdzia 1. i Tworzenie zaawansowanych banerów w jQuery

In

Out

Diagramy typów animacji InOut

15

linear

swing

Rysunek 1.1. Diagramy typów animacji (witryna internetowa biblioteki jQuery UI) cig dalszy rysunku na nastpnej stronie

Cz I i Tworzenie animowanych banerów reklamowych

16

In

Out

Diagramy typów animacji InOut

linear

swing

Rysunek 1.1. Diagramy typów animacji (witryna internetowa biblioteki jQuery UI) — cig dalszy

Parametry metody delay() zawiera tabela 1.3. Tabela 1.3. Parametry metody delay() Parametr

Opis dziaania

duration

Okrela czas opónienia odtwarzania animacji przy uyciu sów kluczowych slow (domylna warto : 600 milisekund), normal (domylna warto : 400 milisekund) i fast (domylna warto : 200 milisekund).

queueName*

Okrela nazw kolejki.

* — parametr opcjonalny

1.1.3. Anatomia metody effect() Metoda effect() umoliwia tworzenie animacji z wykorzystaniem:

Rozdzia 1. i Tworzenie zaawansowanych banerów w jQuery

17

 efektów specjalnych,  czasu odtwarzania animacji,  funkcji wykonywanych po zakoczeniu dziaania animacji. $ lub jQuery (selektor).effect(effect, [options], [speed], [callback]);16. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody effect() zawiera tabela 1.4. Tabela 1.4. Parametry metody effect() Parametr

Opis dziaania

effect

Okrela nazw efektu.

options*

Umoliwia ustawienie parametrów efektu.

speed*

Okrela czas odtwarzania animacji przy uyciu sów kluczowych slow (domylna warto : 600 milisekund), normal (domylna warto : 400 milisekund) i fast (domylna warto : 200 milisekund).

callback*

Umoliwia wywoanie funkcji wykonywanej po zakoczeniu dziaania animacji.

* — parametr opcjonalny

Biblioteka jQuery UI udostpnia 15 typów animacji, które wykorzystuje metoda effect()17. Typy animacji zawiera tabela 1.5. Tabela 1.5. Typy animacji (efektów specjalnych) biblioteki interfejsu uytkownika jQuery UI Wartoci domylne parametru

Inne dopuszczalne wartoci parametru

Typ

Opis dziaania

Argumenty

Blind

Animowany element jest rozwijany lub zwijany w kierunku pionowym lub poziomym.

direction

vertical

horizontal

mode

hide

show

Animowany element jest powikszany lub pomniejszany w kierunku pionowym lub poziomym.

direction

vertical

horizontal

mode

hide

show

Animowany element jest przesuwany w okrelonym kierunku.

direction

left

right, up, down

mode

hide

show

Clip

Drop

16 17

http://docs.jquery.com/UI/Effects/effect. http://jqueryui.com/docs/effect/, http://docs.jquery.com/UI/Effects.

Cz I i Tworzenie animowanych banerów reklamowych

18

Tabela 1.5. Typy animacji (efektów specjalnych) biblioteki interfejsu uytkownika jQuery UI — cig dalszy Typ

Opis dziaania

Argumenty

Wartoci domylne parametru

Explode

Animowany element jest ukrywany lub pokazywany poprzez rozdzielenie lub poczenie tworzcych go czci.

pieces

9

liczby z przedziau 9 – 340

mode

hide

show

Animowany element zanika lub pojawia si.

—

—

—

—

—

—

Fade

Fold

Puff

Slide

Scale

Inne dopuszczalne wartoci parametru

Animowany element jest ukrywany lub pokazywany.

horizFirst

false

true

mode

hide

show

size

15

liczba cakowita w pikselach

Animowany element jest pomniejszany lub powikszany.

mode

hide

show

percent

150

liczba cakowita w pikselach

Animowany element jest przesuwany w okrelonym kierunku.

direction

left

right, up, down

distance

el.outerWidth

liczba cakowita w pikselach mniejsza od wysokoci lub szerokoci animowanego elementu

mode

show

hide

direction

both

vertical, horizontal

from

—

liczba cakowita okrelajca pocztkowe wymiary elementu

origin

['middle', 'center']

parametr tablicowy umoliwiajcy ustawienie punktu zanikania lub pokazywania elementu

percent

0/100

liczba cakowita okrelajca skal pomniejszenia lub powikszenia elementu

scale

both

parametr okrelajcy obszar skalowanego elementu (zawarto , obramowanie i marginesy wewntrzne) lub tylko zawarto elementu

Animowany element jest ukrywany lub pokazywany poprzez skalowanie wymiarów.

Rozdzia 1. i Tworzenie zaawansowanych banerów w jQuery

19

Tabela 1.5. Typy animacji (efektów specjalnych) biblioteki interfejsu uytkownika jQuery UI — cig dalszy Wartoci domylne parametru

Inne dopuszczalne wartoci parametru

direction

up

down, left, right

distance

20

liczba cakowita okrelajca odlego odbijania

mode

effect

show, hide

times

5

liczba cakowita okrelajca czas trwania animacji kolory w notacji heksadecymalnej

Typ

Opis dziaania

Argumenty

Bounce

Animowany efekt improwizuje odbijanie elementu w pionie lub poziomie.

Highlight

Animowany element jest podwietlany okrelonym kolorem.

color

#ffff99

mode

show

hide

Pulsate

Animowany efekt pulsuje i zmienia przezroczysto elementu.

times

5

liczba cakowita okrelajca powtórzenia efektu pulsowania

mode

show

hide

Shake

Animowany element zmienia pooenie, naladujc efekt potrzsania.

direction

left

right, up, down

distance

20

liczba cakowita okrelajca odlego potrzsania elementu

times

3

liczba cakowita okrelajca powtórzenia efektu potrzsania

from

—

liczba cakowita okrelajca pocztkowe wymiary elementu

to

—

liczba cakowita okrelajca kocowe wymiary elementu

origin

['top', 'left']

parametr tablicowy umoliwiajcy ustawienie punktu zanikania lub pokazywania elementu

scale

both

parametr okrelajcy obszar skalowanego elementu (zawarto , obramowanie i marginesy wewntrzne) lub tylko zawarto elementu

className

—

nazwa klasy CSS

to

—

selektor jQuery

Size

Transfer

Animowany element jest powikszany lub pomniejszany poprzez zmian wymiarów.

Animowany efekt przenosi obramowanie elementu na inny element.

Cz I i Tworzenie animowanych banerów reklamowych

20

1.1.4. Anatomia metody fadeIn() Metoda fadeIn() umoliwia pokazywanie elementów poprzez animowanie skali ich przezroczystoci. $ lub jQuery (selektor).fadeIn([duration], [easing], [callback]);18. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody fadeIn() zawiera tabela 1.6. Tabela 1.6. Parametry metody fadeIn() Parametr

Opis dziaania

duration*

Okrela czas odtwarzania animacji przy uyciu sów kluczowych slow (domylna warto : 600 milisekund), normal (domylna warto : 400 milisekund) i fast (domylna warto : 200 milisekund).

easing*

Okrela typ animacji, czyli efekt przenikania (wbudowane typy podstawowe: linear, swing).

callback*

Umoliwia wywoanie funkcji wykonywanej po zakoczeniu dziaania animacji.

* — parametr opcjonalny

1.1.5. Anatomia metody fadeOut() Metoda fadeOut() umoliwia ukrywanie elementów poprzez animowanie skali ich przezroczystoci. $ lub jQuery (selektor).fadeIn([duration], [easing], [callback]);19. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody fadeOut() zawiera tabela 1.7. Tabela 1.7. Parametry metody fadeOut() Parametr

Opis dziaania

duration*

Okrela czas odtwarzania animacji przy uyciu sów kluczowych slow (domylna warto : 600 milisekund), normal (domylna warto : 400 milisekund) i fast (domylna warto : 200 milisekund).

easing*

Okrela typ animacji, czyli efekt przenikania (wbudowane typy podstawowe: linear, swing).

callback*

Umoliwia wywoanie funkcji wykonywanej po zakoczeniu dziaania animacji.

* — parametr opcjonalny

18 19

http://api.jquery.com/fadeIn/. http://api.jquery.com/fadeOut/.

Rozdzia 1. i Tworzenie zaawansowanych banerów w jQuery

21

1.1.6. Anatomia metody queue() Metoda queue() umoliwia sekwencyjne wykonywanie wielu animacji ustawionych w kolejce. $ lub jQuery (selektor).queue([queue name], [new queue], [callback]);20. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody queue() zawiera tabela 1.8. Tabela 1.8. Parametry metody queue() Parametr

Opis dziaania

queue name*

Okrela nazw kolejki (domylna nazwa to fx).

new queue*

Umoliwia uycie tablicy funkcji, która zastpuje dotychczasow zawarto kolejki.

callback*

Umoliwia wywoanie funkcji wykonywanej po zakoczeniu dziaania kolejki.

* — parametr opcjonalny

1.1.7. Anatomia metody dequeue() Metoda dequeue() umoliwia usunicie sekwencyjnie wykonywanych animacji ustawionych w kolejce, celem wykonania animacji spoza kolejki. $ lub jQuery (selektor).dequeue([queue name]);21. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody dequeue() zawiera tabela 1.9. Tabela 1.9. Parametry metody dequeue() Parametr

Opis dziaania

queue name*

Okrela nazw kolejki (domylna nazwa to fx).

* — parametr opcjonalny

1.1.8. Anatomia metody clearQueue() Metoda clearQueue() umoliwia usunicie z kolejki wszystkich animacji, które nie zostay wykonane. Uywanie metody clearQueue() bez podania argumentu powoduje usunicie animacji z domylnej kolejki o nazwie fx. 20 21

http://api.jquery.com/queue/. http://api.jquery.com/dequeue/.

Cz I i Tworzenie animowanych banerów reklamowych

22

$ lub jQuery (selektor).clearQueue([queue name]);22. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody clearQueue() zawiera tabela 1.10. Tabela 1.10. Parametry metody clearQueue() Parametr

Opis dziaania

queue name*

Okrela nazw kolejki (domylna nazwa to fx).

* — parametr opcjonalny

1.1.9. Anatomia metody css() Metoda css() umoliwia stylizowanie elementów z wykorzystaniem kaskadowych arkuszy stylów. $ lub jQuery (selektor).css(propertyName, value);23. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody css() zawiera tabela 1.11. Tabela 1.11. Parametry metody css() Parametr

Opis dziaania

propertyName

Nazwa waciwoci CSS.

value

Warto waciwoci CSS.

1.2. Tworzenie projektów animowanych banerów reklamowych 1.2.1. Tworzenie banera typu Leaderboard o rozmiarze 728×90 pikseli Schemat obiektów banera typu Leaderboard o rozmiarze 728×90 pikseli zawiera rysunek 1.2. 22 23

http://api.jquery.com/clearQueue/. http://api.jquery.com/css/.

Rozdzia 1. i Tworzenie zaawansowanych banerów w jQuery

23

Rysunek 1.2. Schemat obiektów banera typu Leaderboard o rozmiarze 728×90 pikseli

Opis budowy i dziaania animacji banera typu Leaderboard Baner skada si z czterech animowanych obiektów: logo, hasa, tekstu i przycisku. W pierwszej fazie animacji pojawia si logo w wyniku wykorzystania efektu typu easeOutElastic symulujcego rozciganie elastycznej tamy gumowej. Nastpnie pojawia si haso w wyniku zastosowania efektu typu easeOutBounce pozorujcego trzykrotne odbicie piki. Po hale wsuwa si tekst w wyniku wykorzystania efektu typu easyInCirc, który naladuje tzw. szybkie wsunicie. Jako ostatni z kolejki nastpujcych po sobie animowanych obiektów wjeda migotajcy (zmieniajcy przezroczysto ) przycisk jako realizacja efektu typu easeInQuint. W drugiej fazie animacji, po trwajcym 12 sekund jednoczesnym wywietlaniu wszystkich obiektów banera, nastpuje ich powrót na pozycje startowe, po czym animacja zostaje zaptlona i odtwarzana ponownie. Zawarto folderu o nazwie baner_leaderboard_728_x_90:  plik baner_leaderboard.html,  folder css z plikiem style.css,  folder jquery_1.7.1 z plikiem jquery-1.7.1.min.js,  folder jquery_easing_plugin_1.3 z plikiem jquery.easing.1.3.js,  folder jquery_functions z plikiem jquery_functions.js,  folder img z plikami graficznymi:  logo.png — wymiary 180×90 pikseli;  haslo.png — wymiary 450×40 pikseli;  tekst.png — wymiary 415×45 pikseli;  przycisk.png — wymiary 40×40 pikseli.

Cz I i Tworzenie animowanych banerów reklamowych

24

Kod ródowy pliku style.css znajduje si na listingu 1.1. Listing 1.1. Plik style.css Kod ródowy pliku style.css

Objanienie

body { margin:0px; padding:0px; border:0px;} img { margin:0px; padding:0px; border:0px;} div#kontener { width:728px; height:90px; overflow:hidden; margin-top:100px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:0px; border:1px solid #c0c0c0;} div#logo { position:relative; top:0px; left:-200px; width:180px; height:90px;} div#haslo { position:relative; top:-90px; left:750px; width:450px; height:40px;} div#tekst { position:relative; top:10px; left:225px; width:415px; height:45px;} div#przycisk { position:relative; top:-140px; left:750px; background-color:#ffffff; width:40px; height:40px;}

Stylizujemy element body, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Formatujemy element img, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Stylizujemy wyrodkowany kontener, z obramowaniem o odpowiednich wymiarach, w ramach którego wywietla si bd dynamicznie animowane obiekty banera. Aby obiekty banera pojawiay si wycznie wewntrz obramowania, a poza jego obszarem pozostaway niewidoczne, ustawiamy dla kontenera waciwo overflow z wartoci hidden.

Ustawiamy pooenie i wymiary dla obiektu logo z wykorzystaniem pozycjonowania wzgldnego, które zachowuje element w rozkadzie zawartoci witryny, a jednoczenie przed wywietleniem strony w przegldarce przesuwa logo z jego domylnego pooenia na docelow pozycj. Ustawiamy pooenie i wymiary dla obiektu haslo z wykorzystaniem pozycjonowania wzgldnego.

Ustawiamy pooenie i wymiary dla obiektu tekst z wykorzystaniem pozycjonowania wzgldnego.

Ustawiamy pooenie i wymiary dla obiektu przycisk z wykorzystaniem pozycjonowania wzgldnego.

Kod ródowy pliku baner_leaderboard.html znajduje si na listingu 1.2. Kod ródowy pliku jquery_functions.js znajduje si na listingu 1.3.

Rozdzia 1. i Tworzenie zaawansowanych banerów w jQuery

25

Listing 1.2. Plik baner_leaderboard.html Kod ródowy pliku baner_leaderboard.html

Objanienie

Doczamy do strony internetowej zewntrzny plik przechowujcy kaskadowe arkusze stylów. Doczamy do strony internetowej zewntrzny plik przechowujcy bibliotek jQuery. Doczamy do strony internetowej zewntrzny plik przechowujcy dodatek Easing 1.3 biblioteki jQuery.











Doczamy do strony internetowej zewntrzny plik przechowujcy skrypt jQuery animujcy obiekty banera. Tworzymy element div, który przechowuje skadowe elementy banera. Tworzymy element div, który przechowuje obrazek logo.png. Tworzymy element div, który przechowuje obrazek haslo.png. Tworzymy element div, który przechowuje obrazek tekst.png. Tworzymy element div, który przechowuje obrazek przycisk.png.

Listing 1.3. Plik jquery_functions.js Kod ródowy pliku jquery_functions.js

Objanienie

$(document).ready(function(){

Metoda programu obsugi zdarze document.ready() umoliwia umieszczenie caego kodu jQuery jzyka JavaScript wewntrz zdarzenia w celu zapewnienia wykonania kodu po zaadowaniu cakowitej zawartoci witryny24.

animacja(); }); function animacja(){

Wywoanie funkcji.

animacja_jeden(); } function animacja_jeden(){ $('#logo').delay(1000).animate( ´{top:'0px',left:'0px'} ,2000,'easeOutElastic' ,function(){animacja_dwa()}) .delay(9000).animate({top:'0px', left:'-200px'},2000,'easeInBack');}

Wywoanie funkcji.

24

Definicja funkcji.

Definicja funkcji animacja_jeden(), która poprzez uycie selektora identyfikatora #logo umoliwia dostp do elementu div o nazwie logo w obrbie struktury skadni w pliku baner_leaderboard.html. Funkcja animuje zawarto elementu div, tzn. plik logo.png, który zmienia pozycj na stronie WWW. Nastpnie funkcja animacja_jeden()wywouje funkcj animacja_dwa().

http://docs.jquery.com/How_jQuery_Works#Launching_Code_on_Document_Ready.

26

Cz I i Tworzenie animowanych banerów reklamowych

Listing 1.3. Plik jquery_functions.js — cig dalszy Kod ródowy pliku jquery_functions.js

Objanienie

function animacja_dwa(){ $('#haslo').animate({top:'-90px', ´left:'210px'},2000,'easeOutBounce' ,function(){animacja_trzy()}) ´.delay(8500).animate({top: '-90px', left:'750px'},2000,'easeInBack');}

Definicja funkcji animacja_dwa(), która poprzez uycie selektora identyfikatora #haslo umoliwia dostp do elementu div o nazwie haslo w obrbie struktury skadni w pliku baner_leaderboard.html. Funkcja animuje zawarto elementu div, tzn. plik haslo.png, który zmienia pozycj na stronie WWW. Nastpnie funkcja animacja_dwa() wywouje funkcj animacja_trzy().

function animacja_trzy(){ $('#tekst').animate({top: '85px',left:'225px'},900,'easeInCirc' ,function(){animacja_cztery()}) .delay(8000).animate({top:'10px',left: ´'225px'} ,2000,'jswing');}

Definicja funkcji animacja_trzy(), która poprzez uycie selektora identyfikatora #tekst umoliwia dostp do elementu div o nazwie tekst w obrbie struktury skadni w pliku baner_leaderboard.html. Funkcja animuje zawarto elementu div, tzn. plik tekst.png, który zmienia pozycj na stronie WWW. Nastpnie funkcja animacja_trzy() wywouje funkcj animacja_cztery().

function animacja_cztery(){ $('#przycisk').animate({top:'-140px', ´left:'670px'} ,900,'easeInQuint', function(){animacja()}) .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',left:'750px'}, ´ 500,'jswing');}

Definicja funkcji animacja_cztery(), która poprzez uycie selektora identyfikatora #przycisk umoliwia dostp do elementu div o nazwie przycisk w obrbie struktury skadni w pliku baner_leaderboard.html. Funkcja animuje zawarto elementu div, tzn. plik przycisk.png, który zmienia przezroczysto i pozycj na stronie WWW. Nastpnie funkcja animacja_cztery() wywouje funkcj animacja(), dziki czemu animacja banera zostaje zaptlona, a proces odtwarzania jest powtarzany.

1.2.2. Tworzenie banera typu Wide Skyscraper o rozmiarze 160×600 pikseli Schemat obiektów banera typu Wide Skyscraper o rozmiarze 160×600 pikseli zawiera rysunek 1.3.

Rozdzia 1. i Tworzenie zaawansowanych banerów w jQuery

27

Rysunek 1.3. Schemat obiektów banera typu Wide Skyscraper o rozmiarze 160×600 pikseli

Opis budowy i dziaania animacji banera typu Wide Skyscraper Baner skada si z czterech animowanych obiektów: logo, hasa, tekstu i przycisku. W pierwszej fazie animacji pojawia si logo w wyniku wykorzystania efektu explode, który powoduje zoenie logo z szesnastu czci. Nastpnie pojawia si haso w wyniku zastosowania efektu efektu drop. Po hale wsuwa si tekst przy uyciu efektu slide. Na kocu zostaje animowany przycisk w wyniku wykorzystania efektu shake. W drugiej fazie animacja zostaje zaptlona i odtwarzana ponownie. Zawarto folderu o nazwie baner_wide_ skyscraper_160_x_600:  plik baner_wide_skyscraper.html,  folder css z plikiem style.css,  folder jquery_1.7.1 z plikiem jquery-1.7.1.min.js,  folder jquery_functions z plikiem jquery_functions.js,  folder jquery-ui-1.10.0.custom z plikiem jquery-ui-1.10.0.custom.min.js,  folder effects z plikami biblioteki jQuery UI 1.10.0:  jquery.effects.blind.js,  jquery.effects.bounce.js,

Cz I i Tworzenie animowanych banerów reklamowych

28

 jquery.effects.clip.js,  jquery.effects.core.js,  jquery.effects.drop.js,  jquery.effects.explode.js,  jquery.effects.fade.js,  jquery.effects.fold.js,  jquery.effects.highlight.js,  jquery.effects.pulsate.js,  jquery.effects.scale.js,  jquery.effects.shake.js,  jquery.effects.slide.js,  jquery.effects.transfer.js,  folder img z plikami graficznymi:  logo.png — wymiary 160×90 pikseli;  haslo.png — wymiary 160×270 pikseli;  tekst.png — wymiary 160×190 pikseli;  przycisk.png — wymiary 40×40 pikseli.

Kod ródowy pliku style.css znajduje si na listingu 1.4. Listing 1.4. Plik style.css Kod ródowy pliku style.css

Objanienie

body { margin:0px; padding:0px; border:0px;} img { margin:0px; padding:0px; border:0px;} div#kontener { width:160px; height:600px; overflow:visible; margin-top:100px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:0px; border:1px solid #c0c0c0;}

Formatujemy element body, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Formatujemy element img, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Formatujemy wyrodkowany kontener, z obramowaniem o odpowiednich wymiarach, w ramach którego wywietla si bd dynamicznie animowane obiekty banera. Aby obiekty banera pojawiay si wycznie wewntrz obramowania, a poza jego obszarem pozostaway niewidoczne, ustawiamy dla kontenera waciwo overflow z wartoci hidden.

Rozdzia 1. i Tworzenie zaawansowanych banerów w jQuery

29

Listing 1.4. Plik style.css — cig dalszy Kod ródowy pliku style.css

Objanienie

div#logo { position:relative; top:0px; left:0px; width:160px; height:90px;} div#haslo { position:relative; top:0px; left:0px; width:160px; height:270px;} div#tekst { position:relative; top:0px; left:0px; width:160px; height:190px;} div#przycisk { position:relative; top:0px; left:60px; background-color:#ffffff; width:40px; height:40px;}

Ustawiamy pooenie i wymiary dla obiektu logo z wykorzystaniem pozycjonowania wzgldnego, które zachowuje element w rozkadzie zawartoci witryny, a jednoczenie przed wywietleniem strony w przegldarce przesuwa logo z jego domylnego pooenia na docelow pozycj. Ustawiamy pooenie i wymiary dla obiektu haslo z wykorzystaniem pozycjonowania wzgldnego.

Ustawiamy pooenie i wymiary dla obiektu tekst z wykorzystaniem pozycjonowania wzgldnego.

Ustawiamy pooenie i wymiary dla obiektu przycisk z wykorzystaniem pozycjonowania wzgldnego.

Kod ródowy pliku baner_wide_skyscraper.html znajduje si na listingu 1.5. Listing 1.5. Plik baner_wide_skyscraper.html Kod ródowy pliku baner_wide_skyscraper.html

Objanienie

Doczamy do strony internetowej zewntrzny plik przechowujcy kaskadowe arkusze stylów.

Doczamy do strony internetowej zewntrzny plik przechowujcy bibliotek jQuery.

Doczamy do strony internetowej zewntrzny plik przechowujcy bibliotek jQuery UI.

Doczamy do strony internetowej zewntrzny plik przechowujcy skrypt jQuery animujcy obiekty banera.



Doczamy do strony internetowej zewntrzne pliki z efektami animacyjnymi biblioteki jQuery UI.

Cz I i Tworzenie animowanych banerów reklamowych

30

Listing 1.5. Plik baner_wide_skyscraper.html — cig dalszy Kod ródowy pliku baner_wide_skyscraper.html

















Objanienie

Tworzymy element div, który przechowuje skadowe elementy banera. Tworzymy element div, który przechowuje obrazek logo.png. Tworzymy element div, który przechowuje obrazek haslo.png. Tworzymy element div, który przechowuje obrazek tekst.png. Tworzymy element div, który przechowuje obrazek przycisk.png.

Kod ródowy pliku jquery_functions.js znajduje si na listingu 1.6. Listing 1.6. Plik jquery_functions.js Kod ródowy pliku jquery_functions.js

Objanienie

$(document).ready(function() {

Metoda programu obsugi zdarze document.ready() umoliwia umieszczenie caego kodu jQuery jzyka JavaScript wewntrz zdarzenia w celu zapewnienia wykonania kodu po zaadowaniu cakowitej zawartoci witryny.

Rozdzia 1. i Tworzenie zaawansowanych banerów w jQuery

31

Listing 1.6. Plik jquery_functions.js — cig dalszy Kod ródowy pliku jquery_functions.js

Objanienie

animacja_jeden(); }); function animacja_jeden(){ $('#logo').delay(1000).show("explode", ´ { pieces: 16 }, 1000, function() ´{ animacja_dwa();}).delay(9000). ´show("explode", { pieces: 16 }, 1000);}

Wywoanie funkcji.

function animacja_dwa(){ $('#haslo').show("drop", { direction: "up" }, ´1000, function() {animacja_trzy();}). ´delay(8500).show("drop", { direction: ´"down" }, 1000);}

Definicja funkcji animacja_dwa(), która poprzez uycie selektora identyfikatora #haslo umoliwia dostp do elementu div o nazwie haslo w obrbie struktury skadni w pliku baner_wide_skyscraper.html. Funkcja animuje zawarto elementu div, tzn. plik haslo.png, a nastpnie wywouje funkcj animacja_trzy().

function animacja_trzy(){ $('#tekst').show("slide", { direction: ´"right" }, 1000, function() ´{animacja_cztery();}).delay(8000). ´show("slide", { direction: "left" }, 1000);}

Definicja funkcji animacja_trzy(), która poprzez uycie selektora identyfikatora #tekst umoliwia dostp do elementu div o nazwie tekst w obrbie struktury skadni w pliku baner_wide_skyscraper.html. Funkcja animuje zawarto elementu div, tzn. plik tekst.png, a nastpnie wywouje funkcj animacja_cztery().

function animacja_cztery(){ $('#przycisk').effect("shake", { times:6, ´direction:"right", distance:20 }, 300, ´function() {animacja_jeden();});}

Definicja funkcji animacja_cztery(), która poprzez uycie selektora identyfikatora #przycisk umoliwia dostp do elementu div o nazwie przycisk w obrbie struktury skadni w pliku baner_wide_skyscraper.html. Funkcja animuje zawarto elementu div, tzn. plik przycisk.png, a nastpnie wywouje funkcj animacja_jeden(), dziki czemu animacja banera zostaje zaptlona, a proces odtwarzania jest powtarzany.

Definicja funkcji animacja_jeden(), która poprzez uycie selektora identyfikatora #logo umoliwia dostp do elementu div o nazwie logo w obrbie struktury skadni w pliku baner_wide_skyscraper.html. Funkcja animuje zawarto elementu div, tzn. plik logo.png, a nastpnie wywouje funkcj animacja_dwa().

1.2.3. Tworzenie banera typu Medium Rectangle o rozmiarze 300×250 pikseli Schemat obiektu logo banera typu Medium Rectangle o rozmiarze 300×250 pikseli zawiera rysunek 1.4. Schemat obiektu haso banera typu Medium Rectangle o rozmiarze 300×250 pikseli zawiera rysunek 1.5. Schemat obiektu tekst banera typu Medium Rectangle o rozmiarze 300×250 pikseli zawiera rysunek 1.6.

Cz I i Tworzenie animowanych banerów reklamowych

32 Rysunek 1.4. Schemat obiektu logo banera typu Medium Rectangle o rozmiarze 300×250 pikseli

Rysunek 1.5. Schemat obiektu haso banera typu Medium Rectangle o rozmiarze 300×250 pikseli

Rysunek 1.6. Schemat obiektu tekst banera typu Medium Rectangle o rozmiarze 300×250 pikseli

Opis budowy i dziaania animacji banera typu Medium Rectangle Baner skada si z trzech animowanych obiektów: logo, hasa i tekstu. W pierwszej fazie animacji pojawia si logo, które po jednosekundowym opónieniu znika, a w jego miejscu pokazuje si haso. W cigu nastpnej sekundy haso zastpowane jest przez tekst. Pojawianie si i zanikanie elementów banera realizowane jest przez zastosowanie efektów fadeIn() i fadeOut(), które umoliwiaj zmian skali przezroczystoci — od stuprocentowej przezroczystoci do cakowitej nieprzezroczystoci. Podlinkowanie trzech skadowych elementów banera umoliwia ich kliknicie i przejcie do innych stron WWW. Zastosowanie takiego rozwizania eliminuje konieczno uywania w strukturze banera elementu przycisku. W drugiej fazie animacja zostaje zaptlona i odtwarzana ponownie.

Rozdzia 1. i Tworzenie zaawansowanych banerów w jQuery

33

Zawarto folderu o nazwie baner_medium_rectangle_300_x_250:  plik baner_medium_rectangle.html,  folder css z plikiem style.css,  folder jquery_1.7.1 z plikiem jquery-1.7.1.min.js,  folder jquery_functions z plikiem jquery_functions.js,  folder img z plikami graficznymi:  logo.png — wymiary 300×250 pikseli;  haslo.png — wymiary 300×350 pikseli;  tekst.png — wymiary 300×250 pikseli.

Kod ródowy pliku style.css znajduje si na listingu 1.7. Listing 1.7. Plik style.css Kod ródowy pliku style.css

Objanienie

body { margin:0px; padding:0px; border:0px;} img { margin:0px; padding:0px; border:0px;} div#kontener { width:300px; height:250px; overflow:hidden; margin-top:100px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:0px; border:1px solid #c0c0c0;} div#logo { position:relative; top:0px; left:0px; width:300px; height:250px;} div#haslo { position:relative; top:0px; left:0px; width:300px; height:250px;} div#tekst { position:relative; top:0px; left:0px; width:300px; height:250px;}

Formatujemy element body, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Formatujemy element img, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Formatujemy wyrodkowany kontener, z obramowaniem o odpowiednich wymiarach, w ramach którego wywietla si bd dynamicznie animowane obiekty banera. Aby obiekty banera pojawiay si wycznie wewntrz obramowania, a poza jego obszarem pozostaway niewidoczne, ustawiamy dla kontenera waciwo overflow z wartoci hidden.

Ustawiamy pooenie i wymiary dla obiektu logo z wykorzystaniem pozycjonowania wzgldnego, które zachowuje element w rozkadzie zawartoci witryny, a jednoczenie przed wywietleniem strony w przegldarce przesuwa logo z jego domylnego pooenia na docelow pozycj. Ustawiamy pooenie i wymiary dla obiektu haso z wykorzystaniem pozycjonowania wzgldnego.

Ustawiamy pooenie i wymiary dla obiektu tekst z wykorzystaniem pozycjonowania wzgldnego.

Cz I i Tworzenie animowanych banerów reklamowych

34

Kod ródowy pliku baner_medium_rectangle.html znajduje si na listingu 1.8. Listing 1.8. Plik baner_medium_rectangle.html Kod ródowy pliku baner_medium_rectangle.html

Objanienie

Doczamy do strony internetowej zewntrzny plik przechowujcy kaskadowe arkusze stylów.

Doczamy do strony internetowej zewntrzny plik przechowujcy bibliotek jQuery.

Doczamy do strony internetowej zewntrzny plik przechowujcy skrypt jQuery animujcy obiekty banera.

Tworzymy element div, który przechowuje skadowe elementy banera.





Tworzymy element div, który przechowuje obrazek logo.png. Tworzymy element div, który przechowuje obrazek haslo.png. Tworzymy element div, który przechowuje obrazek tekst.png.

Kod ródowy pliku jquery_functions.js znajduje si na listingu 1.9. Listing 1.9. Plik jquery_functions.js Kod ródowy pliku jquery_functions.js

Objanienie

$(document).ready(function() {

Metoda programu obsugi zdarze document.ready() umoliwia umieszczenie caego kodu jQuery jzyka JavaScript wewntrz zdarzenia w celu zapewnienia wykonania kodu po zaadowaniu cakowitej zawartoci witryny.

animacja_jeden(); }); function animacja_jeden(){ $("#logo").fadeIn().delay(1000).fadeOut ´("slow", function() {animacja_dwa();});};

Wywoanie funkcji. Definicja funkcji animacja_jeden(), która poprzez uycie selektora identyfikatora #logo umoliwia dostp do elementu div o nazwie logo w obrbie struktury skadni w pliku baner_medium_rectangle.html. Funkcja animuje zawarto elementu div, tzn. plik logo.png, a nastpnie wywouje funkcj animacja_dwa().

Rozdzia 1. i Tworzenie zaawansowanych banerów w jQuery

35

Listing 1.9. Plik jquery_functions.js — cig dalszy Kod ródowy pliku jquery_functions.js

Objanienie

function animacja_dwa(){ $("#haslo").fadeIn().delay(1000).fadeOut ´("slow", function() {animacja_trzy();});};

Definicja funkcji animacja_dwa(), która poprzez uycie selektora identyfikatora #haslo umoliwia dostp do elementu div o nazwie haslo w obrbie struktury skadni w pliku baner_medium_rectangle.html. Funkcja animuje zawarto elementu div, tzn. plik haslo.png, a nastpnie wywouje funkcj animacja_trzy().

function animacja_trzy(){ $("#tekst").fadeIn().delay(1000).fadeOut ´("slow", function() {animacja_jeden();});};

Definicja funkcji animacja_trzy(), która poprzez uycie selektora identyfikatora #tekst umoliwia dostp do elementu div o nazwie tekst w obrbie struktury skadni w pliku baner_medium_rectangle.html. Funkcja animuje zawarto elementu div, tzn. plik tekst.png, a nastpnie wywouje funkcj animacja_jeden(), dziki czemu animacja banera zostaje zaptlona, a proces odtwarzania jest powtarzany.

1.2.4. Tworzenie banera typu Rectangle o rozmiarze 180×150 pikseli Schemat obiektu logo banera typu Rectangle o rozmiarze 180×150 pikseli zawiera rysunek 1.7. Rysunek 1.7. Schemat obiektu logo banera typu Rectangle o rozmiarze 180×150 pikseli

Schemat obiektu haso banera typu Rectangle o rozmiarze 180×150 pikseli zawiera rysunek 1.8. Rysunek 1.8. Schemat obiektu haso banera typu Rectangle o rozmiarze 180×150 pikseli

Schemat obiektu tekst banera typu Rectangle o rozmiarze 180×150 pikseli zawiera rysunek 1.9.

Cz I i Tworzenie animowanych banerów reklamowych

36 Rysunek 1.9. Schemat obiektu tekst banera typu Rectangle o rozmiarze 180×150 pikseli

Opis budowy i dziaania animacji banera typu Rectangle Baner skada si z trzech animowanych obiektów: logo, hasa i tekstu. W pierwszej fazie animacji pojawia si logo na tle w kolorze ótym (notacja szesnastkowa — #fff000), które po jednosekundowym opónieniu znika, a w jego miejscu pokazuje si haso na tle w kolorze zielonym (notacja szesnastkowa — #00ff00). W cigu nastpnej sekundy haso zastpowane jest przez tekst na tle w kolorze czerwonym (notacja szesnastkowa — #ff0000). Pojawianie si i zanikanie elementów banera realizowane jest przez zastosowanie efektów fadeIn() i fadeOut(), które umoliwiaj zmian skali przezroczystoci — od stuprocentowej przezroczystoci do cakowitej nieprzezroczystoci. Zmiana koloru ta dla poszczególnych elementów banera odbywa si za pomoc metody css(), która umoliwia zastosowanie kaskadowych arkuszy stylów. Zastosowanie metod queue() i dequeue() pozwala na sekwencyjne wykonywanie animacji ustawionych w kolejce. Podlinkowanie trzech skadowych elementów banera umoliwia ich kliknicie i przejcie do innych stron WWW. Zastosowanie takiego rozwizania eliminuje konieczno uywania w strukturze banera elementu przycisku. W drugiej fazie animacja zostaje zaptlona i odtwarzana ponownie. Zawarto folderu o nazwie baner_rectangle_180_x_150:  plik baner_rectangle.html,  folder css z plikiem style.css,  folder jquery_1.7.1 z plikiem jquery-1.7.1.min.js,  folder jquery_functions z plikiem jquery_functions.js,  folder img z plikami graficznymi:  logo.png — wymiary 180×150 pikseli;  haslo.png — wymiary 180×150 pikseli;  tekst.png — wymiary 180×150 pikseli.

Kod ródowy pliku style.css znajduje si na listingu 1.10. Listing 1.10. Plik style.css Kod ródowy pliku style.css

Objanienie

body { margin:0px; padding:0px; border:0px;}

Stylizujemy element body, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli.

Rozdzia 1. i Tworzenie zaawansowanych banerów w jQuery

37

Listing 1.10. Plik style.css — cig dalszy Kod ródowy pliku style.css

Objanienie

img { margin:0px; padding:0px; border:0px;} div#kontener { width:180px; height:150px; overflow:hidden; margin-top:100px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:0px; border:1px solid #c0c0c0;} div#logo { position:relative; top:0px; left:0px; width:180px; height:150px;} div#haslo { position:relative; top:0px; left:0px; width:180px; height:150px;} div#tekst { position:relative; top:0px; left:0px; width:180px; height:150px;}

Formatujemy element img, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Formatujemy wyrodkowany kontener, z obramowaniem o odpowiednich wymiarach, w ramach którego wywietla si bd dynamicznie animowane obiekty banera. Aby obiekty banera pojawiay si wycznie wewntrz obramowania, a poza jego obszarem pozostaway niewidoczne, ustawiamy dla kontenera waciwo overflow z wartoci hidden.

Ustawiamy pooenie i wymiary dla obiektu logo z wykorzystaniem pozycjonowania wzgldnego, które zachowuje element w rozkadzie zawartoci witryny, a jednoczenie przed wywietleniem strony w przegldarce przesuwa logo z jego domylnego pooenia na docelow pozycj. Ustawiamy pooenie i wymiary dla obiektu haso z wykorzystaniem pozycjonowania wzgldnego.

Ustawiamy pooenie i wymiary dla obiektu tekst z wykorzystaniem pozycjonowania wzgldnego.

Kod ródowy pliku baner_rectangle.html znajduje si na listingu 1.11. Listing 1.11. Plik baner_rectangle.html Kod ródowy pliku baner_rectangle.html

Objanienie

Doczamy do strony internetowej zewntrzny plik przechowujcy kaskadowe arkusze stylów.

plik przechowujcy bibliotek jQuery.

Doczamy do strony internetowej zewntrzny plik przechowujcy bibliotek jQuery.

Doczamy do strony internetowej zewntrzny plik przechowujcy skrypt jQuery animujcy zakadki menu.

Tworzymy element div, który przechowuje menu.

• 01
• 02
• 03
• 04
• 05
• 06

Tworzymy list ul, której pozycje li stanowi zakadki menu z odsyaczami.

Kod ródowy pliku jquery_functions.js znajduje si na listingu 2.3.

Cz II i Tworzenie animowanych witryn internetowych

54 Listing 2.3. Plik jquery_functions.js

Kod ródowy pliku jquery_functions.js

Objanienie

$(document).ready(function(){

Metoda programu obsugi zdarze document.ready() umoliwia umieszczenie caego kodu jQuery jzyka JavaScript wewntrz zdarzenia w celu zapewnienia wykonania kodu po zaadowaniu cakowitej zawartoci witryny.

$("div#menu ul li a").hover(function(){

Dowizujemy zdarzenie hover() do elementów HTML tworzcych zakadki menu.

if ($(this).is(":animated")) { $(this).stop().animate({width: "310px"}, ´{duration: 450, easing:"easeOutQuad"});} else { $(this).stop().animate({width: "310px"}, ´{duration: 400, easing:"easeOutQuad"});}}, function () { if ($(this).is(":animated")) { $(this).stop().animate({width: "80px"}, ´{duration: 400, easing:"easeInOutQuad"});} else {$(this).stop(":animated").animate({width: ´"80px"}, {duration: 450, easing: ´"easeInOutQuad"});} }); });

Tworzymy funkcj z instrukcj warunkow if else, która umoliwia animowanie menu za kadym razem, kiedy kursor myszy zostanie umieszczony na elemencie HTML tworzcym zakadki menu. Tworzymy funkcj z instrukcj warunkow if else, która umoliwia animowanie menu za kadym razem, kiedy kursor myszy opuci element HTML tworzcy zakadki menu.

2.2.2. Tworzenie rozsuwanego menu pionowego Schemat rozsuwanego menu pionowego zawiera rysunek 2.2. Rysunek 2.2. Schemat rozsuwanego menu pionowego

Opis budowy i dziaania animacji rozsuwanego menu pionowego Menu skada si z szeciu prostoktnych zakadek gównych o wymiarach 200×30 pikseli, oddzielonych od siebie marginesem górnym i dolnym o gruboci jednego piksela. Kada z zakadek gównych zawiera po cztery pozycje w podmenu o wymiarach 200×20 pikseli. Nazwy gównych zakadek menu w kolorze biaym (#ffffff) znajduj

Rozdzia 2. i Tworzenie zaawansowanych menu w jQuery

55

si na czarnym tle (#000000). Po umieszczeniu kursora myszy w obszarze zakadki gównej rozsuwa si podmenu, którego to stanowi kolor czerwony (#ff0000). Nazwy pozycji w podmenu s koloru biaego, a w momencie umieszczenia w ich obszarze kursora myszy zmieniaj kolor na czerwony z czarnym tem. Podstawowe moliwoci modyfikacji rozsuwanego menu pionowego: 1. Zwikszenie lub zmniejszenie liczby zakadek menu gównego bd podmenu. 2. Zmiana nazewnictwa zakadek. 3. Zmiana kolorystyki menu i podmenu. 4. Zmiana koloru, wielkoci i rodzaju czcionki nazw zakadek. 5. Zmiana efektu animacji ruchu zakadek.

Zawarto folderu o nazwie rozsuwane_menu_pionowe:  plik rozsuwane_menu_pionowe.html,  folder css z plikiem style.css,  folder jquery_1.7.1 z plikiem jquery-1.7.1.min.js,  folder jquery_easing_plugin_1.3 z plikiem jquery.easing.1.3.js,  folder jquery_functions z plikiem jquery_functions.js.

Kod ródowy pliku style.css znajduje si na listingu 2.4. Listing 2.4. Plik style.css Kod ródowy pliku style.css

Objanienie

body { margin:0px; padding:0px; border:0px;} div#kontener { width:1000px; margin-top:100px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:0px;} div#menu { width:200px;} #menu_1 { margin-top:1px; margin-bottom:1px; margin-right:0px; margin-left:0px; padding-top:5px; padding-bottom:10px; padding-right:5px; padding-left:10px;

Formatujemy element body, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Formatujemy wyrodkowany kontener, w ramach którego wywietla si bdzie animowane menu. Okrelamy szeroko oraz marginesy zewntrzne i wewntrzne kontenera.

Okrelamy szeroko menu. Formatujemy zakadki menu gównego z wykorzystaniem pozycjonowania wzgldnego. Okrelamy marginesy zewntrzne i wewntrzne, waciwoci czcionki: rodzaj, kolor czcionki, kolor ta. Kursorowi myszy nadajemy wygld wskanika.

Cz II i Tworzenie animowanych witryn internetowych

56 Listing 2.4. Plik style.css — cig dalszy Kod ródowy pliku style.css position:relative; font-family:Georgia; font-weight:bold; color:#ffffff; background-color:#000000; cursor:pointer;} div#menu_2 { display:none;} div#menu_2 a{ font-weight:bold; color:#ffffff; text-decoration:none; background-color:#ff0000; padding-left:10px; display:block;} div#menu_2 a:hover{ font-weight:bold; color:#ff0000; text-decoration:none; background-color:#000000;}

Objanienie

Ukrywamy pozycje podmenu. Formatujemy pozycje podmenu odsyacza a w stanie nienaruszonym tak, aby byy wywietlane jako elementy blokowe. Okrelamy waciwoci czcionki: grubo i kolor, oraz waciwoci tekstu: brak podkrelenia dla linku oraz kolor ta i lewy margines wewntrzny.

Formatujemy pozycje podmenu odsyacza a:hover w stanie, gdy umiecimy kursor myszy na pozycji podmenu. Okrelamy waciwoci czcionki: grubo i kolor, oraz waciwoci tekstu: brak podkrelenia dla linku oraz kolor ta.

Kod ródowy pliku rozsuwane_menu_pionowe.html znajduje si na listingu 2.5. Listing 2.5. Plik rozsuwane_menu_pionowe.html Kod ródowy pliku rozsuwane_menu_pionowe.html

Objanienie

Doczamy do strony internetowej zewntrzny plik przechowujcy kaskadowe arkusze stylów.



Doczamy do strony internetowej zewntrzny plik przechowujcy bibliotek jQuery. Doczamy do strony internetowej zewntrzny plik przechowujcy dodatek Easing biblioteki jQuery.

Doczamy do strony internetowej zewntrzny plik przechowujcy bibliotek jQuery.

Doczamy do strony internetowej zewntrzny plik przechowujcy dodatek Easing biblioteki jQuery.

Tworzymy element div, który przechowuje menu.

O firmie

Tworzymy element div, który przechowuje obraz menu_1.jpg.

Doczamy do strony internetowej zewntrzny plik przechowujcy skrypt jQuery animujcy zakadki menu.

Tworzymy element div, który przechowuje obraz menu_1a.jpg. Tworzymy element div, który przechowuje akapit z tekstem.

Rozdzia 2. i Tworzenie zaawansowanych menu w jQuery

67

Listing 2.8. Plik menu_z_efektami_specjalnymi.html — cig dalszy Kod ródowy pliku menu_z_efektami_specjalnymi.html

O firmie

Lorem ipsum dolor sit amet

Oferta

Oferta

Lorem ipsum dolor sit amet

Cennik

Cennik

Lorem ipsum dolor sit amet

Galeria

Objanienie Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje obraz menu_1.jpg. Tworzymy element div, który przechowuje obraz menu_2a.jpg. Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje obraz menu_1.jpg. Tworzymy element div, który przechowuje obraz menu_3a.jpg. Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje obraz menu_1.jpg. Tworzymy element div, który przechowuje obraz menu_4a.jpg. Tworzymy element div, który przechowuje akapit z tekstem.

Cz II i Tworzenie animowanych witryn internetowych

68

Listing 2.8. Plik menu_z_efektami_specjalnymi.html — cig dalszy Kod ródowy pliku menu_z_efektami_specjalnymi.html

Galeria

Lorem ipsum dolor sit amet

Media

Media

Lorem ipsum dolor sit amet

Kontakt

Kontakt

Lorem ipsum dolor sit amet

Objanienie Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje obraz menu_1.jpg. Tworzymy element div, który przechowuje obraz menu_5a.jpg. Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje obraz menu_1.jpg. Tworzymy element div, który przechowuje obraz menu_6a.jpg. Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje akapit z tekstem. Tworzymy element div, który przechowuje akapit z tekstem.

Kod ródowy pliku jquery_functions.js znajduje si na listingu 2.9. Listing 2.9. Plik jquery_functions.js Kod ródowy pliku jquery_functions.js

Objanienie

$(document).ready(function(){

Metoda programu obsugi zdarze document.ready() umoliwia umieszczenie caego kodu jQuery jzyka JavaScript wewntrz zdarzenia w celu zapewnienia wykonania kodu po zaadowaniu cakowitej zawartoci witryny.

Rozdzia 2. i Tworzenie zaawansowanych menu w jQuery

69

Listing 2.9. Plik jquery_functions.js — cig dalszy Kod ródowy pliku jquery_functions.js

Objanienie

$("div#menu_1").mouseover(function(){ $("div#menu_1").fadeTo("slow", 0); $("div#menu_1a").slideDown(2000, ´"easeOutBounce"); $("div#o_firmie_kolor").show(); $("div#o_firmie_tekst").slideDown(1000, ´"easeOutExpo");}); $("div#menu_1").mouseout(function(){ $("div#menu_1").fadeTo("slow", 0.7); $("div#menu_1a").slideUp("fast"); $("div#o_firmie_kolor").hide(); $("div#o_firmie_tekst").slideUp("fast");}); $("div#menu_2").mouseover(function(){ $("div#menu_2").fadeTo("slow", 0); $("div#menu_2a").slideDown(2000, ´"easeOutBounce"); $("div#oferta_kolor").show(); $("div#oferta_tekst").slideDown(1000, ´"easeOutExpo");}); $("div#menu_2").mouseout(function(){ $("div#menu_2").fadeTo("slow", 0.7); $("div#menu_2a").slideUp("fast"); $("div#oferta_kolor").hide(); $("div#oferta_tekst").slideUp("fast");}); $("div#menu_3").mouseover(function(){ $("div#menu_3").fadeTo("slow", 0); $("div#menu_3a").slideDown(2000, ´"easeOutBounce"); $("div#cennik_kolor").show(); $("div#cennik_tekst").slideDown(1000, ´"easeOutExpo");}); $("div#menu_3").mouseout(function(){ $("div#menu_3").fadeTo("slow", 0.7); $("div#menu_3a").slideUp("fast"); $("div#cennik_kolor").hide(); $("div#cennik_tekst").slideUp("fast");}); $("div#menu_4").mouseover(function(){ $("div#menu_4").fadeTo("slow", 0); $("div#menu_4a").slideDown(2000, ´"easeOutBounce"); $("div#galeria_kolor").show(); $("div#galeria_tekst").slideDown(1000, ´"easeOutExpo");}); $("div#menu_4").mouseout(function(){ $("div#menu_4").fadeTo("slow", 0.7); $("div#menu_4a").slideUp("fast"); $("div#galeria_kolor").hide(); $("div#galeria_tekst").slideUp("fast");}); $("div#menu_5").mouseover(function(){ $("div#menu_5").fadeTo("slow", 0); $("div#menu_5a").slideDown(2000, ´"easeOutBounce");

Dowizujemy do pierwszej zakadki menu zdarzenie mouseover(), które umoliwia wykonanie wielu efektów specjalnych na jej elementach, poprzez uycie rónych metod.

Dowizujemy do pierwszej zakadki menu zdarzenie mouseout(), które umoliwia wykonanie wielu efektów specjalnych na jej elementach, poprzez uycie rónych metod. Dowizujemy do drugiej zakadki menu zdarzenie mouseover(), które umoliwia wykonanie wielu efektów specjalnych na jej elementach, poprzez uycie rónych metod.

Dowizujemy do drugiej zakadki menu zdarzenie mouseout(), które umoliwia wykonanie wielu efektów specjalnych na jej elementach, poprzez uycie rónych metod. Dowizujemy do trzeciej zakadki menu zdarzenie mouseover(), które umoliwia wykonanie wielu efektów specjalnych na jej elementach, poprzez uycie rónych metod.

Dowizujemy do trzeciej zakadki menu zdarzenie mouseout(), które umoliwia wykonanie wielu efektów specjalnych na jej elementach, poprzez uycie rónych metod. Dowizujemy do czwartej zakadki menu zdarzenie mouseover(), które umoliwia wykonanie wielu efektów specjalnych na jej elementach, poprzez uycie rónych metod.

Dowizujemy do czwartej zakadki menu zdarzenie mouseout(), które umoliwia wykonanie wielu efektów specjalnych na jej elementach, poprzez uycie rónych metod. mouseover(), które umoliwia wykonanie wielu efektów

specjalnych na jej elementach, poprzez uycie rónych metod.

Cz II i Tworzenie animowanych witryn internetowych

70 Listing 2.9. Plik jquery_functions.js

Kod ródowy pliku jquery_functions.js

Objanienie

$("div#media_kolor").show(); $("div#media_tekst").slideDown(1000, ´"easeOutExpo");}); $("div#menu_5").mouseout(function(){ $("div#menu_5").fadeTo("slow", 0.7); $("div#menu_5a").slideUp("fast"); $("div#media_kolor").hide(); $("div#media_tekst").slideUp("fast");}); $("div#menu_6").mouseover(function(){ $("div#menu_6").fadeTo("slow", 0); $("div#menu_6a").slideDown(2000, ´"easeOutBounce"); $("div#kontakt_kolor").show(); $("div#kontakt_tekst").slideDown(1000, ´"easeOutExpo");}); $("div#menu_6").mouseout(function(){ $("div#menu_6").fadeTo("slow", 0.7); $("div#menu_6a").slideUp("fast"); $("div#kontakt_kolor").hide(); $("div#kontakt_tekst").slideUp("fast");}); });

Dowizujemy do pitej zakadki menu zdarzenie

Dowizujemy do pitej zakadki menu zdarzenie mouseout(), które umoliwia wykonanie wielu efektów specjalnych na jej elementach, poprzez uycie rónych metod. Dowizujemy do szóstej zakadki menu zdarzenie mouseover(), które umoliwia wykonanie wielu efektów specjalnych na jej elementach, poprzez uycie rónych metod.

Dowizujemy do szóstej zakadki menu zdarzenie mouseout(), które umoliwia wykonanie wielu efektów specjalnych na jej elementach, poprzez uycie rónych metod.

2.2.4. Tworzenie menu wielopoziomowego Schemat fragmentu menu wielopoziomowego zawiera rysunek 2.5. Rysunek 2.5. Schemat fragmentu menu wielopoziomowego

Opis budowy i dziaania animacji menu wielopoziomowego Menu skada si z szeciu prostoktnych zakadek gównych o wymiarach 160×40 pikseli. Zakadki gówne oddziela od siebie prawe obramowanie w kolorze biaym (#ffffff) o gruboci jednego piksela, a od zakadek w podmenu — dolne obramowanie w kolorze

Rozdzia 2. i Tworzenie zaawansowanych menu w jQuery

71

czerwonym (#ff0000) o gruboci trzech pikseli. Kada z zakadek gównych zawiera kilka pozycji w podmenu o wymiarach 160×40 pikseli, umieszczonych na czterech poziomach zagniedenia. Nazwy zakadek menu w kolorze biaym (#ffffff) znajduj si na czarnym tle (#000000). Po umieszczeniu kursora myszy w obszarze zakadki gównej wysuwa si podmenu. W momencie umieszczenia kursora myszy na pozycji podmenu zmienia si kolor jego ta na czerwony (#ff0000), a tekstu na czarny (#000000). Podstawowe moliwoci modyfikacji menu wielopoziomowego: 1. Zwikszenie lub zmniejszenie liczby zakadek menu gównego bd

podmenu. 2. Dodanie lub usunicie kolejnych poziomów zagniede pozycji w podmenu. 3. Zmiana nazewnictwa zakadek. 4. Zmiana kolorystyki menu i podmenu. 5. Zmiana koloru, wielkoci i rodzaju czcionki nazw zakadek. 6. Zmiana efektu animacji ruchu zakadek.

Zawarto folderu o nazwie menu_wielopoziomowe:  plik menu_wielopoziomowe.html,  folder css z plikiem style.css,  folder jquery_1.7.1 z plikiem jquery-1.7.1.min.js,  folder jquery_easing_plugin_1.3 z plikiem jquery.easing.1.3.js,  folder jquery_functions z plikiem jquery_functions.js.

Kod ródowy pliku style.css znajduje si na listingu 2.10. Listing 2.10. Plik style.css Kod ródowy pliku style.css

Objanienie

body { margin:0px; padding:0px; border:0px;} div#kontener { width:966px; margin-top:100px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:0px;} div#menu { height:40px; font-family:Georgia; font-size:12px; font-weight:bold; color:#ffffff;

Formatujemy element body, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Formatujemy wyrodkowany kontener, w ramach którego wywietla si bdzie animowane menu. Okrelamy szeroko oraz marginesy zewntrzne i wewntrzne kontenera.

Formatujemy zakadki menu gównego. Okrelamy jego wysoko , waciwoci czcionki i tekstu: rodzaj, rozmiar, pogrubienie, kolor i wyrodkowanie oraz to i dolne obramowanie.

72

Cz II i Tworzenie animowanych witryn internetowych

Listing 2.10. Plik style.css — cig dalszy Kod ródowy pliku style.css text-align:center; background-color:#000000; border-bottom:3px solid #ff0000;} ul.podmenu { margin:0px; padding:0px; list-style-type:none;} ul.podmenu li { float:left; border-right:1px solid #ffffff;}

Objanienie

Formatujemy podmenu nadrzdne, okrelajc marginesy zewntrzne i wewntrzne oraz sposób wywietlania listy. Formatujemy pozycje li listy ul tak, aby znajdoway si po lewej stronie. Pozycje li listy ul stanowi zakadki podmenu nadrzdnego, które oddzielone s od siebie prawym obramowaniem.

ul.podmenu li a { width:120px; padding-top:14px; padding-bottom:14px; padding-right:20px; padding-left:20px; text-decoration:none; color:#ffffff; display:block;} ul.podmenu li a:hover { color:#000000; background-color:#ff0000;}

Formatujemy pozycje podmenu nadrzdnego odsyacza a w stanie nienaruszonym tak, aby byy wywietlane jako elementy blokowe. Okrelamy jego szeroko , marginesy wewntrzne, waciwoci czcionki i tekstu: kolor oraz wywietlanie linku bez podkrelenia.

ul.podmenu ul { margin:0px; padding:0px; position:absolute; z-index:1; list-style-type:none; display:none; background-color:#000000;} ul.podmenu ul li { position:relative; float:none; border-bottom:1px solid #ffffff;}

Formatujemy podmenu podrzdne z wykorzystaniem pozycjonowania absolutnego. Okrelamy marginesy zewntrzne i wewntrzne, pozycj nakadanych elementów w stosie na poziomie pierwszym, sposób wywietlania listy i kolor ta. Nastpnie ukrywamy podmenu podrzdne.

ul.podmenu ul li a { width:120px; color:#ffffff; text-align:left;} ul.podmenu ul li a:hover { color:#000000;}

Formatujemy pozycje podmenu podrzdnego odsyacza a w stanie nienaruszonym. Okrelamy jego szeroko , kolor i wyrównanie tekstu do lewej strony.

ul.podmenu ul li ul { top:0px; left:161px; position:absolute; z-index:1; display:none; list-style-type:none;}

Formatujemy list ul z wykorzystaniem pozycjonowania absolutnego. Okrelamy pozycj nakadanych elementów w stosie na poziomie pierwszym oraz sposób wywietlania listy, a nastpnie ukrywamy podmenu podrzdne.

Formatujemy pozycje podmenu nadrzdnego odsyacza a:hover w stanie, gdy umiecimy kursor myszy w jego obszarze. Okrelamy kolor czcionki i ta.

Formatujemy pozycje li listy ul z wykorzystaniem pozycjonowania relatywnego. Pozycje li listy ul stanowi zakadki podmenu podrzdnego, które oddzielone s od siebie dolnym obramowaniem.

Formatujemy pozycje podmenu podrzdnego odsyacza a:hover w stanie, gdy umiecimy kursor myszy w jego obszarze. Okrelamy kolor czcionki.

Rozdzia 2. i Tworzenie zaawansowanych menu w jQuery

73

Listing 2.10. Plik style.css — cig dalszy Kod ródowy pliku style.css

Objanienie

ul.podmenu ul li ul li { position:relative; list-style-type:none;}

Formatujemy pozycje li listy ul z wykorzystaniem pozycjonowania relatywnego. Pozycje li listy ul stanowi zakadki podmenu podrzdnego. Okrelamy sposób wywietlania listy.

Kod ródowy pliku menu_wielopoziomowe.html znajduje si na listingu 2.11. Listing 2.11. Plik menu_wielopoziomowe.html Kod ródowy pliku menu_wielopoziomowe.html

Objanienie

Doczamy do strony internetowej zewntrzny plik przechowujcy kaskadowe arkusze stylów.

Doczamy do strony internetowej zewntrzny plik przechowujcy bibliotek jQuery.

Doczamy do strony internetowej zewntrzny plik przechowujcy skrypt jQuery animujcy zakadki menu.

Tworzymy element div, który przechowuje kontener.

Tworzymy element div, który przechowuje menu.

Tworzymy element div, który przechowuje podmenu.


• O firmie ´1
• O firmie 2 ´»   
  
  
  • O firmie ´2.2.1
  • O firmie 2.2.2 ´»   
    
    
• O firmie ´2.2.3
• O firmie ´2.2.4



• O firmie ´3
• O firmie ´4


Tworzymy dwupoziomowe podmenu drugiej
• Oferta zakadki gównej.
  
  
  • Oferta ´2.1
  • Oferta ´2.2
  • Oferta ´2.3
  • Oferta ´2.4
  
  
  



• Cennik 1
• Cennik 2 ´»   
  
  
• Cennik 3
• Cennik 4



• Galeria
  
  
  • Galeria ´2.1
  • Galeria ´2.2
  • Galeria ´2.3
  • Galeria ´2.4
  
  
  



• Media 1
• Media 2 ´»   
  
  
• Media 3
• Media 4



• Kontakt
  
  
  • Kontakt ´2.1
  • Kontakt ´2.2
  • Kontakt ´2.3
  • Kontakt ´2.4
  
  
  

Kod ródowy pliku jquery_functions.js znajduje si na listingu 2.12. Listing 2.12. Plik jquery_functions.js Kod ródowy pliku jquery_functions.js

Objanienie

$(document).ready(function(){

Metoda programu obsugi zdarze document.ready() umoliwia umieszczenie caego kodu jQuery jzyka JavaScript wewntrz zdarzenia w celu zapewnienia wykonania kodu po zaadowaniu cakowitej zawartoci witryny.

$("ul.podmenu li").mouseenter(function(){ $(this).children("ul").slideDown(500, ´"easeOutBack");});

Do elementów HTML tworzcych zakadki menu dowizujemy zdarzenie mouseenter(), które umoliwia animowanie menu za kadym razem, kiedy kursor myszy zostanie umieszczony w jego obszarze.

$("ul.podmenu li").mouseleave(function(){ $(this).children("ul").slideUp("fast", ´"linear");}); });

Do elementów HTML tworzcych zakadki menu dowizujemy zdarzenie mouseleave(), które umoliwia animowanie menu za kadym razem, kiedy kursor myszy opuci jego obszar.

78

Cz II i Tworzenie animowanych witryn internetowych

Rozdzia 3.

Tworzenie zaawansowanych galerii fotografii w jQuery 3.1. Wprowadzenie Galeria internetowa jest to statyczny lub animowany pokaz wyselekcjonowanych fotografii cyfrowych, pogrupowanych w tematyczne albumy.

W rozdziale trzecim wykonamy dwie animowane galerie fotografii: pierwsz z wywietlanym dynamicznie systemem nawigacji i moliwoci automatycznego odtwarzania pokazu zdj , drug z miniaturami, umoliwiajc pokaz zdj w powikszeniu. Animowane galerie fotografii wykonamy na podstawie nastpujcych technologii: 1. XHTML 1.0 (The Extensible HyperText Markup Language). 2. CSS 2.0 (Cascading Style Sheets). 3. Biblioteka jQuery 1.7.1 z dodatkiem Easing 1.3. 4. JavaScript.

3.1.1. Anatomia zdarzenia load() Zdarzenie load() umoliwia wykonanie funkcji po zaadowaniu wszystkich elementów HTML.

Cz II i Tworzenie animowanych witryn internetowych

80

$ lub jQuery (selektor).load([eventData], handler(eventObject));1. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody load() zawiera tabela 3.1. Tabela 3.1. Parametry metody load() Parametr

Opis dziaania

[eventData]*

Obiekt zawierajcy dane, które zostan przekazane do metody obsugi zdarzenia.

handler(eventObject)

Umoliwia wykonanie funkcji po zaadowaniu wszystkich elementów HTML.

* — parametr opcjonalny

3.1.2. Anatomia metody on() Metoda on() umoliwia dowizywanie programu obsugi zdarze do elementów HTML. $ lub jQuery (selektor).on(events [, selector ] [, data ], ´handler(eventObject));2. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody on() zawiera tabela 3.2. Tabela 3.2. Parametry metody on() Parametr

Opis dziaania

events

Umoliwia ustawianie zdarze myszy.

selector*

Umoliwia dostp do potomków wybranych elementów, które wyzwalaj zdarzenie. Jeli selektor ma warto null lub jest pominity, zdarzenie jest wyzwalane, gdy zostanie wybrany dany element.

data*

Umoliwia dostp do danych, które maj by przekazywane do obsugi podczas wywoywania zdarzenia.

handler(eventObject)

Umoliwia wykonywanie funkcji za kadym razem, kiedy zdarzenie jest wywoywane.

* — parametr opcjonalny

3.1.3. Anatomia metody bind() Metoda bind() umoliwia dowizywanie programu obsugi zdarze do elementów HTML. 1 2

http://api.jquery.com/load-event/. http://api.jquery.com/on/.

Rozdzia 3. i Tworzenie zaawansowanych galerii fotografii w jQuery

81

$ lub jQuery (selektor).bind(events [, eventData], handler(eventObject));3. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody bind() zawiera tabela 3.3. Tabela 3.3. Parametry metody bind() Parametr

Opis dziaania

events

Umoliwia ustawianie zdarze myszy.

[eventData]*

Obiekt zawierajcy dane, które zostan przekazane do metody obsugi zdarzenia.

handler(eventObject)

Umoliwia wykonywanie funkcji za kadym razem, kiedy zdarzenie jest wywoywane.

* — parametr opcjonalny

3.1.4. Anatomia metody addClass() Metoda addClass() umoliwia dodanie klasy CSS do wybranego elementu HTML. $ lub jQuery (selektor).addClass(className);4. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody addClass() zawiera tabela 3.4. Tabela 3.4. Parametry metody addClass() Parametr

Opis dziaania

className

Umoliwia ustawienie nazwy klasy CSS.

3.1.5. Anatomia metody removeClass() Metoda removeClass() umoliwia usunicie klasy CSS z wybranego elementu HTML. 5

$ lub jQuery (selektor).removeClass([className]); . $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

3 4 5

http://api.jquery.com/bind/. http://api.jquery.com/addClass/. http://api.jquery.com/removeClass/.

Cz II i Tworzenie animowanych witryn internetowych

82

Parametry metody removeClass() zawiera tabela 3.5. Tabela 3.5. Parametry metody removeClass() Parametr

Opis dziaania

className*

Umoliwia ustawienie nazwy klasy CSS.

* — parametr opcjonalny

3.1.6. Anatomia metody toggleClass() Metoda toggleClass() umoliwia dodanie klas CSS do wybranego elementu HTML i usunicie ich z niego. $ lub jQuery (selektor).toggleClass(className);6. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody toggleClass() zawiera tabela 3.6. Tabela 3.6. Parametry metody toggleClass() Parametr

Opis dziaania

className

Umoliwia ustawienie nazwy klasy CSS.

3.1.7. Anatomia metody hasClass() Metoda hasClass() umoliwia sprawdzenie, czy wybrany element HTML ma przypisan klas. $ lub jQuery (selektor).hasClass(className);7. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody hasClass() zawiera tabela 3.7. Tabela 3.7. Parametry metody hasClass()

6 7

Parametr

Opis dziaania

className

Umoliwia ustawienie nazwy klasy CSS.

http://api.jquery.com/toggleClass/. http://api.jquery.com/hasClass/.

Rozdzia 3. i Tworzenie zaawansowanych galerii fotografii w jQuery

83

3.1.8. Anatomia metody append() Metoda append() umoliwia umieszczanie nowej zawartoci wewntrz wskazanych elementów HTML. Nowa zawarto wstawiana jest na kocu elementu. $ lub jQuery (selektor).append(function(index, html));8. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody append() zawiera tabela 3.8. Tabela 3.8. Parametry metody append() Parametr

Opis dziaania

function(index, html)

Funkcja zwraca warto HTML, która bdzie umieszczona na kocu wskazanego elementu HTML.

3.1.9. Anatomia metody attr() Metoda attr() umoliwia ustawienie wartoci atrybutu tylko pierwszego elementu. $ lub jQuery (selektor).attr(attributeName, function(index, attr));9. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody attr() zawiera tabela 3.9. Tabela 3.9. Parametry metody attr() Parametr

Opis dziaania

attributeName

Nazwa atrybutu do ustawienia.

function(index, attr)

Funkcja zwraca warto ustawionego atrybutu.

3.1.10. Anatomia metody html() Metoda html() umoliwia dodanie kodu w postaci HTML do wybranego elementu strony internetowej. $ lub jQuery (selektor).html(htmlString);10. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. 8

http://api.jquery.com/append/. http://api.jquery.com/attr/. 10 http://api.jquery.com/html/. 9

Cz II i Tworzenie animowanych witryn internetowych

84

Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody html() zawiera tabela 3.10. Tabela 3.10. Parametry metody html() Parametr

Opis dziaania

htmlString

Umoliwia dodanie kodu w postaci HTML.

3.1.11. Anatomia metody remove() Metoda remove() umoliwia usuwanie elementów ze struktury drzewa modelu DOM. $ lub jQuery (selektor).remove([selector]);11. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody remove() zawiera tabela 3.11. Tabela 3.11. Parametry metody remove() Parametr

Opis dziaania

selector*

Umoliwia ustawienie nazwy selektora elementu, który zostanie usunity.

* — parametr opcjonalny

3.1.12. Anatomia metody empty() Metoda empty() umoliwia usuwanie wszystkich elementów dla wybranego selektora ze struktury drzewa modelu DOM. $ lub jQuery (selektor).empty();12. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

3.1.13. Anatomia metody eq() Metoda eq() umoliwia wskazanie konkretnego elementu HTML.

11 12

http://api.jquery.com/remove/. http://api.jquery.com/empty/.

Rozdzia 3. i Tworzenie zaawansowanych galerii fotografii w jQuery

85

$ lub jQuery (selektor).eq(index);13. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody eq() zawiera tabela 3.12. Tabela 3.12. Parametry metody eq() Parametr

Opis dziaania

index

Umoliwia wstawienie liczby cakowitej wskazujcej konkretny element HTML liczony od zera.

3.1.14. Anatomia metody index() Metoda index() umoliwia dostp za pomoc selektorów do elementów strony internetowej w strukturze drzewa modelu DOM. $ lub jQuery (selektor).index(selector);14. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody index() zawiera tabela 3.13. Tabela 3.13. Parametry metody index() Parametr

Opis dziaania

selector

Umoliwia wskazanie konkretnego elementu HTML.

3.1.15. Anatomia metody position() Metoda position() umoliwia okrelanie aktualnej pozycji elementów HTML. $ lub jQuery (selektor).position();15. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

3.1.16. Anatomia waciwoci length Waciwo length zwraca liczb elementów skadajcych si na obiekt jQuery. 13

http://api.jquery.com/eq/. http://api.jquery.com/index/. 15 http://api.jquery.com/position/. 14

Cz II i Tworzenie animowanych witryn internetowych

86

$ lub jQuery (selektor).length;16. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

3.2. Tworzenie projektów animowanych galerii fotografii 3.2.1. Tworzenie galerii fotografii z wywietlanym dynamicznie systemem nawigacji i moliwoci automatycznego odtwarzania pokazu zdj Schemat galerii fotografii z wywietlanym dynamicznie systemem nawigacji i moliwoci automatycznego odtwarzania pokazu zdj zawiera rysunek 3.1.

Opis budowy i dziaania animacji galerii fotografii Galeria fotografii skada si z omiu zdj , systemu nawigacji w postaci czterech przycisków (odtwarzaj, pauza, nastpny, poprzedni) umoliwiajcych jej obsug oraz z nagówka tekstowego pokazujcego numer aktualnie prezentowanej fotografii. Menu nawigacyjne jest wywietlane w momencie umieszczenia kursora myszy w obrbie galerii, a ukrywane, gdy wskanik opuci jej obszar. Podstawowe moliwoci modyfikacji galerii fotografii: 1. Zwikszenie lub zmniejszenie wymiarów szerokoci i wysokoci galerii. 2. Zwikszenie lub zmniejszenie liczby fotografii w galerii. 3. Zmiana wygldu przycisków tworzcych system nawigacji galerii. 4. Zmiana kolorystyki, wielkoci i rodzaju czcionki.

Zawarto folderu o nazwie galeria_z_nawigacja:  plik galeria_z_nawigacja.html,  folder css z plikiem style.css,  folder jquery_1.7.1 z plikiem jquery-1.7.1.min.js,  folder jquery_easing_plugin_1.3 z plikiem jquery.easing.1.3.js,

16

http://api.jquery.com/length/.

Rozdzia 3. i Tworzenie zaawansowanych galerii fotografii w jQuery Rysunek 3.1. Schemat galerii fotografii z wywietlanym dynamicznie systemem nawigacji i moliwoci automatycznego odtwarzania pokazu zdj

 folder jquery_functions z plikiem jquery_functions.js,  folder img z omioma fotografiami:  foto_1.jpg – foto_8.jpg o wymiarach 600×400 pikseli;  folder menu z czterema plikami graficznymi stanowicymi przyciski systemu

nawigacji galerii:  btn_odtwarzaj.png — o wymiarach 31×45 pikseli;  btn_pauza.png — o wymiarach 31×45 pikseli;  btn_nastepny.png — o wymiarach 31×45 pikseli;  btn_poprzedni.png — o wymiarach 31×45 pikseli.

Kod ródowy pliku style.css znajduje si na listingu 3.1. Kod ródowy pliku galeria_z_nawigacja.html znajduje si na listingu 3.2. Kod ródowy pliku jquery_functions.js znajduje si na listingu 3.3.

87

88

Cz II i Tworzenie animowanych witryn internetowych

Listing 3.1. Plik style.css Kod ródowy pliku style.css

Objanienie

body { margin:0px; padding:0px; border:0px;} img { margin:0px; padding:0px; border:0px;} div#kontener { width:800px; margin-top:100px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:0px;} .kontener_galeria{ width:600px; height:395px; margin-top:0px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:0px; position:relative; overflow:hidden;} .kontener_fotografii { width:600px; height:395px; margin-top:0px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:0px; position:relative;} .kontener_btn_nastepny { position:absolute; top:180px; right:-200px; width:31px; height:45px; z-index:1; opacity:0.6;} .kontener_btn_nastepny a { float:left; width:31px; height:45px; margin:0px; padding:0px; opacity:0.6; background-repeat:no-repeat;} .kontener_btn_nastepny a:hover { opacity:1.0;}

Formatujemy element body, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Formatujemy element img, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Formatujemy wyrodkowany kontener, w ramach którego wywietla si bdzie animowana galeria. Okrelamy szeroko i wysoko oraz marginesy zewntrzne i wewntrzne kontenera.

Formatujemy wyrodkowany kontener, w ramach którego wywietla si bdzie animowana galeria. Okrelamy szeroko i wysoko oraz marginesy zewntrzne i wewntrzne kontenera. Ustawiamy jego pooenie z wykorzystaniem pozycjonowania wzgldnego oraz kadrujemy i ukrywamy elementy galerii niemieszczce si w zadanym obszarze.

Formatujemy wyrodkowany kontener, w ramach którego wywietla si bd fotografie galerii. Okrelamy szeroko i wysoko oraz marginesy zewntrzne i wewntrzne kontenera. Ustawiamy jego pooenie z wykorzystaniem pozycjonowania wzgldnego.

Formatujemy kontener, w ramach którego wywietla si bdzie przycisk nastpny. Ustawiamy pooenie przycisku z wykorzystaniem pozycjonowania absolutnego. Okrelamy jego szeroko , wysoko i pozycj nakadanego elementu w stosie na poziomie pierwszym oraz przezroczysto . Formatujemy odsyacz a w stanie nienaruszonym, ustawiajc jego pooenie po lewej stronie. Okrelamy szeroko i wysoko , marginesy zewntrzne i wewntrzne, przezroczysto oraz niepowtarzalno ta.

Formatujemy odsyacz a:hover, okrelajc jego przezroczysto .

Rozdzia 3. i Tworzenie zaawansowanych galerii fotografii w jQuery

89

Listing 3.1. Plik style.css — cig dalszy Kod ródowy pliku style.css

Objanienie

.kontener_btn_poprzedni { position:absolute; top:180px; right:765px; width:31px; height:45px; z-index:1; opacity:0.6;} .kontener_btn_poprzedni a { float:left; width:31px; height:45px; margin:0px; padding:0px; opacity:0.6; background-repeat:no-repeat;} .kontener_btn_poprzedni a:hover { opacity:1.0;}

Formatujemy kontener, w ramach którego wywietla si bdzie przycisk poprzedni. Ustawiamy pooenie przycisku z wykorzystaniem pozycjonowania absolutnego. Okrelamy jego szeroko , wysoko i pozycj nakadanego elementu w stosie na poziomie pierwszym oraz przezroczysto .

.kontener_btn_odtwarzaj_pauza { position:absolute; bottom:-160px; right:280px; width:31px; height:45px; z-index:1; opacity:0.6;} .kontener_btn_odtwarzaj_pauza a { float:left; width:31px; height:45px; margin:0px; padding:0px; opacity:0.6; background-repeat:no-repeat;} .kontener_btn_odtwarzaj_pauza a:hover { opacity:1.0;} .kontener_btn_nastepny a.menu_nastepny { background-image:url(../menu/ ´btn_nastepny.png); outline:none;} .kontener_btn_poprzedni a.menu_poprzedni { background-image:url(../menu/ ´btn_poprzedni.png); outline:none;} .kontener_btn_odtwarzaj_pauza a.menu_ ´odtwarzaj { background-image:url(../ ´menu/btn_odtwarzaj.png); outline:none;} .kontener_btn_odtwarzaj_pauza ´a.menu_pauza { background-image:url(../ ´menu/btn_pauza.png); outline:none;}

Formatujemy odsyacz a w stanie nienaruszonym, ustawiajc jego pooenie po lewej stronie. Okrelamy szeroko i wysoko , marginesy zewntrzne i wewntrzne, przezroczysto oraz niepowtarzalno ta.

Formatujemy odsyacz a:hover, okrelajc jego przezroczysto . Formatujemy kontener, w ramach którego wywietla si bd przyciski odtwarzaj i pauza. Ustawiamy ich pooenie z wykorzystaniem pozycjonowania absolutnego. Okrelamy ich szeroko , wysoko i pozycj nakadanego elementu w stosie na poziomie pierwszym oraz przezroczysto . Formatujemy odsyacz a w stanie nienaruszonym, ustawiajc jego pooenie po lewej stronie. Okrelamy szeroko i wysoko , marginesy zewntrzne i wewntrzne, przezroczysto oraz niepowtarzalno ta.

Formatujemy odsyacz a:hover, okrelajc jego przezroczysto . Wstawiamy jako to plik graficzny btn_nastepny.png. Wstawiamy jako to plik graficzny btn_poprzedni.png. Wstawiamy jako to plik graficzny btn_odtwarzaj.png.

Wstawiamy jako to plik graficzny btn_pauza.png.

90

Cz II i Tworzenie animowanych witryn internetowych

Listing 3.1. Plik style.css — cig dalszy Kod ródowy pliku style.css

Objanienie

.numer_aktualnej_fotografii { position:absolute; top:0px; left:0px; width:100%; padding:6px; z-index:2; background-color:#000000; opacity:0.5; font-family:Georgia; font-size:12pt; color:#ffffff; text-align:center;}

Formatujemy kontener, w ramach którego wywietla si bdzie numer aktualnie prezentowanej fotografii. Ustawiamy jego pooenie z wykorzystaniem pozycjonowania absolutnego, okrelamy szeroko , pozycj nakadanego elementu w stosie na poziomie drugim, przezroczysto i czcionk.

Listing 3.2. Plik galeria_z_nawigacja.html Kod ródowy pliku galeria_z_nawigacja.html

Objanienie

Doczamy do strony internetowej zewntrzny plik przechowujcy kaskadowe arkusze stylów.

Doczamy do strony internetowej zewntrzny plik przechowujcy bibliotek jQuery.

Doczamy do strony internetowej zewntrzny plik przechowujcy skrypt jQuery animujcy galeri.

Tworzymy element div, który przechowuje galeri fotografii.









Tworzymy elementy div, które przechowuj zdjcia galerii. Tworzymy element div, który przechowuje przycisk nastpny. Tworzymy element div, który przechowuje przycisk poprzedni. Tworzymy element div, który przechowuje przyciski odtwarzaj i pauza. Tworzymy elementy div, które przechowuj pliki graficzne foto_1.jpg – foto_8.jpg.

Rozdzia 3. i Tworzenie zaawansowanych galerii fotografii w jQuery

91

Listing 3.2. Plik galeria_z_nawigacja.html — cig dalszy Kod ródowy pliku galeria_z_nawigacja.html







Objanienie

Tworzymy element div, który przechowuje numer aktualnie prezentowanego zdjcia.

Listing 3.3. Plik jquery_functions.js Kod ródowy pliku jquery_functions.js

Objanienie

$(document).ready(function(){ $(function() {

Metoda programu obsugi zdarze document.ready() umoliwia umieszczenie caego kodu jQuery jzyka JavaScript wewntrz zdarzenia w celu zapewnienia wykonania kodu po zaadowaniu cakowitej zawartoci witryny.

var czas_trwania_animacji = 3000;

Definicja zainicjalizowanej zmiennej JavaScript, której przypisujemy warto trzysekundowego czasu wywietlania fotografii w trakcie animacji. Czas wywietlania zdjcia definiujemy w milisekundach.

var licznik_czasu;

Deklaracja niezainicjalizowanej zmiennej JavaScript, której zostanie przypisana warto zwracana przez funkcj JavaScript setInterval().

var numer_aktualnej_fotografii = 0;

Definicja zainicjalizowanej zmiennej JavaScript, której przypisujemy warto pocztkow 0. W trakcie wykonywania skryptu zmienna bdzie przechowywa numer aktualnie wywietlanej fotografii.

var wskaznik_aktualnego_kontenera = 0;

Definicja zainicjalizowanej zmiennej JavaScript, której przypisujemy warto pocztkow 0. W trakcie wykonywania skryptu zmienna bdzie przechowywa numer aktualnie wywietlanego kontenera.

92

Cz II i Tworzenie animowanych witryn internetowych

Listing 3.3. Plik jquery_functions.js — cig dalszy Kod ródowy pliku jquery_functions.js

Objanienie

var calkowita_liczba_kontenerow = $("#pokaz_ ´fotografii .lista_fotografii").length;

Definicja zainicjalizowanej zmiennej JavaScript, której przypisujemy warto selektora jQuery przechowujcego informacj o cakowitej liczbie kontenerów.

var calkowita_liczba_fotografii = $("#pokaz_ ´fotografii .lista_fotografii").find('a').length;

Definicja zainicjalizowanej zmiennej JavaScript, której przypisujemy warto selektora jQuery przechowujcego informacj o cakowitej liczbie zdj w galerii.

start();

Wywoanie funkcji.

function start(){ nastepna_fotografia(); $("#menu_pauza_odtwarzaj").addClass('menu_ ´pauza').removeClass('menu_odtwarzaj'); licznik_czasu = setInterval(nastepna_fotografia,czas_ ´trwania_animacji)}

Definicja funkcji start(), która wywouje funkcj nastepna_fotografia(), dodaje klas CSS do elementu wskazanego i usuwa j z niego przez selektor jQuery oraz przypisuje zmiennej licznik_czasu wartoci zwracane przez funkcj setInterval(), która to funkcja ustawia opónienie dla cyklicznie wywoywanej animacji.

function pauza(){ $("#menu_pauza_odtwarzaj").addClass('menu_ ´odtwarzaj').removeClass('menu_pauza'); clearTimeout(licznik_czasu);}

Definicja funkcji pauza(), która dodaje klas CSS do elementu wskazanego i usuwa j z niego przez selektor jQuery oraz wywouje funkcj clearTimeout(), zatrzymujc wykonywanie animacji.

obsluga_zdarzen_myszy();

Wywoanie funkcji.

function obsluga_zdarzen_myszy(){ $("#kontener_galeria") .on('mouseenter',animacja_pokaz_btn_nastepny) .on('mouseleave',animacja_ukryj_btn_nastepny) .on('mouseenter',animacja_pokaz_btn_poprzedni) .on('mouseleave',animacja_ukryj_btn_poprzedni) .on('mouseenter',animacja_pokaz_btn_ ´odtwarzaj_pauza) .on('mouseleave',animacja_ukryj_btn_ ´odtwarzaj_pauza);} function animacja_pokaz_btn_nastepny(){ $("#kontener_btn_nastepny").animate( ´{'right':'10px'},500,'easeOutBack');} function animacja_ukryj_btn_nastepny(){ $("#kontener_btn_nastepny").animate({ ´'right':'-200px'},700,'easeInBack');} function animacja_pokaz_btn_poprzedni(){ $("#kontener_btn_poprzedni").animate({ ´'right':'555px'},500,'easeOutBack');} function animacja_ukryj_btn_poprzedni(){ $("#kontener_btn_poprzedni").animate({ ´'right':'765px'},700,'easeInBack');} function animacja_pokaz_btn_odtwarzaj_ ´pauza (){ $("#kontener_btn_odtwarzaj_pauza").animate( ´{'bottom':'15px'},500,'easeOutBack');}

Definicja funkcji obsluga_zdarzen_myszy(), która umoliwia wykonanie szeciu innych funkcji, animujcych przyciski galerii w zalenoci od wywoanego zdarzenia myszy.

Definicja funkcji, która umoliwia pokazywanie przycisku nastpny. Definicja funkcji, która umoliwia ukrywanie przycisku nastpny. Definicja funkcji, która umoliwia pokazywanie przycisku poprzedni. Definicja funkcji, która umoliwia ukrywanie przycisku poprzedni. Definicja funkcji, która umoliwia pokazywanie przycisków odtwarzaj i pauza.

Rozdzia 3. i Tworzenie zaawansowanych galerii fotografii w jQuery

93

Listing 3.3. Plik jquery_functions.js — cig dalszy Kod ródowy pliku jquery_functions.js

Objanienie

function animacja_ukryj_btn_odtwarzaj_ ´pauza (){ $("#kontener_btn_odtwarzaj_pauza").animate( ´{'bottom':'-160px'},700,'easeInBack');} $("#menu_nastepny").bind('click',function(){ pauza(); nastepna_fotografia();});

Definicja funkcji, która umoliwia ukrywanie przycisków odtwarzaj i pauza.

$("#menu_poprzedni").bind('click',function(){ pauza(); poprzednia_fotografia();});

Za pomoc metody bind() dowizujemy do selektora #menu_poprzedni obsug zdarzenia click(), które umoliwia wywoywanie funkcji pauza() i poprzednia_fotografia(). Pierwsza funkcja zatrzymuje automatyczne odtwarzanie pokazu zdj , a druga wywietla poprzedni fotografi.

$("#menu_pauza_odtwarzaj").bind('click', ´function(){ var $this = $(this); if($this.hasClass('menu_odtwarzaj')) start(); else pauza();}); function nastepna_fotografia(){ ++numer_aktualnej_fotografii; pokaz_fotografie('w_prawo');}

Za pomoc metody bind() dowizujemy do selektora #menu_pauza_odtwarzaj obsug zdarzenia click(), które umoliwia wywoywanie funkcji start() lub pauza().

Za pomoc metody bind() dowizujemy do selektora #menu_nastepny obsug zdarzenia click(), które umoliwia wywoywanie funkcji pauza() i nastepna_fotografia(). Pierwsza funkcja zatrzymuje automatyczne odtwarzanie pokazu zdj , a druga wywietla nastpn fotografi.

Definicja funkcji nastepna_fotografia(), która zwiksza warto liczbow zmiennej numer_aktualnej_fotografii o jeden oraz wywouje funkcj pokaz_fotografie().

function poprzednia_fotografia(){ --numer_aktualnej_fotografii; pokaz_fotografie('w_lewo');}

Definicja funkcji poprzednia_fotografia(), która zmniejsza warto liczbow zmiennej numer_aktualnej_fotografii o jeden oraz wywouje funkcj pokaz_fotografie().

function pokaz_fotografie(kierunek){ aktualizuj_fotografie(); var $pokaz = $('#pokaz_fotografii .lista_ ´fotografii:nth-child('+wskaznik_ ´aktualnego_kontenera+')') .find('a:nth-child('+ parseInt( ´numer_aktualnej_fotografii calkowita_liczba_fotografii*(wskaznik_ ´aktualnego_kontenera -1)) +')') .find('img'); if($pokaz.length){ var pobierz = $pokaz.attr('alt'); var $aktualne_zdjecie = $('#kontener_fotografii').find('img'); if($aktualne_zdjecie.length){ $aktualne_zdjecie.fadeOut(function(){$(this). ´remove();$('').load(function(){

Definicja funkcji pokaz_fotografie(), która umoliwia wywietlanie fotografii w galerii poprzez uycie kilku poczonych metod biblioteki jQuery.

94

Cz II i Tworzenie animowanych witryn internetowych

Listing 3.3. Plik jquery_functions.js — cig dalszy Kod ródowy pliku jquery_functions.js var $fotografia = $(this); $fotografia.hide(); $("#kontener_fotografii").empty().append( ´$fotografia.fadeIn()); }).attr('src', pobierz);});} else{ $('').load(function(){ var $fotografia = $(this); $fotografia.hide(); $("#kontener_fotografii").append($fotografia. ´fadeIn()); }).attr('src', pobierz);}} else{ if(kierunek == 'w_prawo') --numer_aktualnej_fotografii; else if(kierunek == 'w_lewo') ++numer_aktualnej_fotografii; aktualizuj_fotografie(); return;}} function aktualizuj_fotografie(){ wskaznik_aktualnego_kontenera = Math.ceil(numer_aktualnej_fotografii/ ´calkowita_liczba_fotografii); if(wskaznik_aktualnego_kontenera > ´calkowita_liczba_kontenerow){ wskaznik_aktualnego_kontenera = 1; numer_aktualnej_fotografii = 1;} else if(wskaznik_aktualnego_kontenera == 0){ wskaznik_aktualnego_kontenera = calkowita_ ´liczba_kontenerow; numer_aktualnej_fotografii = wskaznik_aktualnego_kontenera*calkowita_ ´liczba_fotografii;} $("#numer_aktualnej_fotografii").html( ´'Numer fotografii: ' + numer_aktualnej_ ´fotografii + ' z ' + calkowita_liczba fotografii);} }); });

Objanienie

Definicja funkcji aktualizuj_fotografie(), która za pomoc obiektu JavaScript Math.ceil() oblicza numer aktualnie prezentowanej fotografii, a przy uyciu metody html() wywietla go z tekstem w nagówku galerii.

3.2.2. Tworzenie galerii fotografii z miniaturami Schemat galerii fotografii z miniaturami zawiera rysunek 3.2.

Opis budowy i dziaania animacji galerii fotografii Galeria fotografii skada si z dwunastu zdj w formie szeciu miniatur i szeciu zdj o waciwych wymiarach oraz z nagówka tekstowego pokazujcego numer i opis aktualnie prezentowanej fotografii. Wywietlanie kolejnych zdj w galerii odbywa si poprzez kliknicie kursorem myszy wybranej miniatury.

Rozdzia 3. i Tworzenie zaawansowanych galerii fotografii w jQuery

Rysunek 3.2. Schemat galerii fotografii z miniaturami

Podstawowe moliwoci modyfikacji galerii fotografii: 1. Zwikszenie lub zmniejszenie wymiarów szerokoci i wysokoci galerii. 2. Zwikszenie lub zmniejszenie liczby fotografii w galerii. 3. Zmiana kolorystyki, wielkoci i rodzaju czcionki.

Zawarto folderu o nazwie galeria_z_miniaturami:  plik galeria_z_miniaturami.html,  folder css z plikiem style.css,  folder jquery_1.7.1 z plikiem jquery-1.7.1.min.js,  folder jquery_easing_plugin_1.3 z plikiem jquery.easing.1.3.js,  folder jquery_functions z plikiem jquery_functions.js,  folder img_miniatury z szecioma fotografiami:  foto_1.jpg — foto_6.jpg o wymiarach 120×80 pikseli;

95

Cz II i Tworzenie animowanych witryn internetowych

96

 folder img_duze_fotografie z szecioma fotografiami:  foto_1.jpg — foto_6.jpg o wymiarach 600×400 pikseli.

Kod ródowy pliku style.css znajduje si na listingu 3.4. Listing 3.4. Plik style.css Kod ródowy pliku style.css

Objanienie

body { margin:0px; padding:0px; border:0px;} img { margin:0px; padding:0px; border:0px;} div#kontener { width:800px; margin-top:50px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:0px;} div#kontener_galeria { width:600px; height:400px; margin-top:0px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding-bottom:10px;} div#pokaz_fotografii { width:600px; height:400px; position:relative; overflow:hidden;}

Formatujemy element body, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli.

div#lista_fotografii { position:relative;}

Formatujemy kontener, w ramach którego wywietla si bd fotografie galerii. Ustawiamy jego pooenie z wykorzystaniem pozycjonowania wzgldnego.

div#lista_fotografii div { width:600px; height:400px; float:left; position:relative;} div#lista_fotografii div a { width:100%; padding:5px; top:0px; left:0px; position:absolute; font-family:Georgia; font-size:16px; font-weight:bold; color: #000000;

Formatujemy element div. Okrelamy jego szeroko i wysoko oraz pooenie po lewej stronie z wykorzystaniem pozycjonowania wzgldnego.

Formatujemy element img, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Formatujemy wyrodkowany kontener, w ramach którego wywietla si bdzie animowana galeria. Okrelamy szeroko oraz marginesy zewntrzne i wewntrzne kontenera.

Formatujemy wyrodkowany kontener, w ramach którego wywietla si bdzie animowana galeria. Okrelamy szeroko i wysoko oraz marginesy zewntrzne i dolny margines wewntrzny kontenera.

Formatujemy kontener, w ramach którego wywietla si bd fotografie galerii. Okrelamy jego szeroko i wysoko , pooenie z wykorzystaniem pozycjonowania wzgldnego oraz kadrujemy i ukrywamy elementy galerii niemieszczce si w zadanym obszarze.

Formatujemy odsyacz a w stanie nienaruszonym. Okrelamy jego szeroko , marginesy wewntrzne, pooenie z wykorzystaniem pozycjonowania absolutnego, waciwoci czcionki i tekstu oraz przezroczysto .

Rozdzia 3. i Tworzenie zaawansowanych galerii fotografii w jQuery

97

Listing 3.4. Plik style.css — cig dalszy Kod ródowy pliku style.css text-decoration:none; background-color:#ffffff; opacity:0.5;} div#kontener_male_fotografie a:hover { border-bottom:3px solid #ff0000;} div#kontener_male_fotografie { text-align:center;}

Objanienie

Formatujemy element odsyacza a:hover, nad którym w danej chwili znajduje si kursor myszy. Okrelamy grubo , styl linii i kolor dolnego obramowania. Tworzymy kontener, w ramach którego wywietla si bd wyrodkowane miniatury fotografii.

Kod ródowy pliku galeria_z_miniaturami.html znajduje si na listingu 3.5. Listing 3.5. Plik galeria_z_miniaturami.html Kod ródowy pliku galeria_z_miniaturami.html

Objanienie

Doczamy do strony internetowej zewntrzny plik przechowujcy kaskadowe arkusze stylów.

Doczamy do strony internetowej zewntrzny plik przechowujcy bibliotek jQuery.

Doczamy do strony internetowej zewntrzny plik przechowujcy skrypt jQuery animujcy galeri.

Tworzymy element div, który przechowuje galeri fotografii.

Tworzymy element div, który przechowuje zdjcia galerii.

Tworzymy elementy div, które przechowuj

fotografie o waciwych wymiarach w postaci

plików graficznych foto_1.jpg – foto_6.jpg.

´Fotografia 1



´Fotografia 2



Cz II i Tworzenie animowanych witryn internetowych

98

Listing 3.5. Plik galeria_z_miniaturami.html — cig dalszy Kod ródowy pliku galeria_z_miniaturami.html

´Fotografia 3



´Fotografia 4



´Fotografia 5



´Fotografia 6









Objanienie

Tworzymy elementy div, które przechowuj miniatury fotografii w postaci plików graficznych foto_1.jpg – foto_6.jpg.

Kod ródowy pliku jquery_functions.js znajduje si na listingu 3.6.

Rozdzia 3. i Tworzenie zaawansowanych galerii fotografii w jQuery

99

Listing 3.6. Plik jquery_functions.js Kod ródowy pliku jquery_functions.js

Objanienie

$(document).ready(function(){

Metoda programu obsugi zdarze document.ready() umoliwia umieszczenie caego kodu jQuery jzyka JavaScript wewntrz zdarzenia w celu zapewnienia wykonania kodu po zaadowaniu cakowitej zawartoci witryny.

var liczba_fotografii = $("#lista_ ´fotografii div");

Definicja zainicjalizowanej zmiennej JavaScript, której przypisujemy warto selektora jQuery przechowujcego informacj o cakowitej liczbie duych fotografii.

var pokaz_fotografie = $("#kontener_ ´male_fotografie a");

Definicja zainicjalizowanej zmiennej JavaScript, której przypisujemy warto selektora jQuery przechowujcego informacj o cakowitej liczbie miniatur.

var aktualna_pozycja_fotografii;

Deklaracja niezainicjalizowanej zmiennej JavaScript, której zostanie przypisana warto zwracana przez funkcj zmiana_fotografii().

var przesun_fotografie = $("#pokaz_ ´fotografii");

Definicja zainicjalizowanej zmiennej JavaScript, której przypisujemy warto selektora jQuery przechowujcego informacj o odlegoci przesunicia fotografii.

var szerokosc_fotografii = 600;

Definicja zainicjalizowanej zmiennej JavaScript, której przypisujemy wymiar szerokoci fotografii o wartoci 600 pikseli.

pokaz_fotografie.on('click',zmiana_ ´fotografii);

Za pomoc metody on() dowizujemy do zmiennej pokaz_fotografie obsug zdarzenia click(), które umoliwia wywoywanie funkcji zmiana_fotografii().

function zmiana_fotografii() { aktualna_pozycja_fotografii = liczba_ ´fotografii.eq( pokaz_fotografie. ´index( this) ).position(); przesun_fotografie.animate( ´{'scrollLeft': aktualna_pozycja_ ´fotografii.left},2500, ´'easeOutElastic');} $("#lista_fotografii").css('width', ´liczba_fotografii.length * szerokosc_ ´fotografii); });

Definicja funkcji zmiana_fotografii(), która umoliwia przesuwanie fotografii w galerii poprzez uycie kilku poczonych metod biblioteki jQuery.

Za pomoc metody css() obliczamy cakowit szeroko wszystkich fotografii w galerii.

100

Cz II i Tworzenie animowanych witryn internetowych

Rozdzia 4.

Animowanie stron internetowych w jQuery 4.1. Wprowadzenie Animowane strony internetowe wykonane na podstawie biblioteki jQuery wykorzystuj metody animacji, które umo liwiaj zastosowanie ró nych efektów specjalnych.

W rozdziale czwartym wykonamy animowany szablon strony internetowej skadajcy si z rotatora, poziomego menu, lewej i prawej kolumny oraz ze stopki. Animowan stron internetow wykonamy na podstawie nastpujcych technologii: 1. XHTML 1.0 (The Extensible HyperText Markup Language). 2. CSS 3.0 (Cascading Style Sheets). 3. Biblioteka jQuery 1.7.1 z dodatkiem Easing 1.3. 4. Biblioteka jQuery UI 1.10.0. 5. JavaScript.

4.1.1. Anatomia metody wrapAll() Metoda wrapAll() umoliwia otaczanie (obejmowanie) elementów HTML w strukturze modelu drzewa DOM.

Cz II i Tworzenie animowanych witryn internetowych

102

$ lub jQuery (selektor).wrapAll(wrappingElement);1. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody wrapAll() zawiera tabela 4.1. Tabela 4.1. Parametry metody wrapAll() Parametr

Opis dziaania

wrappingElement

Umoliwia ustawienie nazwy znacznika HTML, który bdzie otacza (obejmowa) inne elementy HTML.

4.2. Tworzenie projektów animowanych stron internetowych 4.2.1. Tworzenie animowanego szablonu strony internetowej Opis budowy i dziaania animowanej strony internetowej Oto elementy przykadowego animowanego szablonu strony internetowej: 1. Rotator, który automatycznie zmienia slajdy ze zdjciami i tekstem oraz

umoliwia uycie linku odsyajcego do innych zasobów sieciowych. Rotator jako pierwszy pojawia si na stronie WWW w trakcie wczytywania witryny do przegldarki internetowej. 2. Poziome menu zbudowane z omiu zakadek. W momencie umieszczania

kursora myszy w obszarze zakadki wywietla si animowane zdjcie. Po opuszczeniu przez kursor myszy obszaru zakadki zdjcie jest ukrywane. Menu jako drugie pojawia si na stronie WWW w trakcie wczytywania witryny do przegldarki internetowej. 3. Lewa kolumna z linkiem do ukrytej zawartoci w postaci tekstu, wywietlana

lub ukrywana na stronie internetowej po klikniciu na link Poka/Ukryj. Lewa kolumna jako trzecia pojawia si na stronie WWW w trakcie wczytywania witryny do przegldarki internetowej. 4. Prawa kolumna z linkiem do ukrytej zawartoci w postaci zdjcia, wywietlana

lub ukrywana na stronie internetowej po klikniciu na link Poka/Ukryj. Prawa kolumna jako czwarta pojawia si na stronie WWW w trakcie wczytywania witryny do przegldarki internetowej. 1

http://api.jquery.com/wrapAll/.

Rozdzia 4. i Animowanie stron internetowych w jQuery

103

5. Stopka z linkiem do ukrytej zawartoci w postaci tekstu i zdjcia, wywietlana

lub ukrywana na stronie internetowej po klikniciu na link Poka/Ukryj. Stopka jako pita pojawia si na stronie WWW w trakcie wczytywania witryny do przegldarki internetowej. Podstawowe moliwoci modyfikacji animowanej strony internetowej: 1. Zwikszenie lub zmniejszenie szerokoci szablonu strony internetowej. 2. Zwikszenie lub zmniejszenie liczby kolumn strony internetowej. 3. Zwikszenie lub zmniejszenie liczby slajdów w rotatorze. 4. Zmiana wygldu przycisków tworzcych system nawigacji menu. 5. Zmiana szaty graficznej strony internetowej: zdj , kolorystyki, wielkoci

i rodzaju czcionki. 6. Zmiana zawartoci tekstowej strony internetowej. 7. Zmiana efektów animacji.

Zawarto folderu o nazwie szablon_strony:  plik szablon_strony.html,  folder css_menu z plikiem style_menu.css,  folder css_rotator z plikiem style_rotator.css,  folder css_strona z plikiem style_strona.css,  folder jquery_1.7.1 z plikiem jquery-1.7.1.min.js,  folder jquery_easing_plugin_1.3 z plikiem jquery.easing.1.3.js,  folder jquery_functions_menu z plikiem jquery_functions_menu.js,  folder jquery_functions_rotator z plikiem jquery_functions_rotator.js,  folder jquery-ui-1.10.0.custom z plikiem jquery-ui-1.10.0.custom.min.js,  folder img_menu z omioma plikami graficznymi:  zakladka_1.jpg – zakladka_8.jpg o wymiarach 120×150 pikseli;  folder img_rotator z picioma plikami graficznymi:  01.jpg – 04.jpg o wymiarach 1000×300 pikseli;  tlo.png o wymiarach 13×19 pikseli;  folder img_strona z jednym plikiem graficznym:  01.jpg o wymiarach 600×409 pikseli.

Kod ródowy pliku style_strona.css znajduje si na listingu 4.1. Kod ródowy pliku style_rotator.css znajduje si na listingu 4.2.

104

Cz II i Tworzenie animowanych witryn internetowych

Listing 4.1. Plik style_strona.css Kod ródowy pliku style_strona.css

Objanienie

body{ margin-top:5px; margin-bottom:0px; margin-right:0px; margin-left:0px; padding:0px; border:0px; background-color:#ffffff;} img { margin:0px; padding:0px; border:0px;} a#wiecej { color:#ff0000; text-decoration:none;}

Formatujemy element body, przypisujc marginesowi górnemu warto równ 5 pikseli, natomiast pozostaym marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Okrelamy waciwoci ta: kolor.

a:hover#wiecej { color:#000000; text-decoration:none;}

Formatujemy element odsyacza a:hover, nad którym w danej chwili znajduje si kursor myszy. Okrelamy waciwoci czcionki: kolor, oraz waciwoci tekstu: brak podkrelenia dla linku.

h4.naglowek { padding:3px; margin:0px; border:0px; color:#ffffff; background:#000000;} #kontener_strona { width:1000px; margin-top:153px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:0px; border:0px;} #kontener_lewa_kolumna { top:0px; left:-2000px; position:relative; width:300px; float:left; margin:0px; padding-top:0px; padding-bottom:20px; padding-right:20px; padding-left:20px; border:1px solid #000000; font-family:Tahoma; font-size:10pt; color:#000000; text-align:justify; vertical-align:middle;}

Formatujemy element h4, przypisujc marginesom wewntrznym warto równ 3 pikseli, natomiast pozostaym marginesom zewntrznym i obramowaniu warto równ 0 pikseli. Okrelamy waciwoci czcionki oraz ta: kolor.

Formatujemy element img, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Formatujemy element odsyacza a w stanie nienaruszonym. Okrelamy waciwoci czcionki: kolor, oraz waciwoci tekstu: brak podkrelenia dla linku.

Formatujemy wyrodkowany kontener, w ramach którego wywietla si bdzie animowana strona internetowa. Okrelamy szeroko , marginesy zewntrzne i wewntrzne oraz obramowanie kontenera.

Formatujemy kontener, w ramach którego wywietla si bdzie animowana zawarto lewej kolumny strony internetowej. Ustawiamy pooenie i szeroko z wykorzystaniem pozycjonowania wzgldnego. Okrelamy marginesy zewntrzne, wewntrzne i obramowanie oraz waciwoci czcionki i tekstu: rodzaj, wielko , kolor i wyrodkowanie w pionie i poziomie.

Rozdzia 4. i Animowanie stron internetowych w jQuery

105

Listing 4.1. Plik style_strona.css — cig dalszy Kod ródowy pliku style_strona.css

Objanienie

#kontener_prawa_kolumna { top:0px; left:-2000px; position:relative; width:600px; float:right; margin:0px; padding-top:0px; padding-bottom:20px; padding-right:20px; padding-left:20px; border:1px solid #000000; font-family:Tahoma; font-size:10pt; color:#000000; text-align:justify; vertical-align:middle;} span.ukryty_tekst { display:none;}

Formatujemy kontener, w ramach którego wywietla si bdzie animowana zawarto prawej kolumny strony internetowej. Ustawiamy pooenie i szeroko z wykorzystaniem pozycjonowania wzgldnego. Okrelamy marginesy zewntrzne, wewntrzne i obramowanie oraz waciwoci czcionki i tekstu: rodzaj, wielko , kolor i wyrodkowanie w pionie i poziomie.

Formatujemy element span, w którym ukrywamy przechowywan zawarto tekstu lewej kolumny strony WWW.

span.ukryte_zdjecie { display:none;}

Formatujemy element span, w którym ukrywamy przechowywan zawarto obrazka prawej kolumny strony WWW.

span.ukryty_tekst_zdjecie { display:none;}

Formatujemy element span, w którym ukrywamy przechowywan zawarto tekstu i obrazka stopki strony WWW.

#stopka { clear:both; top:10px; left:-2000px; position:relative; width:1000px; margin-top:0px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding-top:0px; padding-bottom:20px; padding-right:20px; padding-left:20px; border:1px solid #000000; font-family:Tahoma; font-size:10pt; color:#000000; text-align:justify; vertical-align:middle;}

Formatujemy wyrodkowany kontener, w ramach którego wywietla si bdzie animowana zawarto stopki strony internetowej. Ustawiamy pooenie i szeroko z wykorzystaniem pozycjonowania wzgldnego. Okrelamy marginesy zewntrzne, wewntrzne i obramowanie oraz waciwoci czcionki i tekstu: rodzaj, wielko , kolor i wyrodkowanie w pionie i poziomie.

106

Cz II i Tworzenie animowanych witryn internetowych

Listing 4.2. Plik style_rotator.css Kod ródowy pliku style_rotator.css

Objanienie

#kontener_rotator { position:relative; top:0px; left:-2000px; width:1000px; margin-top:0px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:0px;} #rotator #rotator_kontener { width:1000px; height:300px; margin:0; padding:0; position:relative; overflow:hidden;}

Formatujemy wyrodkowany kontener, w ramach którego wywietla si bdzie animowany rotator strony internetowej. Ustawiamy jego pooenie i szeroko z wykorzystaniem pozycjonowania wzgldnego. Okrelamy marginesy zewntrzne i wewntrzne kontenera.

Formatujemy kontener, w ramach którego wywietla si bdzie animowany rotator strony internetowej. Okrelamy szeroko i wysoko oraz marginesy zewntrzne i wewntrzne kontenera. Ustawiamy jego pooenie z wykorzystaniem pozycjonowania wzgldnego oraz kadrujemy i ukrywamy elementy rotatora niemieszczce si w zadanym obszarze.

#rotator #rotator_kontener .aktualnosci { width:1000px; height:300px; margin:0; padding:0; position:relative;} #rotator #rotator_kontener .aktualnosci .rotator_tekst { width:100%; height:130px; margin:0; padding:0; top:170px; left:0px; position:absolute; font-family:Georgia; font-size:10pt; color:#ffffff; backgroundimage:url(../img_rotator/tlo.png); background-repeat:repeat;} p.hiperlacze a { color:#ffffff; text-decoration:none;}

Formatujemy kontener, w ramach którego wywietla si bdzie zawarto animowanego rotatora strony internetowej. Okrelamy jego szeroko i wysoko , marginesy zewntrzne i wewntrzne oraz ustawiamy jego pooenie z wykorzystaniem pozycjonowania wzgldnego.

p.hiperlacze a:hover { color:#ff0000; text-decoration:none;}

Formatujemy element odsyacza a:hover, nad którym w danej chwili znajduje si kursor myszy. Okrelamy waciwoci czcionki i tekstu: kolor i brak podkrelenia dla linku.

h2, p { margin-top:10px; margin-right:0px; margin-bottom:0px; margin-left:10px; padding:0;}

Formatujemy elementy h2 i p. Okrelamy ich marginesy zewntrzne i wewntrzne.

Formatujemy kontener, w ramach którego wywietla si bdzie zawarto animowanego rotatora strony internetowej. Okrelamy szeroko i wysoko oraz marginesy zewntrzne i wewntrzne kontenera. Ustawiamy jego pooenie z wykorzystaniem pozycjonowania absolutnego. Formatujemy waciwoci czcionki: rodzaj, wielko i kolor. Wstawiamy jako to plik graficzny tlo.png.

Formatujemy element odsyacza a w stanie nienaruszonym. Okrelamy waciwoci czcionki i tekstu: kolor i brak podkrelenia dla linku.

Rozdzia 4. i Animowanie stron internetowych w jQuery

107

Kod ródowy pliku style_menu.css znajduje si na listingu 4.3. Listing 4.3. Plik style_menu.css Kod ródowy pliku style_menu.css

Objanienie

div#kontener_menu { position:relative; top:0px; left:-2000px; width:970px; margin-top:3px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:0px;} a.menu { font-family:Georgia; font-size:12pt; color:#ffffff; text-decoration:none; outline:none;} a:hover.menu { font-family:Georgia; font-size:12pt; color:#ff0000; text-decoration:none; outline:none;} ul { margin:0; padding:0; border:0px; list-style-type:none; display:block;} li { width:120px; height:50px; float:left; text-align:center; border-right:1px solid #ffffff;}

Formatujemy wyrodkowany kontener, w ramach którego wywietla si bdzie animowane menu strony internetowej. Ustawiamy jego pooenie i szeroko z wykorzystaniem pozycjonowania wzgldnego. Okrelamy marginesy zewntrzne i wewntrzne kontenera.

.menu_1 { background:url(../img_menu/zakladka_1.jpg) ´top left no-repeat;} .menu_2 { background:url(../img_menu/zakladka_2.jpg) ´top left no-repeat;} .menu_3 { background:url(../img_menu/zakladka_3.jpg) ´top left no-repeat;} .menu_4 { background:url(../img_menu/zakladka_4.jpg) ´top left no-repeat;} .menu_5 { background:url(../img_menu/zakladka_5.jpg) ´top left no-repeat;}

Formatujemy element odsyacza a w stanie nienaruszonym. Okrelamy waciwoci czcionki i tekstu: rodzaj, wielko , kolor i brak podkrelenia oraz obramowania dla linku. Formatujemy element odsyacza a:hover, nad którym w danej chwili znajduje si kursor myszy. Okrelamy waciwoci czcionki i tekstu: rodzaj, wielko , kolor i brak podkrelenia oraz obramowania dla linku. Formatujemy list ul tak, aby bya wywietlana jako element blokowy. Okrelamy marginesy zewntrzne i wewntrzne oraz obramowanie elementu blokowego. Formatujemy pozycje li listy ul tak, aby znajdoway si po lewej stronie. Pozycje li listy ul stanowi zakadki menu. Okrelamy ich szeroko i wysoko oraz waciwoci tekstu i obramowania: wyrodkowanie, grubo , rodzaj i kolor. Wstawiamy jako to plik graficzny zakladka_1.jpg dla pierwszej zakadki menu. Wstawiamy jako to plik graficzny zakladka_2.jpg dla drugiej zakadki menu. Wstawiamy jako to plik graficzny zakladka_3.jpg dla trzeciej zakadki menu. Wstawiamy jako to plik graficzny zakladka_4.jpg dla czwartej zakadki menu. Wstawiamy jako to plik graficzny zakladka_5.jpg dla pitej zakadki menu.

Cz II i Tworzenie animowanych witryn internetowych

108

Listing 4.3. Plik style_menu.css — cig dalszy Kod ródowy pliku style_menu.css

Objanienie

.menu_6 { background:url(../img_menu/zakladka_6.jpg) ´top left no-repeat;} .menu_7 { background:url(../img_menu/zakladka_7.jpg) ´top left no-repeat;} .menu_8 { background:url(../img_menu/zakladka_8.jpg) ´top left no-repeat;}

Wstawiamy jako to plik graficzny zakladka_6.jpg dla szóstej zakadki menu. Wstawiamy jako to plik graficzny zakladka_7.jpg dla siódmej zakadki menu. Wstawiamy jako to plik graficzny zakladka_8.jpg dla ósmej zakadki menu.

Kod ródowy pliku szablon_strony.html znajduje si na listingu 4.4. Listing 4.4. Plik szablon_strony.html Kod ródowy pliku szablon_strony.html

Objanienie

Doczamy do strony internetowej zewntrzny plik przechowujcy kaskadowe arkusze stylów formatujce rotator strony WWW.

Doczamy do strony internetowej zewntrzny plik przechowujcy kaskadowe arkusze stylów formatujce menu strony WWW.

Doczamy do strony internetowej zewntrzny plik przechowujcy kaskadowe arkusze stylów formatujce stron WWW.

Doczamy do strony internetowej zewntrzny plik przechowujcy bibliotek jQuery.



Doczamy do strony internetowej zewntrzny plik przechowujcy bibliotek jQuery UI.

Do selektora .pokaz_ukryj_tekst_zdjecie dowizujemy zdarzenie click(), które umoliwia pokazywanie i ukrywanie tekstu i zdjcia umieszczonego w selektorze .ukryty_tekst_zdjecie. Animowanie tekstu i zdjcia umoliwia zastosowanie metody toggle() z efektem explode.





Lorem ipsum dolor sit amet 1

Lorem ipsum dolor sit amet, consectetur ´adipisicing elit, sed do eiusmod tempor ´incididunt ut labore et dolore magna aliqua. ´ Ut enim ad minim veniam, quis nostrud ´exercitation ullamco laboris nisi ut ´aliquip ex ea commodo consequat. Duis aute ´irure dolor in reprehenderit in voluptate ´velit esse cillum dolore eu fugiat nulla

Tworzymy elementy div, które przechowuj animowany rotator strony internetowej. Tworzymy zawarto pierwszego slajdu w postaci zdjcia i umieszczonego na nim tekstu, który jest wywietlany w rotatorze na stronie internetowej.

110

Cz II i Tworzenie animowanych witryn internetowych

Listing 4.4. Plik szablon_strony.html — cig dalszy Kod ródowy pliku szablon_strony.html ´pariatur. Excepteur sint occaecat cupidatat ´non proident, sunt in culpa qui officia ´deserunt mollit anim id est laborum.

Lorem ipsum ´»   

Lorem ipsum dolor sit amet 2

Lorem ipsum dolor sit amet, consectetur ´adipisicing elit, sed do eiusmod tempor ´incididunt ut labore et dolore magna aliqua. ´ Ut enim ad minim veniam, quis nostrud ´exercitation ullamco laboris nisi ut ´aliquip ex ea commodo consequat. Duis aute ´irure dolor in reprehenderit in voluptate ´velit esse cillum dolore eu fugiat nulla ´pariatur. Excepteur sint occaecat cupidatat ´non proident, sunt in culpa qui officia ´deserunt mollit anim id est laborum.

Lorem ipsum ´»   

Lorem ipsum dolor sit amet 3

Lorem ipsum dolor sit amet, consectetur ´adipisicing elit, sed do eiusmod tempor ´incididunt ut labore et dolore magna aliqua. ´ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ´ex ea commodo consequat. Duis aute irure ´dolor in reprehenderit in voluptate velit ´esse cillum dolore eu fugiat nulla pariatur. ´ Excepteur sint occaecat cupidatat non ´proident, sunt in culpa qui officia ´deserunt mollit anim id est laborum.

Lorem ipsum ´»   

Lorem ipsum dolor sit amet 4

Lorem ipsum dolor sit amet, consectetur ´adipisicing elit, sed do eiusmod tempor ´incididunt ut labore et dolore magna aliqua. ´Ut enim ad minim veniam, quis nostrud

Objanienie

Tworzymy zawarto drugiego slajdu w postaci zdjcia i umieszczonego na nim tekstu, który jest wywietlany w rotatorze na stronie internetowej.

Tworzymy zawarto trzeciego slajdu w postaci zdjcia i umieszczonego na nim tekstu, który jest wywietlany w rotatorze na stronie internetowej.

Tworzymy zawarto czwartego slajdu w postaci zdjcia i umieszczonego na nim tekstu, który jest wywietlany w rotatorze na stronie internetowej.

Rozdzia 4. i Animowanie stron internetowych w jQuery

111

Listing 4.4. Plik szablon_strony.html — cig dalszy Kod ródowy pliku szablon_strony.html ´exercitation ullamco laboris nisi ut ´aliquip ex ea commodo consequat. Duis aute ´irure dolor in reprehenderit in voluptate ´velit esse cillum dolore eu fugiat nulla ´pariatur. Excepteur sint occaecat cupidatat ´non proident, sunt in culpa qui officia ´deserunt mollit anim id est laborum.

Lorem ipsum ´»   

• Lorem 2





• Lorem 4





• Lorem 6




• 
  
  Objanienie
  
  Tworzymy element div, który przechowuje animowane menu strony internetowej. Tworzymy osiem zakadek menu jako kolejne pozycje li listy ul.
  
  class=
  
  class=
  
  class=
  
  class=
  
  class=
  
  class=
  
  class=
  
  112
  
  Cz II i Tworzenie animowanych witryn internetowych
  
  Listing 4.4. Plik szablon_strony.html — cig dalszy Kod ródowy pliku szablon_strony.html

  Lorem 8

Objanienie

Tworzymy element div, który przechowuje animowan lew i praw kolumn strony internetowej.

Tworzymy element div, który przechowuje zawarto animowanej lewej kolumny strony internetowej.

Lorem ipsum dolor ´sit amet
Lorem ipsum dolor sit amet, consectetur ´adipisicing elit, sed do eiusmod tempor ´incididunt ut labore et dolore magna aliqua. ´ Ut enim ad minim veniam, quis nostrud ´exercitation ullamco laboris nisi ut ´aliquip ex ea commodo consequat.
Poka/ukryj

Lorem ipsum dolor sit ´amet, consectetur adipisicing elit, sed do ´eiusmod tempor incididunt ut labore et ´dolore magna aliqua. Ut enim ad minim ´veniam, quis nostrud exercitation ullamco ´laboris nisi ut aliquip ex ea commodo ´consequat.
Lorem ipsum dolor sit amet, consectetur ´adipisicing elit, sed do eiusmod tempor ´incididunt ut labore et dolore magna aliqua. ´ Ut enim ad minim veniam, quis nostrud ´exercitation ullamco laboris nisi ut ´aliquip ex ea commodo consequat.

Tworzymy ukryt zawarto lewej kolumny w postaci tekstu. Zawarto ta jest wywietlana lub ukrywana na stronie internetowej po klikniciu na link Poka/Ukryj.

Lorem ipsum dolor sit ´amet
Lorem ipsum dolor sit amet, consectetur ´adipisicing elit, sed do eiusmod tempor ´incididunt ut labore et dolore magna aliqua. ´ Ut enim ad minim veniam, quis nostrud ´exercitation ullamco laboris nisi ut ´aliquip ex ea commodo consequat.
Poka/ukryj

Lorem ipsum dolor sit amet
Poka/ukryj

Lorem ipsum dolor sit amet, consectetur ´adipisicing elit, sed do eiusmod tempor ´incididunt ut labore et dolore magna aliqua. ´ Ut enim ad minim veniam, quis nostrud ´exercitation ullamco laboris nisi ut ´aliquip ex ea commodo consequat.

Objanienie

Tworzymy element div, który przechowuje zawarto animowanej stopki strony internetowej. Tworzymy ukryt zawarto stopki w postaci tekstu i zdjcia. Zawarto ta jest wywietlana lub ukrywana na stronie internetowej po klikniciu na link Poka/Ukryj.

Kod ródowy pliku jquery_functions_rotator.js znajduje si na listingu 4.5. Listing 4.5. Plik jquery_functions_rotator.js Kod ródowy pliku jquery_functions_rotator.js

Objanienie

$(document).ready(function(){

Metoda programu obsugi zdarze document.ready() umoliwia umieszczenie caego kodu jQuery jzyka JavaScript wewntrz zdarzenia w celu zapewnienia wykonania kodu po zaadowaniu cakowitej zawartoci witryny.

var pozycja_poczatkowa_slajdu = 0;

Definicja zainicjalizowanej zmiennej JavaScript, której przypisujemy warto równ 0. W trakcie wykonywania skryptu zmienna bdzie okrela pozycj pocztkow slajdu.

var szerokosc_slajdu = 1000;

Definicja zainicjalizowanej zmiennej JavaScript, której przypisujemy warto równ 1000. W trakcie wykonywania skryptu zmienna bdzie okrela szeroko slajdu.

var slajdy = $('.aktualnosci');

Definicja zainicjalizowanej zmiennej JavaScript, której przypisujemy warto selektora .aktualnosci.

var liczba_slajdow = slajdy.length;

Definicja zainicjalizowanej zmiennej JavaScript, której przypisujemy warto selektora lenght przechowujcego informacj o cakowitej liczbie slajdów.

var czas_trwania_animacji;

Deklaracja niezainicjalizowanej zmiennej JavaScript, której zostanie przypisana warto zwracana przez funkcj JavaScript setInterval().

Cz II i Tworzenie animowanych witryn internetowych

114

Listing 4.5. Plik jquery_functions_rotator.js — cig dalszy Kod ródowy pliku jquery_functions_rotator.js

Objanienie

var czas_pokazu_slajdu = 4000;

Definicja zainicjalizowanej zmiennej JavaScript, której przypisujemy warto czterosekundowego czasu wywietlania slajdu w trakcie animacji. Czas wywietlania slajdu definiujemy w milisekundach (1000 ms = 1 sekunda).

czas_trwania_animacji = setInterval ´(zmien_slajd, czas_pokazu_slajdu);

Przypisujemy zmiennej czas_trwania_animacji wartoci zwracane przez funkcj setInterval(), która ustawia opónienie dla cyklicznie wywoywanej animacji.

slajdy.wrapAll('');

Dodajemy element div, który bdzie przechowywa slajdy rotatora.

slajdy.css({'float' : 'left'});

Ustawiamy kierunek przesuwania slajdów w lew stron.

$('#pokaz_slajdow').css('width', szerokosc_ ´slajdu * liczba_slajdow); function zmien_slajd() { if(pozycja_poczatkowa_slajdu == liczba_ ´slajdow - 1) { pozycja_poczatkowa_slajdu = 0;} else ´{pozycja_poczatkowa_slajdu++;} animowanie_slajdow();} function animowanie_slajdow() { $('#pokaz_slajdow').animate({'marginLeft' : ´szerokosc_slajdu*(-pozycja_poczatkowa_ ´slajdu)});} });

Ustalamy szeroko wszystkich slajdów. Definicja funkcji zmien_slajd(), która umoliwia ustalenie pozycji pocztkowej slajdu oraz wywoanie funkcji animowanie_slajdow().

Definicja funkcji animowanie_slajdow(), która umoliwia przesuwanie slajdów w lew stron.

Kod ródowy pliku jquery_functions_menu.js znajduje si na listingu 4.6. Listing 4.6. Plik jquery_functions_menu.js Kod ródowy pliku jquery_functions_menu.js

Objanienie

$(document).ready(function(){

Metoda programu obsugi zdarze document.ready() umoliwia umieszczenie caego kodu jQuery jzyka JavaScript wewntrz zdarzenia w celu zapewnienia wykonania kodu po zaadowaniu cakowitej zawartoci witryny.

$("li").mouseover(function(){ Do selektora li dowizujemy zdarzenie $(this).stop().animate({height:"150px"}, mouseover(), które umoliwia pokazywanie ´{duration:1200, easing: "easeOutBounce"})}); i ukrywanie zdj umieszczonych w poszczególnych

zakadkach menu. Animowanie zdj umoliwia zastosowanie metody animate() z efektem easeOutBounce. $("li").mouseout(function(){ $(this).stop().animate({height:"50px"}, ´{duration:1500, easing: ´"easeOutElastic"})}); });

Do selektora li dowizujemy zdarzenie mouseout(), które umoliwia pokazywanie i ukrywanie zdj umieszczonych w poszczególnych zakadkach menu. Animowanie zdj umoliwia zastosowanie metody animate() z efektem easeOutElastic.

Rozdzia 5.

Tworzenie zaawansowanych formularzy w jQuery 5.1. Wprowadzenie Formularz internetowy jest to interaktywna forma elektronicznej ankiety wypenianej na stronie WWW, z której dane s przesyane na poczt elektroniczn lub do bazy danych.

W rozdziale pitym wykonamy interaktywny formularz umoliwiajcy przesyanie informacji na skrzynk poczty elektronicznej. Formularz sprawdza, czy uytkownik poprawnie wypeni poszczególne pola obowizkowe i zalenie od spenienia bd niespenienia tego warunku wywietla odpowiednie komunikaty. Prezentowane przez formularz monity informuj uytkownika o poprawnoci uzupenionych danych w konkretnych polach, o braku ich uzupenienia lub o niepoprawnym ich uzupenieniu. Formularz przygotujemy na podstawie nastpujcych technologii: 1. XHTML 1.0 (The Extensible HyperText Markup Language). 2. CSS 3.0 (Cascading Style Sheets). 3. Biblioteka jQuery 1.7.1. 4. JavaScript.

5.1.1. Anatomia zdarzenia focus() Zdarzenie focus() jest wywoywane w momencie kliknicia kursorem myszy w obszarze pola formularza lub przez uycie klawisza Tab.

Cz II i Tworzenie animowanych witryn internetowych

116

$ lub jQuery (selektor).focus([eventData], handler(eventObject));1. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry zdarzenia focus() zawiera tabela 5.1. Tabela 5.1. Parametry zdarzenia focus() Parametr

Opis dziaania

[eventData]*

Obiekt zawierajcy dane, które zostan przekazane do metody obsugi zdarzenia.

handler(eventObject)

Umoliwia wykonywanie funkcji za kadym razem, kiedy zdarzenie jest wywoywane.

* — parametr opcjonalny

5.1.2. Anatomia zdarzenia blur() Zdarzenie blur() jest wywoywane w momencie dezaktywowania aktualnie zaznaczonego pola formularza poprzez kliknicie kursorem myszy w obszar innego pola lub przez uycie klawisza Tab. $ lub jQuery (selektor).blur([eventData], handler(eventObject));2. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry zdarzenia blur() zawiera tabela 5.2. Tabela 5.2. Parametry zdarzenia blur() Parametr

Opis dziaania

[eventData]*

Obiekt zawierajcy dane, które zostan przekazane do metody obsugi zdarzenia.

handler(eventObject)

Umoliwia wykonywanie funkcji za kadym razem, kiedy zdarzenie jest wywoywane.

* — parametr opcjonalny

5.1.3. Anatomia zdarzenia select() Zdarzenie select() jest wywoywane w momencie zaznaczenia kursorem myszy lub przy uyciu klawiatury tekstu znajdujcego si wewntrz obszaru pola tekstowego.

1 2

http://api.jquery.com/focus/. http://api.jquery.com/blur/.

Rozdzia 5. i Tworzenie zaawansowanych formularzy w jQuery

117

$ lub jQuery (selektor).select([eventData], handler(eventObject));3. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry zdarzenia select() zawiera tabela 5.3. Tabela 5.3. Parametry zdarzenia select() Parametr

Opis dziaania

[eventData]*

Obiekt zawierajcy dane, które zostan przekazane do metody obsugi zdarzenia.

handler(eventObject)

Umoliwia wykonywanie funkcji za kadym razem, kiedy zdarzenie jest wywoywane.

* — parametr opcjonalny

5.1.4. Anatomia zdarzenia change() Zdarzenie change() jest wywoywane w momencie zmiany wartoci w edytowanym polu typu , lub . 4

$ lub jQuery (selektor).change([eventData], handler(eventObject)); . $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry zdarzenia change() zawiera tabela 5.4. Tabela 5.4. Parametry zdarzenia change() Parametr

Opis dziaania

[eventData]*

Obiekt zawierajcy dane, które zostan przekazane do metody obsugi zdarzenia.

handler(eventObject)

Umoliwia wykonywanie funkcji za kadym razem, kiedy zdarzenie jest wywoywane.

* — parametr opcjonalny

5.1.5. Anatomia zdarzenia submit() Zdarzenie submit(), które moe by dowizywane wycznie do pól formularzy, jest wywoywane w momencie wysania formularza przez kliknicie przycisku wylij lub nacinicie klawisza Enter.

3 4

http://api.jquery.com/select/. http://api.jquery.com/change/.

Cz II i Tworzenie animowanych witryn internetowych

118

$ lub jQuery (selektor).submit(handler(eventObject));5. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry zdarzenia submit() zawiera tabela 5.5. Tabela 5.5. Parametry zdarzenia submit() Parametr

Opis dziaania

handler(eventObject)

Umoliwia wykonywanie funkcji za kadym razem, kiedy zdarzenie jest wywoywane.

5.1.6. Anatomia metody val() Metoda val() umoliwia pobieranie wartoci z pierwszego dopasowanego pola formularza. $ lub jQuery (selektor).val(value);6. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Wartoci metody val() zawiera tabela 5.6. Tabela 5.6. Wartoci metody val() Warto

Opis dziaania

value

Umoliwia pobranie wartoci z pierwszego dopasowanego pola formularza.

5.1.7. Anatomia metody each() Metoda each() umoliwia wykonywanie funkcji w ptli dla kadego dopasowanego elementu. $ lub jQuery (selektor).each(function(index, Element));7. $ lub jQuery — aliasy (odwoania) biblioteki jQuery. Selektor — umoliwia wybieranie elementów ze struktury dokumentu HTML.

Parametry metody each() zawiera tabela 5.7.

5 6 7

http://api.jquery.com/submit/. http://api.jquery.com/val/. http://api.jquery.com/each/.

Rozdzia 5. i Tworzenie zaawansowanych formularzy w jQuery

119

Tabela 5.7. Parametry metody each() Parametr

Opis dziaania

function(index, Element)

Umoliwia wykonywanie funkcji w ptli dla kadego dopasowanego elementu.

5.2. Tworzenie projektów formularzy 5.2.1. Tworzenie interaktywnego formularza ankietowego Przykad interaktywnego formularza ankietowego zawiera rysunek 5.1. Rysunek 5.1. Przykad interaktywnego formularza ankietowego

Przykad aktywnego pola tekstowego formularza zawiera rysunek 5.2. Rysunek 5.2. Przykad aktywnego pola tekstowego formularza

Przykad poprawnie wypenionego pola tekstowego formularza zawiera rysunek 5.3.

Cz II i Tworzenie animowanych witryn internetowych

120 Rysunek 5.3. Przykad poprawnie wypenionego pola tekstowego formularza

Przykad niewypenionego pola tekstowego formularza zawiera rysunek 5.4. Rysunek 5.4. Przykad niewypenionego pola tekstowego formularza

Przykad pola tekstowego formularza z poprawnie wpisanym adresem e-mail zawiera rysunek 5.5. Rysunek 5.5. Przykad pola tekstowego formularza z poprawnie wpisanym formatem e-mail

Przykad pola tekstowego formularza z niepoprawnie wpisanym formatem e-mail zawiera rysunek 5.6. Rysunek 5.6. Przykad pola tekstowego formularza z niepoprawnie wpisanym formatem e-mail

Przykad listy rozwijanej formularza z wybran jedn opcj zawiera rysunek 5.7. Rysunek 5.7. Przykad listy rozwijanej formularza z wybran jedn opcj

Przykad listy wyboru formularza z wybranymi dwoma opcjami zawiera rysunek 5.8.

Rysunek 5.8. Przykad listy wyboru formularza z wybranymi dwoma opcjami

Rozdzia 5. i Tworzenie zaawansowanych formularzy w jQuery

121

Przykad przycisków wylij i wyczy formularza zawiera rysunek 5.9. Rysunek 5.9. Przykad przycisków wylij i wyczy formularza

Opis budowy i dziaania interaktywnego formularza ankietowego Oto elementy projektowanego formularza: 1. Trzy pola typu (nazwy pól: Imi, Nazwisko,

Adres e-mail) w postaci pola tekstowego o dugoci 20 znaków z moliwoci wpisania maksymalnie 50 znaków. 2. Jedno pole typu (nazwa pola: Opisz metodologi techniki

Ajax) w postaci wieloliniowego obszaru tekstowego tworzonego przez 3 wiersze i 25 kolumn, które mog si zmieci w polu bez koniecznoci jego przewijania. 3. Dwa pola typu (nazwy pól: Tak lub Nie)

w postaci pola opcji umoliwiajcego zaznaczenie wycznie jednej z nich. 4. Cztery pola typu (nazwy pól: MySQL,

PostgreSQL, Oracle, Firebird) w postaci pola wyboru umoliwiajcego zaznaczenie wicej ni jednej opcji lub pozostawienie wszystkich opcji jako niezaznaczonych. 5. Jedno pole typu w postaci pola kombi (listy rozwijanej) umoliwiajcego wybranie wycznie jednej opcji typu

sporód kilku dostpnych (nazwy opcji: Script.aculo.us, Prototype, jQuery, MooTools). 6. Jedno pole typu w postaci pola kombi (listy przewijanej za pomoc przycisków) z atrybutami multiple (wielokrotny) i size (rozmiar), umoliwiajcego jednoczesne wybranie kilku opcji typu (nazwy opcji: Zend, CakePHP, Symfony, CodeIgniter, Prado). Atrybut multiple odpowiada za moliwo wyboru kilku sporód wielu dostpnych opcji, natomiast atrybut size okrela liczb wierszy

(linii) listy przewijanej, które bd jednoczenie widoczne. W naszym przykadzie s widoczne trzy wiersze, natomiast dostp do dwóch pozostaych niewidocznych uzyskujemy za pomoc przycisków góra i dó. Podstawowe moliwoci modyfikacji interaktywnego formularza ankietowego: 1. Dodanie lub usunicie poszczególnych pól formularza. 2. Zmiana szaty graficznej formularza.

Zawarto folderu o nazwie formularz:  plik formularz.html,  folder css z plikiem style.css,

Cz II i Tworzenie animowanych witryn internetowych

122

 folder jquery_1.7.1 z plikiem jquery-1.7.1.min.js,  folder jquery_functions z plikiem jquery_functions.js.

Kod ródowy pliku style.css znajduje si na listingu 5.1. Listing 5.1. Plik style.css Kod ródowy pliku style.css

Objanienie

body { margin:0px; padding:0px; border:0px; font-family:Georgia; font-size:10pt; color:#000000;} div#kontener { width:1000px; margin-top:20px; margin-bottom:20px; margin-right:auto; margin-left:auto; padding:0px;} table { width:820px; margin-top:0px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:5px; text-align:center; vertical-align:middle; border-collapse:collapse;} td { margin:0px; padding:10px; text-align:right; vertical-align:middle;} td.wyrownanie_do_lewej { width:600px; margin:0px; padding:10px; text-align:left; vertical-align:middle;} input { font-family:Georgia; font-size:10pt; font-weight:bold; color:#0099cc;} textarea { font-family:Georgia; font-size:10pt; font-weight:bold; color:#0099cc;}

Formatujemy element body, przypisujc marginesom zewntrznym, wewntrznym i obramowaniu warto równ 0 pikseli. Okrelamy waciwoci czcionki: rodzaj, wielko i kolor.

Formatujemy wyrodkowany kontener, w ramach, którego wywietla si bdzie interaktywny formularz. Okrelamy szeroko i marginesy zewntrzne i wewntrzne kontenera.

Formatujemy element table, okrelajc szeroko , marginesy zewntrzne i wewntrzne, obramowanie oraz waciwoci tekstu: wyrównanie w poziomie i pionie.

Formatujemy element td, okrelajc marginesy zewntrzne i wewntrzne oraz waciwoci tekstu: wyrównanie w poziomie i pionie. Formatujemy element td z przypisan klas, okrelajc szeroko marginesów zewntrznych i wewntrznych oraz waciwoci tekstu: wyrównanie w poziomie i pionie.

Formatujemy element input, okrelajc waciwoci czcionki: rodzaj, wielko , pogrubienie i kolor.

Formatujemy element textarea, okrelajc waciwoci czcionki: rodzaj, wielko , pogrubienie i kolor.

Rozdzia 5. i Tworzenie zaawansowanych formularzy w jQuery

123

Listing 5.1. Plik style.css — cig dalszy Kod ródowy pliku style.css

Objanienie

.naglowek_formularza { font-size:14pt; color:#000000;} .etykieta { font-style:italic;} .gwiazdka_pole_wymagane { font-size:14pt; color:#ff0000;} .wyroznienie { border:2px solid #0099cc; background-color:#CCEBF5;} .mala_czcionka { font-family:Georgia; font-size:8pt;} .niepoprawne_dane { margin:0px; padding:8px; background:#ff0000; color:#ffffff; border:3px solid #FFCCCC;} .poprawne_dane { margin:0px; padding:8px; background:#008000; color:#ffffff; border:3px solid #CCE6CC;} .framework_js { margin:0px; padding:8px; background:#008000; color:#ffffff; border:3px solid #CCE6CC; display:none} .frameworki_php { margin:0px; padding:8px; background:#008000; color:#ffffff; border:3px solid #CCE6CC; display:none}

Tworzymy klas formatujc waciwoci czcionki: wielko i kolor. Tworzymy klas formatujc waciwoci czcionki: styl. Tworzymy klas formatujc waciwoci czcionki: wielko i kolor. Tworzymy klas formatujc waciwoci obramowania: grubo , styl i kolor, oraz waciwoci ta: kolor. Tworzymy klas formatujc waciwoci czcionki: rodzaj i wielko . Tworzymy klas formatujc marginesy zewntrzne i wewntrzne oraz waciwoci ta, czcionki i obramowania. Klasa jest tworzona w celu stylizacji komunikatu o wprowadzeniu niepoprawnych danych w pola formularza. Tworzymy klas formatujc marginesy zewntrzne i wewntrzne oraz waciwoci ta, czcionki i obramowania. Klasa jest tworzona w celu stylizacji komunikatu o wprowadzeniu poprawnych danych w pola formularza. Tworzymy klas formatujc marginesy zewntrzne i wewntrzne oraz waciwoci ta, czcionki i obramowania. Klasa jest tworzona w celu stylizacji komunikatu o wybraniu jednej z opcji listy rozwijanej.

Tworzymy klas formatujc marginesy zewntrzne i wewntrzne oraz waciwoci ta, czcionki i obramowania. Klasa jest tworzona w celu stylizacji komunikatu o wybraniu jednej lub dwóch z opcji listy przewijanej.

Kod ródowy pliku formularz.html znajduje si na listingu 5.2. Listing 5.2. Plik formularz.html Kod ródowy pliku formularz.html

Objanienie

Doczamy do strony internetowej zewntrzny plik przechowujcy kaskadowe arkusze stylów.

Doczamy do strony internetowej zewntrzny plik przechowujcy bibliotek jQuery.

124

Cz II i Tworzenie animowanych witryn internetowych

Listing 5.2. Plik formularz.html — cig dalszy Kod ródowy pliku formularz.html

Objanienie

Doczamy do strony internetowej zewntrzny plik przechowujcy skrypt jQuery animujcy formularz.

Tworzymy element div, który przechowuje formularz.

Tworzymy formularz z dwoma atrybutami: method i action. Warto pierwszego atrybutu okrela sposób przesyania informacji z formularza przez protokó HTTP (ang. Hypertext Transfer Protocol), natomiast warto drugiego umoliwia skierowanie tych informacji na wskazany adres e-mail.



Tworzymy tabel.



Tworzymy pierwszy wiersz tabeli z komórk nagówkow, w której znajduje si tytu tabeli. Komórk nagówkow tworz trzy komórki scalone w poziomie.

FORMULARZ ANKIETOWY
	´Nazwisko:*
	Co to ´jest Ajax:*
Tak Nie
MySQL ´PostgreSQL Oracle ´Firebird
- Wybierz - Script.aculo.us Prototype jQuery Tworzymy pity wiersz tabeli z trzema komórkami. Pierwsza komórka przechowuje tekst, druga obszar tekstowy, natomiast trzecia stanowi kontener na dynamicznie wywietlane komunikaty. Tworzymy szósty wiersz tabeli z dwoma komórkami. Pierwsza komórka przechowuje tekst, druga dwa pola opcji. Tworzymy siódmy wiersz tabeli z dwoma komórkami. Pierwsza komórka przechowuje tekst, druga cztery pola wyboru. Tworzymy ósmy wiersz tabeli z trzema komórkami. Pierwsza komórka przechowuje tekst, druga pole kombi (list rozwijan) z czteroma opcjami do wyboru, natomiast trzecia stanowi kontener na dynamicznie wywietlane komunikaty. Cz II i Tworzenie animowanych witryn internetowych 126 Listing 5.2. Plik formularz.html — cig dalszy Kod ródowy pliku formularz.html MooTools	Wybierz dwa najpopularniejsze ´frameworki PHP:* (Aby wybra dwie odpowiedzi, ´naley uy klawisza Ctrl).

Objanienie

Tworzymy dziewity wiersz tabeli z trzema komórkami. Pierwsza komórka przechowuje tekst, druga pole kombi (list przewijan) z picioma opcjami do wyboru, natomiast trzecia stanowi kontener na dynamicznie wywietlane komunikaty.

Tworzymy dziesity wiersz tabeli z dwoma komórkami. Pierwsza komórka przechowuje tekst, druga dwa przyciski: wylij i wyczy.

Tworzymy jedenasty wiersz tabeli z jedn komórk, która stanowi kontener na dynamicznie wywietlane komunikaty.

Kod ródowy pliku jquery_functions.js znajduje si na listingu 5.3.

Rozdzia 5. i Tworzenie zaawansowanych formularzy w jQuery

127

Listing 5.3. Plik jquery_functions.js Kod ródowy pliku jquery_functions.js

Objanienie

$(document).ready(function(){

Metoda programu obsugi zdarze document.ready() umoliwia umieszczenie caego kodu jQuery jzyka JavaScript wewntrz zdarzenia w celu zapewnienia wykonania kodu po zaadowaniu cakowitej zawartoci witryny.

$("#imie").bind('focus', function(){ $(this).addClass('wyroznienie');});

Dowizujemy za pomoc metody bind() obsug zdarzenia focus() do pola tekstowego formularza. Nastpnie formatujemy pole poprzez uycie metody addClass(), która umoliwia dodanie klasy kaskadowych arkuszy stylów.

$("#imie").bind('blur', function(){ $(this).removeClass('wyroznienie'); var imie = $("#imie").val(); $("#imie_komunikat").html(''); if(imie == '') { $(".niepoprawne_dane").replaceWith('Pole wymagane ´'); }else {$("#imie_komunikat").html('Wpisano imi.');}}); $("#nazwisko").bind('focus', function(){ $(this).addClass('wyroznienie');});

Dowizujemy za pomoc metody bind() obsug zdarzenia blur() do pola tekstowego formularza. Nastpnie formatujemy pole przy uyciu metody removeClass(), która umoliwia usunicie klasy kaskadowych arkuszy stylów. Za pomoc metody val() pobieramy warto z pola jako zmienn, a nastpnie sprawdzamy, czy pole zostao poprawnie wypenione. W zalenoci od tego, czy warunek ten zosta speniony czy nie, zostaje wywietlony odpowiedni komunikat poprzez uycie metody html().

$("#nazwisko").bind('blur', function(){ $(this).removeClass('wyroznienie'); var nazwisko = $("#nazwisko").val(); $("#nazwisko_komunikat").html(''); if(nazwisko == '') { $(".niepoprawne_dane").replaceWith('Pole wymagane ´'); }else {$("#nazwisko_komunikat").html('Wpisano nazwisko. ´');}}); $("#email").bind('focus', function(){ $(this).addClass('wyroznienie');});

Dowizujemy za pomoc metody bind() obsug zdarzenia blur() do pola tekstowego formularza. Nastpnie formatujemy pole przy uyciu metody removeClass(), która umoliwia usunicie klasy kaskadowych arkuszy stylów. Za pomoc metody val() pobieramy warto z pola jako zmienn, a nastpnie sprawdzamy, czy pole zostao poprawnie wypenione. W zalenoci od tego, czy warunek ten zosta speniony czy nie, zostaje wywietlony odpowiedni komunikat poprzez uycie metody html().

$("#email").bind('blur', function(){ $(this).removeClass('wyroznienie'); var format_email_kontrola = /^([\w-\.]+@( ´[\w-]+\.)+[\w-]{2,4})?$/; var email = $("#email").val();

Dowizujemy za pomoc metody bind() obsug zdarzenia blur() do pola tekstowego formularza. Nastpnie formatujemy pole przy uyciu metody removeClass(), która umoliwia usunicie klasy kaskadowych arkuszy stylów. Za pomoc metody

Dowizujemy za pomoc metody bind() obsug zdarzenia focus() do pola tekstowego formularza. Nastpnie formatujemy pole poprzez uycie metody addClass(), która umoliwia dodanie klasy kaskadowych arkuszy stylów.

Dowizujemy za pomoc metody bind() obsug zdarzenia focus() do pola tekstowego formularza. Nastpnie formatujemy pole poprzez uycie metody addClass(), która umoliwia dodanie klasy kaskadowych arkuszy stylów.

128

Cz II i Tworzenie animowanych witryn internetowych

Listing 5.3. Plik jquery_functions.js — cig dalszy Kod ródowy pliku jquery_functions.js

Objanienie

$("#email_komunikat").html(''); if(email == '') { $(".niepoprawne_dane").replaceWith('Pole wymagane');} else if(!format_email_kontrola.test(email)) { $(".niepoprawne_dane").replaceWith('Popraw format ´e-mail.');} else { $("#email_komunikat").html('Poprawny format e-mail. ´');}}); $("#opis").bind('focus', function(){ $(this).addClass('wyroznienie');});

val() pobieramy warto z pola jako zmienn,

$("#opis").bind('blur', function(){ $(this).removeClass('wyroznienie'); var opis = $("#opis").val(); $("#opis_komunikat").html(''); if(opis == '') { $(".niepoprawne_dane").replaceWith('Pole wymagane ´'); } else {$("#opis_komunikat").html('Wpisano definicj ´zmiennej');}}); $(".wybrany_framework_javascript").bind( ´'change', function() { var wybrany = "Wybrano: "; $("select.wybrany_framework_javascript ´option:selected").each(function () { wybrany += $(this).html() + " ";}); $(".framework_js").html(wybrany); $(".framework_js").show();});

Dowizujemy za pomoc metody bind() obsug zdarzenia blur() do obszaru tekstowego formularza. Nastpnie formatujemy obszar przy uyciu metody removeClass(), która umoliwia usunicie klasy kaskadowych arkuszy stylów. Za pomoc metody val() pobieramy warto z obszaru jako zmienn, a nastpnie sprawdzamy, czy obszar zosta poprawnie wypeniony. W zalenoci od tego, czy warunek ten zosta speniony czy nie, zostaje wywietlony odpowiedni komunikat poprzez uycie metody html().

$(".wybrane_frameworki_php").bind('change', ´function() { var wybrany = "Wybrano: "; $("select.wybrane_frameworki_php option:selected").each(function () { wybrany += $(this).html() + " ";}); $(".frameworki_php").html(wybrany); $(".frameworki_php").show();});

Dowizujemy za pomoc metody bind() obsug zdarzenia change() do pola kombi (listy przewijanej) formularza. Nastpnie deklarujemy zmienn, która bdzie przechowywa warto opcji wybranej z listy. Przejcie w ptli po wszystkich elementach listy umoliwia metoda each(). Wywietlanie wybranej opcji z listy odbywa si za pomoc metod html() i show().

a nastpnie sprawdzamy, czy pole zostao poprawnie wypenione. W zalenoci od tego, czy warunek ten zosta speniony czy nie, zostaje wywietlony odpowiedni komunikat poprzez uycie metody html(). W celu sprawdzenia poprawnoci formatu adresu e-mail uywamy uproszczonego wyraenia regularnego.

Dowizujemy za pomoc metody bind() obsug zdarzenia focus() do obszaru tekstowego formularza. Nastpnie formatujemy obszar poprzez uycie metody addClass(), która umoliwia dodanie klasy kaskadowych arkuszy stylów.

Dowizujemy za pomoc metody bind() obsug zdarzenia change() do pola kombi (listy rozwijanej) formularza. Nastpnie deklarujemy zmienn, która bdzie przechowywa warto opcji wybranej z listy. Przejcie w ptli po wszystkich elementach listy umoliwia metoda each(). Wywietlanie wybranej opcji z listy odbywa si za pomoc metod html() i show().

Rozdzia 5. i Tworzenie zaawansowanych formularzy w jQuery

129

Listing 5.3. Plik jquery_functions.js — cig dalszy Kod ródowy pliku jquery_functions.js

Objanienie

$("#kontrola_formularza").bind('click', ´function(){ var imie = $("#imie").val(); var nazwisko = $("#nazwisko").val(); var email = $("#email").val(); var opis = $("#opis").val(); $("#kontrola_formularza_komunikat").html( ´''); if(imie == '' || nazwisko == '' || email == '' ´|| opis == '') { $(".niepoprawne_dane").replaceWith('Uzupenij ´formularz.');} else { $("#kontrola_formularza_komunikat").html( ´'Wysano ´formularz.');}}); });

Dowizujemy za pomoc metody bind() obsug zdarzenia click() do przycisku wysyajcego formularz. Przy uyciu metody val() pobieramy wartoci z pól formularza jako zmienne, a nastpnie sprawdzamy, czy wszystkie pola formularza zostay wypenione.

130

Cz II i Tworzenie animowanych witryn internetowych

Skorowidz A aktywne pole tekstowe, 119 animacja, 11 banera Leaderboard, 23 Medium Rectangle, 32 Rectangle, 36 Wide Skyscraper, 27 galerii fotografii, 86, 94 menu wielopoziomowego, 70 rozsuwanego pionowego, 54 rozsuwanego poziomego, 51 z efektami specjalnymi, 58 animowane banery reklamowe, 9 galerie, 79 menu, 41 witryny internetowe, 39, 101

B baner, 11 Leaderboard, 11, 22 Medium Rectangle, 11, 31 Rectangle, 11, 35 Wide Skyscraper, 11, 26 biblioteka jQuery, 7, 12 jQuery 1.7.16, 12 jQuery TOOLS, 12 jQuery UI 1.10.0, 12

C CSS 2.0, 79 CSS 3.0, 12

D dodatek Easing 1.3, 12

E EIAA, 12 elementy formularza, 121 szablonu, 102

F filtr is(), 50 folder baner_leaderboard_728_x_90, 23 baner_medium_rectangle_300_x_250, 33 baner_rectangle_180_x_150, 36 baner_wide_ skyscraper_160_x_600, 27 formularz, 121 galeria_z_miniaturami, 95 galeria_z_nawigacja, 86 menu, 87 menu_wielopoziomowe, 71 menu_z_efektami_specjalnymi, 59 rozsuwane_menu_pionowe, 55 rozsuwane_menu_poziome, 51 szablon_strony, 103 formularz, 115, 119 budowa i dziaanie, 121

132

Skorowidz

G galeria fotografii, 79

I IAB, 12

J jzyk JavaScript, 12 XHTML 1.0, 12 jQuery, 7, 12 jQuery 1.7.16, 12 jQuery TOOLS, 12 jQuery UI 1.10.0, 12

next(), 48 on(), 80 position(), 85 queue(), 21 remove(), 84 removeClass(), 81 show(), 46 siblings(), 48 slideDown(), 45 slideToggle(), 46 slideUp(), 45 stop(), 49 toggleClass(), 82 val(), 118 wrapAll(), 101 moliwoci modyfikacji strony, 103

P K kaskadowe arkusze stylów, 12, 79

M menu, 41 rozsuwane pionowe, 41, 54 rozsuwane poziome, 41, 51 wielopoziomowe, 41, 70 z efektami specjalnymi, 41, 58 metoda addClass(), 81 animate(), 13 append(), 83 attr(), 83 bind(), 80 children(), 49 clearQueue(), 21 css(), 22 delay(), 14 dequeue(), 21 each(), 118 effect(), 16 empty(), 84 eq(), 84 fadeIn(), 20 fadeOut(), 20 fadeTo(), 47 find(), 48 hasClass(), 82 hide(), 47 html(), 83 index(), 85 load(), 80

parametry filtra is(), 50 metody addClass(), 81 animate(), 13 append(), 83 attr(), 83 bind(), 81 children(), 49 clearQueue(), 22 css(), 22 delay(), 16 dequeue(), 21 each(), 119 effect(), 17 eq(), 85 fadeIn(), 20 fadeOut(), 20 fadeTo(), 47 find(), 48 hasClass(), 82 hide(), 47 html(), 84 index(), 85 load(), 80 next(), 48 on(), 80 queue(), 21 remove(), 84 removeClass(), 82 show(), 46 siblings(), 49 slideDown(), 45 slideToggle(), 46 slideUp(), 45

jQuery. Tworzenie animowanych witryn internetowych stop(), 50 toggleClass(), 82 wrapAll(), 102 zdarzenia blur(), 116 change(), 117 click(), 44 focus(), 116 hover(), 44 mouseenter(), 43 mouseleave(), 43 mouseout(), 42 mouseover(), 42 select(), 117 submit(), 118 plik baner_leaderboard.html, 25 baner_medium_rectangle.html, 34 baner_rectangle.html, 37 baner_wide_skyscraper.html, 29, 30 formularz.html, 123, 125 galeria_z_miniaturami.html, 97, 98 galeria_z_nawigacja.html, 90 jquery_functions.js, 25, 30, 34, 38, 54, 58, 68, 70, 77, 91–94, 99, 127–129 jquery_functions_menu.js, 114 jquery_functions_rotator.js, 113 menu_wielopoziomowe.html, 73, 75, 77 menu_z_efektami_specjalnymi.html, 66–68 rozsuwane_menu_pionowe.html, 56 rozsuwane_menu_poziome.html, 53 style.css, 24, 28, 33, 36, 52, 55, 60–73, 88–90, 96, 122 style_menu.css, 107, 108 style_rotator.css, 106 style_strona.css, 104, 105 szablon_strony.html, 108–113 pola tekstowe formularza, 119 projekty animowanych banerów, 22 galerii, 86 menu, 51 stron, 102 projekty formularzy, 119

S schemat obiektu banera Leaderboard, 22 Medium Rectangle, 31 Rectangle, 35 Wide Skyscraper, 26

133

selektor animated, 50 standardy reklam, 12 szablon animowanej strony, 101

T tworzenie animowanego szablonu strony, 102 banerów, 11 formularzy, 115, 119 galerii, 79 z miniaturami, 94 z systemem nawigacji, 86 menu, 41 typy animacji, 14, 17 banerów, 11

W wartoci metody val(), 118 waciwo length, 85

X XHTML, 12

Z zdarzenie blur(), 116 change(), 117 click(), 44 focus(), 115 hover(), 44 load(), 79 mouseenter(), 43 mouseleave(), 43 mouseout(), 42 mouseover(), 42 select(), 116 submit(), 117