Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości
lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione.
Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie
książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie
praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi
bÄ…dz
towarowymi ich właścicieli.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte
w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej
odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne
naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION
nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe
z wykorzystania informacji zawartych w książce.
Redaktor prowadzÄ…cy: Ewelina Burska
Autor zdjęć: Marcin Majkowski
Projekt okładki: Studio Gravite/Olsztyn
Obarek, Pokoński, Pazdrijowski, Zaprucki
Materiały graficzne na okładce zostały wykorzystane za zgodą Shutterstock.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. [phone]
e-mail: [e-mail]
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie?jqtwan
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Materiały do książki można znalez
ć pod adresem:
ftp://ftp.helion.pl/przyklady/jqtwan.zip
ISBN: 978-83-246-5541-0
Copyright © Helion 2013
Printed in Poland.
" Kup książkę " Księgarnia internetowa
" Poleć książkę " Lubię to! Nasza społeczność
" Oceń książkę
Spis tre ci
Wst p ................................................................................................................. 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
Kup książkę Poleć książkę
6 Spis tre ci
2.1.13. Anatomia metody find() ............................................................................ 48
2.1.14. Anatomia metody next() ............................................................................ 48
2.1.15. Anatomia metody siblings() ...................................................................... 48
2.1.16. Anatomia metody children() ...................................................................... 49
2.1.17. Anatomia metody stop() ............................................................................ 49
2.1.18. Anatomia selektora :animated ................................................................... 50
2.1.19. Anatomia filtra is() .................................................................................... 50
2.2. Tworzenie projektów animowanych menu ............................................................ 51
2.2.1. Tworzenie rozsuwanego menu poziomego .................................................. 51
2.2.2. Tworzenie rozsuwanego menu pionowego .................................................. 54
2.2.3. Tworzenie menu z u yciem wielu efektów specjalnych .............................. 58
2.2.4. Tworzenie menu wielopoziomowego .......................................................... 70
Rozdzia 3. Tworzenie zaawansowanych galerii 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 w a ciwo ci length .................................................................... 85
3.2. Tworzenie projektów animowanych galerii fotografii .......................................... 86
3.2.1. Tworzenie galerii fotografii z wy wietlanym dynamicznie systemem
nawigacji i mo liwo ci automatycznego odtwarzania pokazu zdj ......... 86
3.2.2. Tworzenie galerii fotografii z miniaturami .................................................. 94
Rozdzia 4. Animowanie stron internetowych w jQuery .................................... 101
4.1. Wprowadzenie ..................................................................................................... 101
4.1.1. Anatomia metody wrapAll() ...................................................................... 101
4.2. Tworzenie projektów animowanych stron internetowych ................................... 102
4.2.1. Tworzenie animowanego szablonu strony internetowej ............................ 102
Rozdzia 5. Tworzenie zaawansowanych formularzy w jQuery ........................... 115
5.1. Wprowadzenie ..................................................................................................... 115
5.1.1. Anatomia zdarzenia focus() ....................................................................... 115
5.1.2. Anatomia zdarzenia blur() ......................................................................... 116
5.1.3. Anatomia zdarzenia select() ...................................................................... 116
5.1.4. Anatomia zdarzenia change() .................................................................... 117
5.1.5. Anatomia zdarzenia submit() .................................................................... 117
5.1.6. Anatomia metody val() .............................................................................. 118
5.1.7. Anatomia metody each() ........................................................................... 118
5.2. Tworzenie projektów formularzy ........................................................................ 119
5.2.1. Tworzenie interaktywnego formularza ankietowego ................................. 119
Skorowidz .................................................................................... 131
Kup książkę Poleć książkę
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 sk adaj cy
si z rotatora, poziomego menu, lewej i prawej kolumny oraz ze stopki.
Animowan stron internetow wykonamy na podstawie nast puj cych 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() umo liwia otaczanie (obejmowanie) elementów HTML w struktu-
rze modelu drzewa DOM.
Kup książkę Poleć książkę
102 Cz II Tworzenie animowanych witryn internetowych
$ lub jQuery (selektor).wrapAll(wrappingElement);1.
$ lub jQuery  aliasy (odwo ania) biblioteki jQuery.
Selektor  umo liwia wybieranie elementów ze struktury dokumentu HTML.
Parametry metody wrapAll() zawiera tabela 4.1.
Tabela 4.1. Parametry metody wrapAll()
Parametr Opis dzia ania
wrappingElement Umo liwia ustawienie nazwy znacznika HTML, który b dzie otacza (obejmowa )
inne elementy HTML.
4.2. Tworzenie projektów
animowanych stron internetowych
4.2.1. Tworzenie animowanego szablonu
strony internetowej
Opis budowy i dzia ania animowanej strony internetowej
Oto elementy przyk adowego animowanego szablonu strony internetowej:
1. Rotator, który automatycznie zmienia slajdy ze zdj ciami i tekstem oraz
umo liwia u ycie linku odsy aj cego do innych zasobów sieciowych. Rotator
jako pierwszy pojawia si na stronie WWW w trakcie wczytywania witryny
do przegl darki internetowej.
2. Poziome menu zbudowane z o miu zak adek. W momencie umieszczania
kursora myszy w obszarze zak adki wy wietla si animowane zdj cie.
Po opuszczeniu przez kursor myszy obszaru zak adki zdj cie jest ukrywane.
Menu jako drugie pojawia si na stronie WWW w trakcie wczytywania
witryny do przegl darki internetowej.
3. Lewa kolumna z linkiem do ukrytej zawarto ci w postaci tekstu, wy wietlana
lub ukrywana na stronie internetowej po klikni ciu na link Poka /Ukryj. Lewa
kolumna jako trzecia pojawia si na stronie WWW w trakcie wczytywania
witryny do przegl darki internetowej.
4. Prawa kolumna z linkiem do ukrytej zawarto ci w postaci zdj cia, wy wietlana
lub ukrywana na stronie internetowej po klikni ciu na link Poka /Ukryj. Prawa
kolumna jako czwarta pojawia si na stronie WWW w trakcie wczytywania
witryny do przegl darki internetowej.
1
http://api.jquery.com/wrapAll/.
Kup książkę Poleć książkę
Rozdzia 4. Animowanie stron internetowych w jQuery 103
5. Stopka z linkiem do ukrytej zawarto ci w postaci tekstu i zdj cia, wy wietlana
lub ukrywana na stronie internetowej po klikni ciu na link Poka /Ukryj. Stopka
jako pi ta pojawia si na stronie WWW w trakcie wczytywania witryny
do przegl darki internetowej.
Podstawowe mo liwo ci modyfikacji animowanej strony internetowej:
1. Zwi kszenie lub zmniejszenie szeroko ci szablonu strony internetowej.
2. Zwi kszenie lub zmniejszenie liczby kolumn strony internetowej.
3. Zwi kszenie lub zmniejszenie liczby slajdów w rotatorze.
4. Zmiana wygl du przycisków tworz cych system nawigacji menu.
5. Zmiana szaty graficznej strony internetowej: zdj , kolorystyki, wielko ci
i rodzaju czcionki.
6. Zmiana zawarto ci 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 o mioma plikami graficznymi:
zakladka_1.jpg  zakladka_8.jpg o wymiarach 120×150 pikseli;
folder img_rotator z pi cioma 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ód owy pliku style_strona.css znajduje si na listingu 4.1.
Kod ród owy pliku style_rotator.css znajduje si na listingu 4.2.
Kup książkę Poleć książkę
104 Cz II Tworzenie animowanych witryn internetowych
Listing 4.1. Plik style_strona.css
Kod ród owy pliku style_strona.css Obja nienie
body{ Formatujemy element body, przypisuj c marginesowi
margin-top:5px;
górnemu warto równ 5 pikseli, natomiast pozosta ym
margin-bottom:0px;
marginesom zewn trznym, wewn trznym i obramowaniu
margin-right:0px;
warto równ 0 pikseli. Okre lamy w a ciwo ci t a: kolor.
margin-left:0px;
padding:0px;
border:0px;
background-color:#ffffff;}
img { Formatujemy element img, przypisuj c marginesom
margin:0px;
zewn trznym, wewn trznym i obramowaniu warto
padding:0px;
równ 0 pikseli.
border:0px;}
a#wiecej { Formatujemy element odsy acza a w stanie nienaruszonym.
color:#ff0000;
Okre lamy w a ciwo ci czcionki: kolor, oraz w a ciwo ci
text-decoration:none;}
tekstu: brak podkre lenia dla linku.
a:hover#wiecej { Formatujemy element odsy acza a:hover, nad którym w danej
color:#000000;
chwili znajduje si kursor myszy. Okre lamy w a ciwo ci
text-decoration:none;}
czcionki: kolor, oraz w a ciwo ci tekstu: brak podkre lenia
dla linku.
h4.naglowek { Formatujemy element h4, przypisuj c marginesom
padding:3px;
wewn trznym warto równ 3 pikseli, natomiast pozosta ym
margin:0px;
marginesom zewn trznym i obramowaniu warto równ
border:0px;
0 pikseli. Okre lamy w a ciwo ci czcionki oraz t a: kolor.
color:#ffffff;
background:#000000;}
#kontener_strona { Formatujemy wy rodkowany kontener, w ramach którego
width:1000px;
wy wietla si b dzie animowana strona internetowa.
margin-top:153px;
Okre lamy szeroko , marginesy zewn trzne i wewn trzne
margin-bottom:0px;
oraz obramowanie kontenera.
margin-right:auto;
margin-left:auto;
padding:0px;
border:0px;}
#kontener_lewa_kolumna { Formatujemy kontener, w ramach którego wy wietla
top:0px;
si b dzie animowana zawarto lewej kolumny strony
left:-2000px;
internetowej. Ustawiamy po o enie i szeroko
position:relative;
z wykorzystaniem pozycjonowania wzgl dnego. Okre lamy
width:300px;
marginesy zewn trzne, wewn trzne i obramowanie oraz
float:left;
w a ciwo ci czcionki i tekstu: rodzaj, wielko , kolor
margin:0px;
i wy rodkowanie w pionie i poziomie.
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;}
Kup książkę Poleć książkę
Rozdzia 4. Animowanie stron internetowych w jQuery 105
Listing 4.1. Plik style_strona.css  ci g dalszy
Kod ród owy pliku style_strona.css Obja nienie
#kontener_prawa_kolumna { Formatujemy kontener, w ramach którego wy wietla
top:0px;
si b dzie animowana zawarto prawej kolumny strony
left:-2000px;
internetowej. Ustawiamy po o enie i szeroko
position:relative;
z wykorzystaniem pozycjonowania wzgl dnego. Okre lamy
width:600px;
marginesy zewn trzne, wewn trzne i obramowanie oraz
float:right;
w a ciwo ci czcionki i tekstu: rodzaj, wielko , kolor
margin:0px;
i wy rodkowanie w pionie i poziomie.
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 { Formatujemy element span, w którym ukrywamy
display:none;}
przechowywan zawarto tekstu lewej kolumny
strony WWW.
span.ukryte_zdjecie { Formatujemy element span, w którym ukrywamy
display:none;}
przechowywan zawarto obrazka prawej kolumny
strony WWW.
span.ukryty_tekst_zdjecie { Formatujemy element span, w którym ukrywamy
display:none;}
przechowywan zawarto tekstu i obrazka stopki
strony WWW.
#stopka { Formatujemy wy rodkowany kontener, w ramach którego
clear:both;
wy wietla si b dzie animowana zawarto stopki strony
top:10px;
internetowej. Ustawiamy po o enie i szeroko
left:-2000px;
z wykorzystaniem pozycjonowania wzgl dnego. Okre lamy
position:relative;
marginesy zewn trzne, wewn trzne i obramowanie oraz
width:1000px;
w a ciwo ci czcionki i tekstu: rodzaj, wielko , kolor
margin-top:0px;
i wy rodkowanie w pionie i poziomie.
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;}
Kup książkę Poleć książkę
106 Cz II Tworzenie animowanych witryn internetowych
Listing 4.2. Plik style_rotator.css
Kod ród owy pliku style_rotator.css Obja nienie
#kontener_rotator { Formatujemy wy rodkowany kontener, w ramach
position:relative;
którego wy wietla si b dzie animowany rotator strony
top:0px;
internetowej. Ustawiamy jego po o enie i szeroko
left:-2000px;
z wykorzystaniem pozycjonowania wzgl dnego. Okre lamy
width:1000px;
marginesy zewn trzne i wewn trzne kontenera.
margin-top:0px;
margin-bottom:0px;
margin-right:auto;
margin-left:auto;
padding:0px;}
#rotator #rotator_kontener { Formatujemy kontener, w ramach którego wy wietla
width:1000px;
si b dzie animowany rotator strony internetowej. Okre lamy
height:300px;
szeroko i wysoko oraz marginesy zewn trzne
margin:0;
i wewn trzne kontenera. Ustawiamy jego po o enie
padding:0;
z wykorzystaniem pozycjonowania wzgl dnego oraz
position:relative;
kadrujemy i ukrywamy elementy rotatora niemieszcz ce
overflow:hidden;}
si w zadanym obszarze.
#rotator #rotator_kontener Formatujemy kontener, w ramach którego wy wietla
.aktualnosci {
si b dzie zawarto animowanego rotatora strony
width:1000px;
internetowej. Okre lamy jego szeroko i wysoko ,
height:300px;
marginesy zewn trzne i wewn trzne oraz ustawiamy jego
margin:0;
po o enie z wykorzystaniem pozycjonowania wzgl dnego.
padding:0;
position:relative;}
#rotator #rotator_kontener Formatujemy kontener, w ramach którego wy wietla
.aktualnosci .rotator_tekst {
si b dzie zawarto animowanego rotatora strony
width:100%;
internetowej. Okre lamy szeroko i wysoko oraz
height:130px;
marginesy zewn trzne i wewn trzne kontenera. Ustawiamy
margin:0;
jego po o enie z wykorzystaniem pozycjonowania
padding:0;
absolutnego. Formatujemy w a ciwo ci czcionki: rodzaj,
top:170px;
wielko i kolor. Wstawiamy jako t o plik graficzny tlo.png.
left:0px;
position:absolute;
font-family:Georgia;
font-size:10pt;
color:#ffffff;
background-
image:url(../img_rotator/tlo.png);
background-repeat:repeat;}
p.hiperlacze a { Formatujemy element odsy acza a w stanie nienaruszonym.
color:#ffffff;
Okre lamy w a ciwo ci czcionki i tekstu: kolor i brak
text-decoration:none;}
podkre lenia dla linku.
p.hiperlacze a:hover { Formatujemy element odsy acza a:hover, nad którym w danej
color:#ff0000;
chwili znajduje si kursor myszy. Okre lamy w a ciwo ci
text-decoration:none;}
czcionki i tekstu: kolor i brak podkre lenia dla linku.
h2, p { Formatujemy elementy h2 i p. Okre lamy ich marginesy
margin-top:10px;
zewn trzne i wewn trzne.
margin-right:0px;
margin-bottom:0px;
margin-left:10px;
padding:0;}
Kup książkę Poleć książkę
Rozdzia 4. Animowanie stron internetowych w jQuery 107
Kod ród owy pliku style_menu.css znajduje si na listingu 4.3.
Listing 4.3. Plik style_menu.css
Kod ród owy pliku style_menu.css Obja nienie
div#kontener_menu { Formatujemy wy rodkowany kontener, w ramach
position:relative;
którego wy wietla si b dzie animowane menu
top:0px;
strony internetowej. Ustawiamy jego po o enie
left:-2000px;
i szeroko z wykorzystaniem pozycjonowania
width:970px;
wzgl dnego. Okre lamy marginesy zewn trzne
margin-top:3px;
i wewn trzne kontenera.
margin-bottom:0px;
margin-right:auto;
margin-left:auto;
padding:0px;}
a.menu { Formatujemy element odsy acza a w stanie
font-family:Georgia;
nienaruszonym. Okre lamy w a ciwo ci czcionki
font-size:12pt;
i tekstu: rodzaj, wielko , kolor i brak podkre lenia
color:#ffffff;
oraz obramowania dla linku.
text-decoration:none;
outline:none;}
a:hover.menu { Formatujemy element odsy acza a:hover, nad
font-family:Georgia;
którym w danej chwili znajduje si kursor myszy.
font-size:12pt;
Okre lamy w a ciwo ci czcionki i tekstu: rodzaj,
color:#ff0000;
wielko , kolor i brak podkre lenia oraz
text-decoration:none;
obramowania dla linku.
outline:none;}
ul { Formatujemy list ul tak, aby by a wy wietlana
margin:0;
jako element blokowy. Okre lamy marginesy
padding:0;
zewn trzne i wewn trzne oraz obramowanie
border:0px;
elementu blokowego.
list-style-type:none;
display:block;}
li { Formatujemy pozycje li listy ul tak,
width:120px;
aby znajdowa y si po lewej stronie. Pozycje li
height:50px;
listy ul stanowi zak adki menu. Okre lamy ich
float:left;
szeroko i wysoko oraz w a ciwo ci tekstu
text-align:center;
i obramowania: wy rodkowanie, grubo , rodzaj
border-right:1px solid #ffffff;}
i kolor.
.menu_1 { Wstawiamy jako t o plik graficzny
background:url(../img_menu/zakladka_1.jpg)
zakladka_1.jpg dla pierwszej zak adki menu.
top left no-repeat;}
.menu_2 { Wstawiamy jako t o plik graficzny
background:url(../img_menu/zakladka_2.jpg)
zakladka_2.jpg dla drugiej zak adki menu.
top left no-repeat;}
.menu_3 { Wstawiamy jako t o plik graficzny
background:url(../img_menu/zakladka_3.jpg)
zakladka_3.jpg dla trzeciej zak adki menu.
top left no-repeat;}
.menu_4 { Wstawiamy jako t o plik graficzny
background:url(../img_menu/zakladka_4.jpg)
zakladka_4.jpg dla czwartej zak adki menu.
top left no-repeat;}
.menu_5 { Wstawiamy jako t o plik graficzny
background:url(../img_menu/zakladka_5.jpg)
zakladka_5.jpg dla pi tej zak adki menu.
top left no-repeat;}
Kup książkę Poleć książkę
108 Cz II Tworzenie animowanych witryn internetowych
Listing 4.3. Plik style_menu.css  ci g dalszy
Kod ród owy pliku style_menu.css Obja nienie
.menu_6 { Wstawiamy jako t o plik graficzny zakladka_6.jpg
background:url(../img_menu/zakladka_6.jpg)
dla szóstej zak adki menu.
top left no-repeat;}
.menu_7 { Wstawiamy jako t o plik graficzny zakladka_7.jpg
background:url(../img_menu/zakladka_7.jpg)
dla siódmej zak adki menu.
top left no-repeat;}
.menu_8 { Wstawiamy jako t o plik graficzny zakladka_8.jpg
background:url(../img_menu/zakladka_8.jpg)
dla ósmej zak adki menu.
top left no-repeat;}
Kod ród owy pliku szablon_strony.html znajduje si na listingu 4.4.
Listing 4.4. Plik szablon_strony.html
Kod ród owy pliku szablon_strony.html Obja nienie

plik przechowuj cy kaskadowe arkusze stylów
formatuj ce rotator strony WWW.

plik przechowuj cy kaskadowe arkusze stylów
formatuj ce menu strony WWW.

plik przechowuj cy kaskadowe arkusze stylów
formatuj ce stron WWW.

plik przechowuj cy bibliotek jQuery.


rotator na stronie internetowej.

.ukryty_tekst_zdjecie. Animowanie tekstu
i zdj cia umo liwia zastosowanie metody
toggle() z efektem explode.

Tworzymy elementy div, które przechowuj

animowany rotator strony internetowej.

Tworzymy zawarto pierwszego slajdu w postaci

zdj cia i umieszczonego na nim tekstu, który jest

wy wietlany w rotatorze na stronie internetowej.

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
Kup książkę Poleć książkę
110 Cz II Tworzenie animowanych witryn internetowych
Listing 4.4. Plik szablon_strony.html  ci g dalszy
Kod ród owy pliku szablon_strony.html Obja nienie
pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.

"http://jquery.com/">Lorem ipsum
»   

Tworzymy zawarto drugiego slajdu w postaci

zdj cia i umieszczonego na nim tekstu, który jest

wy wietlany w rotatorze na stronie internetowej.

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.

"http://jquery.com/">Lorem ipsum
»   

Tworzymy zawarto trzeciego slajdu w postaci

zdj cia i umieszczonego na nim tekstu, który jest

wy wietlany w rotatorze na stronie internetowej.

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.

"http://jquery.com/">Lorem ipsum
»   

Tworzymy zawarto czwartego slajdu w postaci

zdj cia i umieszczonego na nim tekstu, który jest

wy wietlany w rotatorze na stronie internetowej.

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
Kup książkę Poleć książkę
Rozdzia 4. Animowanie stron internetowych w jQuery 111
Listing 4.4. Plik szablon_strony.html  ci g dalszy
Kod ród owy pliku szablon_strony.html Obja nienie
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.

class="hiperlacze"> "http://jquery.com/">Lorem ipsum
»   

Tworzymy element div, który przechowuje
animowane menu strony internetowej.

Tworzymy osiem zak adek menu jako kolejne

pozycje li listy ul.

• 
  

  "menu">Lorem 1

  
  



• 
  

  "menu">Lorem 2

  
  



• 
  

  "menu">Lorem 3

  
  



• 
  

  "menu">Lorem 4

  
  



• 
  

  "menu">Lorem 5

  
  



• 
  

  "menu">Lorem 6

  
  



• 
  

  "menu">Lorem 7

  
  



• 
  Kup książkę Poleć książkę
  112 Cz II Tworzenie animowanych witryn internetowych
  Listing 4.4. Plik szablon_strony.html  ci g dalszy
  Kod ród owy pliku szablon_strony.html Obja nienie
  

  "menu">Lorem 8

  
  

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 Tworzymy ukryt zawarto lewej kolumny
sit amet

w postaci tekstu. Zawarto ta jest wy wietlana
Lorem ipsum dolor sit amet, consectetur
lub ukrywana na stronie internetowej po klikni ciu
adipisicing elit, sed do eiusmod tempor
na link Poka /Ukryj.
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
href="#" id="wiecej" class="pokaz_ukryj_
tekst">Poka /ukryj

class="ukryty_tekst">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 element div, który przechowuje
zawarto animowanej prawej kolumny strony
internetowej.

Lorem ipsum dolor sit Tworzymy ukryt zawarto prawej kolumny
amet

w postaci zdj cia. Zawarto ta jest wy wietlana
Lorem ipsum dolor sit amet, consectetur
lub ukrywana na stronie internetowej po klikni ciu
adipisicing elit, sed do eiusmod tempor
na link Poka /Ukryj.
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
href="#" id="wiecej" class="pokaz_ukryj_
zdjecie">Poka /ukryj

class="ukryte_zdjecie">Kup książkę Poleć książkę
Rozdzia 4. Animowanie stron internetowych w jQuery 113
Listing 4.4. Plik szablon_strony.html  ci g dalszy
Kod ród owy pliku szablon_strony.html Obja nienie
"img_strona/01.jpg" alt="" />

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

Lorem ipsum dolor sit amet
Tworzymy ukryt zawarto stopki w postaci
Poka /ukryj


lub ukrywana na stronie internetowej po klikni ciu

na link 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.
/> />

Kod ród owy pliku jquery_functions_rotator.js znajduje si na listingu 4.5.
Listing 4.5. Plik jquery_functions_rotator.js
Kod ród owy pliku
Obja nienie
jquery_functions_rotator.js
$(document).ready(function(){ Metoda programu obs ugi zdarze document.ready()
umo liwia umieszczenie ca ego kodu jQuery j zyka
JavaScript wewn trz zdarzenia w celu zapewnienia
wykonania kodu po za adowaniu ca kowitej
zawarto ci witryny.
var pozycja_poczatkowa_slajdu = 0; Definicja zainicjalizowanej zmiennej JavaScript,
której przypisujemy warto równ 0. W trakcie
wykonywania skryptu zmienna b dzie okre la
pozycj pocz tkow slajdu.
var szerokosc_slajdu = 1000; Definicja zainicjalizowanej zmiennej JavaScript,
której przypisujemy warto równ 1000. W trakcie
wykonywania skryptu zmienna b dzie okre la
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
przechowuj cego informacj o ca kowitej liczbie
slajdów.
var czas_trwania_animacji; Deklaracja niezainicjalizowanej zmiennej
JavaScript, której zostanie przypisana warto
zwracana przez funkcj JavaScript setInterval().
Kup książkę Poleć książkę
114 Cz II Tworzenie animowanych witryn internetowych
Listing 4.5. Plik jquery_functions_rotator.js  ci g dalszy
Kod ród owy pliku
Obja nienie
jquery_functions_rotator.js
var czas_pokazu_slajdu = 4000; Definicja zainicjalizowanej zmiennej JavaScript,
której przypisujemy warto czterosekundowego
czasu wy wietlania slajdu w trakcie animacji.
Czas wy wietlania slajdu definiujemy
w milisekundach (1000 ms = 1 sekunda).
czas_trwania_animacji = setInterval Przypisujemy zmiennej czas_trwania_animacji
(zmien_slajd, czas_pokazu_slajdu);
warto ci zwracane przez funkcj setInterval(),
która ustawia opó nienie dla cyklicznie
wywo ywanej animacji.
slajdy.wrapAll('

');
slajdy rotatora.
slajdy.css({'float' : 'left'}); Ustawiamy kierunek przesuwania slajdów w lew
stron .
$('#pokaz_slajdow').css('width', szerokosc_ Ustalamy szeroko wszystkich slajdów.
slajdu * liczba_slajdow);
function zmien_slajd() { Definicja funkcji zmien_slajd(), która umo liwia
if(pozycja_poczatkowa_slajdu == liczba_
ustalenie pozycji pocz tkowej slajdu oraz
slajdow - 1) {
wywo anie funkcji animowanie_slajdow().
pozycja_poczatkowa_slajdu = 0;} else
{pozycja_poczatkowa_slajdu++;}
animowanie_slajdow();}
function animowanie_slajdow() { Definicja funkcji animowanie_slajdow(), która
$('#pokaz_slajdow').animate({'marginLeft' :
umo liwia przesuwanie slajdów w lew stron .
szerokosc_slajdu*(-pozycja_poczatkowa_
slajdu)});}
});
Kod ród owy pliku jquery_functions_menu.js znajduje si na listingu 4.6.
Listing 4.6. Plik jquery_functions_menu.js
Kod ród owy pliku jquery_functions_menu.js Obja nienie
$(document).ready(function(){ Metoda programu obs ugi zdarze document.ready()
umo liwia umieszczenie ca ego kodu jQuery j zyka
JavaScript wewn trz zdarzenia w celu zapewnienia
wykonania kodu po za adowaniu ca kowitej
zawarto ci witryny.
$("li").mouseover(function(){ Do selektora li dowi zujemy zdarzenie
$(this).stop().animate({height:"150px"},
mouseover(), które umo liwia pokazywanie
{duration:1200, easing: "easeOutBounce"})});
i ukrywanie zdj umieszczonych w poszczególnych
zak adkach menu. Animowanie zdj umo liwia
zastosowanie metody animate() z efektem
easeOutBounce.
$("li").mouseout(function(){ Do selektora li dowi zujemy zdarzenie
$(this).stop().animate({height:"50px"},
mouseout(), które umo liwia pokazywanie
{duration:1500, easing:
i ukrywanie zdj umieszczonych
"easeOutElastic"})});
w poszczególnych zak adkach menu.
});
Animowanie zdj umo liwia zastosowanie
metody animate() z efektem easeOutElastic.
Kup książkę Poleć książkę
Skorowidz
A C
aktywne pole tekstowe, 119 CSS 2.0, 79
animacja, 11 CSS 3.0, 12
banera
Leaderboard, 23
D
Medium Rectangle, 32
Rectangle, 36
dodatek Easing 1.3, 12
Wide Skyscraper, 27
galerii fotografii, 86, 94
E
menu
wielopoziomowego, 70
EIAA, 12
rozsuwanego pionowego, 54
elementy
rozsuwanego poziomego, 51
formularza, 121
z efektami specjalnymi, 58
szablonu, 102
animowane
banery reklamowe, 9
galerie, 79 F
menu, 41
filtr is(), 50
witryny internetowe, 39, 101
folder
baner_leaderboard_728_x_90, 23
B
baner_medium_rectangle_300_x_250, 33
baner_rectangle_180_x_150, 36
baner, 11
baner_wide_ skyscraper_160_x_600, 27
Leaderboard, 11, 22
formularz, 121
Medium Rectangle, 11, 31
galeria_z_miniaturami, 95
Rectangle, 11, 35
galeria_z_nawigacja, 86
Wide Skyscraper, 11, 26
menu, 87
biblioteka
menu_wielopoziomowe, 71
jQuery, 7, 12
menu_z_efektami_specjalnymi, 59
jQuery 1.7.16, 12
rozsuwane_menu_pionowe, 55
jQuery TOOLS, 12
rozsuwane_menu_poziome, 51
jQuery UI 1.10.0, 12
szablon_strony, 103
formularz, 115, 119
budowa i dzia anie, 121
Kup książkę Poleć książkę
132 Skorowidz
next(), 48
G
on(), 80
galeria fotografii, 79 position(), 85
queue(), 21
remove(), 84
I
removeClass(), 81
show(), 46
IAB, 12
siblings(), 48
slideDown(), 45
J
slideToggle(), 46
slideUp(), 45
j zyk
stop(), 49
JavaScript, 12
toggleClass(), 82
XHTML 1.0, 12
val(), 118
jQuery, 7, 12
wrapAll(), 101
jQuery 1.7.16, 12
mo liwo ci modyfikacji strony, 103
jQuery TOOLS, 12
jQuery UI 1.10.0, 12
P
K
parametry
filtra is(), 50
kaskadowe arkusze stylów, 12, 79
metody
addClass(), 81
M animate(), 13
append(), 83
menu, 41
attr(), 83
rozsuwane pionowe, 41, 54
bind(), 81
rozsuwane poziome, 41, 51
children(), 49
wielopoziomowe, 41, 70
clearQueue(), 22
z efektami specjalnymi, 41, 58
css(), 22
metoda
delay(), 16
addClass(), 81
dequeue(), 21
animate(), 13
each(), 119
append(), 83
effect(), 17
attr(), 83
eq(), 85
bind(), 80
fadeIn(), 20
children(), 49
fadeOut(), 20
clearQueue(), 21
fadeTo(), 47
css(), 22
find(), 48
delay(), 14
hasClass(), 82
dequeue(), 21
hide(), 47
each(), 118
html(), 84
effect(), 16
index(), 85
empty(), 84
load(), 80
eq(), 84
next(), 48
fadeIn(), 20
on(), 80
fadeOut(), 20
queue(), 21
fadeTo(), 47
remove(), 84
find(), 48
removeClass(), 82
hasClass(), 82
show(), 46
hide(), 47
siblings(), 49
html(), 83
slideDown(), 45
index(), 85
slideToggle(), 46
load(), 80
slideUp(), 45
Kup książkę Poleć książkę
jQuery. Tworzenie animowanych witryn internetowych 133
stop(), 50
selektor animated, 50
toggleClass(), 82
standardy reklam, 12
wrapAll(), 102
szablon animowanej strony, 101
zdarzenia
blur(), 116
T
change(), 117
click(), 44
tworzenie
focus(), 116
animowanego szablonu strony, 102
hover(), 44
banerów, 11
mouseenter(), 43
formularzy, 115, 119
mouseleave(), 43
galerii, 79
mouseout(), 42
z miniaturami, 94
mouseover(), 42
z systemem nawigacji, 86
select(), 117
menu, 41
submit(), 118
typy
plik
animacji, 14, 17
baner_leaderboard.html, 25
banerów, 11
baner_medium_rectangle.html, 34
baner_rectangle.html, 37
W
baner_wide_skyscraper.html, 29, 30
formularz.html, 123, 125
warto ci metody val(), 118
galeria_z_miniaturami.html, 97, 98
w a ciwo length, 85
galeria_z_nawigacja.html, 90
jquery_functions.js, 25, 30, 34, 38, 54, 58, 68,
70, 77, 91 94, 99, 127 129
X
jquery_functions_menu.js, 114
XHTML, 12
jquery_functions_rotator.js, 113
menu_wielopoziomowe.html, 73, 75, 77
menu_z_efektami_specjalnymi.html, 66 68
Z
rozsuwane_menu_pionowe.html, 56
zdarzenie
rozsuwane_menu_poziome.html, 53
blur(), 116
style.css, 24, 28, 33, 36, 52, 55, 60 73, 88 90,
change(), 117
96, 122
click(), 44
style_menu.css, 107, 108
focus(), 115
style_rotator.css, 106
hover(), 44
style_strona.css, 104, 105
load(), 79
szablon_strony.html, 108 113
mouseenter(), 43
pola tekstowe formularza, 119
mouseleave(), 43
projekty animowanych
mouseout(), 42
banerów, 22
mouseover(), 42
galerii, 86
select(), 116
menu, 51
submit(), 117
stron, 102
projekty formularzy, 119
S
schemat obiektu banera
Leaderboard, 22
Medium Rectangle, 31
Rectangle, 35
Wide Skyscraper, 26
Kup książkę Poleć książkę
134 Skorowidz
Kup książkę Poleć książkę