Darmowy fragment publikacji:
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ądź 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. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
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 znaleźć pod adresem:
ftp://ftp.helion.pl/przyklady/jqtwan.zip
ISBN: 978-83-246-5541-0
Copyright © Helion 2013
Printed in Poland.
• Kup książkę
• Poleć książkę
• Oceń książkę
• Księgarnia internetowa
• Lubię to! » Nasza społeczność
Spis treĈci
Wstöp ................................................................................................................. 7
Tworzenie animowanych banerów reklamowych ............... 9
CzöĈè I
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
Poleć książkęKup 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
Poleć książkęKup 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.
Poleć książkęKup książkę 102
CzöĈè II i 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
wrappingElement
Opis dziaäania
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/.
Poleć książkęKup książkę Rozdziaä 4. i 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.
Poleć książkęKup książkę 104
CzöĈè II i Tworzenie animowanych witryn internetowych
Listing 4.1. Plik style_strona.css
Kod Ēródäowy pliku style_strona.css ObjaĈnienie
Formatujemy element body, przypisując marginesowi
górnemu wartoĞü równą 5 pikseli, natomiast pozostaáym
marginesom zewnĊtrznym, wewnĊtrznym i obramowaniu
wartoĞü równą 0 pikseli. OkreĞlamy wáaĞciwoĞci táa: kolor.
Formatujemy element img, przypisując marginesom
zewnĊtrznym, wewnĊtrznym i obramowaniu wartoĞü
równą 0 pikseli.
Formatujemy element odsyáacza a w stanie nienaruszonym.
OkreĞlamy wáaĞciwoĞci czcionki: kolor, oraz wáaĞciwoĞci
tekstu: brak podkreĞlenia dla linku.
Formatujemy element odsyáacza a:hover, nad którym w danej
chwili znajduje siĊ kursor myszy. OkreĞlamy wáaĞciwoĞci
czcionki: kolor, oraz wáaĞciwoĞci tekstu: brak podkreĞlenia
dla linku.
Formatujemy element h4, przypisując marginesom
wewnĊtrznym wartoĞü równą 3 pikseli, natomiast pozostaáym
marginesom zewnĊtrznym i obramowaniu wartoĞü równą
0 pikseli. OkreĞlamy wáaĞciwoĞci czcionki oraz táa: kolor.
Formatujemy wyĞrodkowany kontener, w ramach którego
wyĞwietlaü siĊ bĊdzie animowana strona internetowa.
OkreĞlamy szerokoĞü, marginesy zewnĊtrzne i wewnĊtrzne
oraz obramowanie kontenera.
Formatujemy kontener, w ramach którego wyĞwietlaü
siĊ bĊdzie animowana zawartoĞü lewej kolumny strony
internetowej. Ustawiamy poáoĪenie i szerokoĞü
z wykorzystaniem pozycjonowania wzglĊdnego. OkreĞlamy
marginesy zewnĊtrzne, wewnĊtrzne i obramowanie oraz
wáaĞciwoĞci czcionki i tekstu: rodzaj, wielkoĞü, kolor
i wyĞrodkowanie w pionie i poziomie.
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;}
a:hover#wiecej {
color:#000000;
text-decoration:none;}
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;}
Poleć książkęKup książkę Rozdziaä 4. i 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
Formatujemy kontener, w ramach którego wyĞwietlaü
siĊ bĊdzie animowana zawartoĞü prawej kolumny strony
internetowej. Ustawiamy poáoĪenie i szerokoĞü
z wykorzystaniem pozycjonowania wzglĊdnego. OkreĞlamy
marginesy zewnĊtrzne, wewnĊtrzne i obramowanie oraz
wáaĞciwoĞci czcionki i tekstu: rodzaj, wielkoĞü, kolor
i wyĞrodkowanie w pionie i poziomie.
Formatujemy element span, w którym ukrywamy
przechowywaną zawartoĞü tekstu lewej kolumny
strony WWW.
Formatujemy element span, w którym ukrywamy
przechowywaną zawartoĞü obrazka prawej kolumny
strony WWW.
Formatujemy element span, w którym ukrywamy
przechowywaną zawartoĞü tekstu i obrazka stopki
strony WWW.
Formatujemy wyĞrodkowany kontener, w ramach którego
wyĞwietlaü siĊ bĊdzie animowana zawartoĞü stopki strony
internetowej. Ustawiamy poáoĪenie i szerokoĞü
z wykorzystaniem pozycjonowania wzglĊdnego. OkreĞlamy
marginesy zewnĊtrzne, wewnĊtrzne i obramowanie oraz
wáaĞciwoĞci czcionki i tekstu: rodzaj, wielkoĞü, kolor
i wyĞrodkowanie w pionie i poziomie.
#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;}
span.ukryte_zdjecie {
display:none;}
span.ukryty_tekst_zdjecie {
display:none;}
#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;}
Poleć książkęKup książkę 106
CzöĈè II i Tworzenie animowanych witryn internetowych
Listing 4.2. Plik style_rotator.css
Kod Ēródäowy pliku style_rotator.css ObjaĈnienie
#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;}
#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;
background-
image:url(../img_rotator/tlo.png);
background-repeat:repeat;}
p.hiperlacze a {
color:#ffffff;
text-decoration:none;}
p.hiperlacze a:hover {
color:#ff0000;
text-decoration:none;}
h2, p {
margin-top:10px;
margin-right:0px;
margin-bottom:0px;
margin-left:10px;
padding:0;}
Formatujemy wyĞrodkowany kontener, w ramach
którego wyĞwietlaü siĊ bĊdzie animowany rotator strony
internetowej. Ustawiamy jego poáoĪenie i szerokoĞü
z wykorzystaniem pozycjonowania wzglĊdnego. OkreĞlamy
marginesy zewnĊtrzne i wewnĊtrzne kontenera.
Formatujemy kontener, w ramach którego wyĞwietlaü
siĊ bĊdzie animowany rotator strony internetowej. OkreĞlamy
szerokoĞü i wysokoĞü oraz marginesy zewnĊtrzne
i wewnĊtrzne kontenera. Ustawiamy jego poáoĪenie
z wykorzystaniem pozycjonowania wzglĊdnego oraz
kadrujemy i ukrywamy elementy rotatora niemieszczące
siĊ w zadanym obszarze.
Formatujemy kontener, w ramach którego wyĞwietlaü
siĊ bĊdzie zawartoĞü animowanego rotatora strony
internetowej. OkreĞlamy jego szerokoĞü i wysokoĞü,
marginesy zewnĊtrzne i wewnĊtrzne oraz ustawiamy jego
poáoĪenie z wykorzystaniem pozycjonowania wzglĊdnego.
Formatujemy kontener, w ramach którego wyĞwietlaü
siĊ bĊdzie zawartoĞü animowanego rotatora strony
internetowej. OkreĞlamy szerokoĞü i wysokoĞü oraz
marginesy zewnĊtrzne i wewnĊtrzne kontenera. Ustawiamy
jego poáoĪenie z wykorzystaniem pozycjonowania
absolutnego. Formatujemy wáaĞciwoĞci czcionki: rodzaj,
wielkoĞü i kolor. Wstawiamy jako táo plik graficzny tlo.png.
Formatujemy element odsyáacza a w stanie nienaruszonym.
OkreĞlamy wáaĞciwoĞci czcionki i tekstu: kolor i brak
podkreĞlenia dla linku.
Formatujemy element odsyáacza a:hover, nad którym w danej
chwili znajduje siĊ kursor myszy. OkreĞlamy wáaĞciwoĞci
czcionki i tekstu: kolor i brak podkreĞlenia dla linku.
Formatujemy elementy h2 i p. OkreĞlamy ich marginesy
zewnĊtrzne i wewnĊtrzne.
Poleć książkęKup książkę Rozdziaä 4. i 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
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;}
.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;}
ObjaĈnienie
Formatujemy wyĞrodkowany kontener, w ramach
którego wyĞwietlaü siĊ bĊdzie animowane menu
strony internetowej. Ustawiamy jego poáoĪenie
i szerokoĞü z wykorzystaniem pozycjonowania
wzglĊdnego. OkreĞlamy marginesy zewnĊtrzne
i wewnĊtrzne kontenera.
Formatujemy element odsyáacza a w stanie
nienaruszonym. OkreĞlamy wáaĞciwoĞci czcionki
i tekstu: rodzaj, wielkoĞü, kolor i brak podkreĞlenia
oraz obramowania dla linku.
Formatujemy element odsyáacza a:hover, nad
którym w danej chwili znajduje siĊ kursor myszy.
OkreĞlamy wáaĞciwoĞci czcionki i tekstu: rodzaj,
wielkoĞü, kolor i brak podkreĞlenia oraz
obramowania dla linku.
Formatujemy listĊ ul tak, aby byáa wyĞwietlana
jako element blokowy. OkreĞlamy marginesy
zewnĊtrzne i wewnĊtrzne oraz obramowanie
elementu blokowego.
Formatujemy pozycje li listy ul tak,
aby znajdowaáy siĊ po lewej stronie. Pozycje li
listy ul stanowią zakáadki menu. OkreĞlamy ich
szerokoĞü i wysokoĞü oraz wáaĞciwoĞci tekstu
i obramowania: wyĞrodkowanie, gruboĞü, rodzaj
i kolor.
Wstawiamy jako táo plik graficzny
zakladka_1.jpg dla pierwszej zakáadki menu.
Wstawiamy jako táo plik graficzny
zakladka_2.jpg dla drugiej zakáadki menu.
Wstawiamy jako táo plik graficzny
zakladka_3.jpg dla trzeciej zakáadki menu.
Wstawiamy jako táo plik graficzny
zakladka_4.jpg dla czwartej zakáadki menu.
Wstawiamy jako táo plik graficzny
zakladka_5.jpg dla piątej zakáadki menu.
Poleć książkęKup książkę 108
CzöĈè II i Tworzenie animowanych witryn internetowych
Listing 4.3. Plik style_menu.css — ciąg dalszy
Kod Ēródäowy pliku style_menu.css
.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;}
ObjaĈnienie
Wstawiamy jako táo plik graficzny zakladka_6.jpg
dla szóstej zakáadki menu.
Wstawiamy jako táo plik graficzny zakladka_7.jpg
dla siódmej zakáadki menu.
Wstawiamy jako táo plik graficzny zakladka_8.jpg
dla ósmej zakáadki menu.
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
link rel= stylesheet href= css_rotator/
´style_rotator.css type= text/css /
link rel= stylesheet href= css_menu/style_
´menu.css type= text/css /
link rel= stylesheet href= css_strona/
´style_strona.css type= text/css /
script type= text/javascript src= jquery_
´1.7.1/jquery-1.7.1.min.js /script
script type= text/javascript src= jquery_
´easing_plugin_1.3/jquery.easing.1.3.js /
´script
script type= text/javascript src= jquery-
´ui-1.10.0.custom/jquery-ui-1.10.0.custom.
´min.js /script
script type= text/javascript src= jquery_
´functions_rotator/jquery_functions_rotator.
´js /script
script type= text/javascript src= jquery_
´functions_menu/jquery_functions_menu.js /
´script
script type= text/javascript
$(document).ready(function(){
ObjaĈnienie
Doáączamy do strony internetowej zewnĊtrzny
plik przechowujący kaskadowe arkusze stylów
formatujące rotator strony WWW.
Doáączamy do strony internetowej zewnĊtrzny
plik przechowujący kaskadowe arkusze stylów
formatujące menu strony WWW.
Doáączamy do strony internetowej zewnĊtrzny
plik przechowujący kaskadowe arkusze stylów
formatujące stronĊ WWW.
Doáączamy do strony internetowej zewnĊtrzny
plik przechowujący bibliotekĊ jQuery.
Doáączamy do strony internetowej zewnĊtrzny
plik przechowujący dodatek Easing biblioteki
jQuery.
Doáączamy do strony internetowej zewnĊtrzny
plik przechowujący bibliotekĊ jQuery UI.
Doáączamy do strony internetowej zewnĊtrzny
plik przechowujący skrypt jQuery animujący
rotator na stronie internetowej.
Doáączamy do strony internetowej zewnĊtrzny
plik przechowujący skrypt jQuery animujący
menu na stronie internetowej.
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.
Sekcja ta umoĪliwia wyĞwietlanie poszczególnych
czĊĞci strony WWW, tzn.: rotatora, menu, lewej
i prawej kolumny oraz stopki w odpowiedniej
kolejnoĞci. Ponadto umoĪliwia obsáugĊ zdarzeĔ
Poleć książkęKup książkę Rozdziaä 4. i Animowanie stron internetowych w jQuery
109
ObjaĈnienie
myszy odpowiedzialnych za pokazywanie
i ukrywanie animowanych elementów
strony WWW.
Dowiązujemy metody delay() i animate()
do selektora #kontener_rotator w celu animacji
rotatora strony internetowej, a nastĊpnie
wywoáujemy funkcjĊ animacja_strony_www().
Definicja funkcji animacja_strony_www(),
która umoĪliwia animowanie: menu, lewej
i prawej kolumny oraz stopki strony internetowej.
Do selektora .pokaz_ukryj_tekst dowiązujemy
zdarzenie click(), które umoĪliwia pokazywanie
i ukrywanie tekstu umieszczonego w selektorze
.ukryty_tekst. Animowanie tekstu umoĪliwia
zastosowanie metody toggle() z efektem puff.
Do selektora .pokaz_ukryj_zdjecie dowiązujemy
zdarzenie click(), które umoĪliwia pokazywanie
i ukrywanie zdjĊcia umieszczonego w selektorze
.ukryte_zdjecie. Animowanie zdjĊcia umoĪliwia
zastosowanie metody fadeToggle().
Do selektora .pokaz_ukryj_tekst_zdjecie
dowiązujemy zdarzenie click(), które umoĪliwia
pokazywanie i ukrywanie tekstu i zdjĊcia
umieszczonego w selektorze
.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.
Listing 4.4. Plik szablon_strony.html — ciąg dalszy
Kod Ēródäowy pliku szablon_strony.html
$( #kontener_rotator ).delay(1000).animate(
´{top: 0px , left: 0px }, 2000,
´ easeOutElastic , function()
´{animacja_strony_www();});
function animacja_strony_www(){
$( #kontener_menu ).animate({top: 0px ,
´left: 0px }, 2000, easeOutBounce );
$( #kontener_lewa_kolumna ).delay(2000).
´animate({top: 0px , left: 0px }, 2000,
´ easeOutBack );
$( #kontener_prawa_kolumna ).delay(4000).
´animate({top: 0px , left: 0px }, 2000,
´ easeOutBack );
$( #stopka ).delay(6000).animate({top: 10px ,
´left: 0px }, 2000, easeInOutExpo );}
$( .pokaz_ukryj_tekst ).click(function(){$(
´ .ukryty_tekst ).toggle( puff , 1000);});
$( .pokaz_ukryj_zdjecie ).click(function(){$(
´ .ukryte_zdjecie ).fadeToggle( slow );});
$( .pokaz_ukryj_tekst_zdjecie ).click(
´function(){$( .ukryty_tekst_zdjecie ).
´toggle( explode , { pieces: 16 }, 2000);});
});
/script
div id= kontener_rotator
div id= rotator
div id= rotator_kontener
div class= aktualnosci
img src= img_rotator/01.jpg /
div class= rotator_tekst
h2 Lorem ipsum dolor sit amet 1 /h2
p 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
Poleć książkęKup książkę 110
CzöĈè II i 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. /p
p class= hiperlacze a href=
´ http://jquery.com/ Lorem ipsum
´ raquo; nbsp; nbsp; nbsp; /a /p
/div /div
div class= aktualnosci
img src= img_rotator/02.jpg /
div class= rotator_tekst
h2 Lorem ipsum dolor sit amet 2 /h2
p 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. /p
p class= hiperlacze a href=
´ http://jquery.com/ Lorem ipsum
´ raquo; nbsp; nbsp; nbsp; /a /p
/div /div
div class= aktualnosci
img src= img_rotator/03.jpg /
div class= rotator_tekst
h2 Lorem ipsum dolor sit amet 3 /h2
p 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. /p
p class= hiperlacze a href=
´ http://jquery.com/ Lorem ipsum
´ raquo; nbsp; nbsp; nbsp; /a /p
/div /div
div class= aktualnosci
img src= img_rotator/04.jpg /
div class= rotator_tekst
h2 Lorem ipsum dolor sit amet 4 /h2
p 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
Tworzymy zawartoĞü drugiego slajdu w postaci
zdjĊcia i umieszczonego na nim tekstu, który jest
wyĞwietlany w rotatorze na stronie internetowej.
Tworzymy zawartoĞü trzeciego slajdu w postaci
zdjĊcia i umieszczonego na nim tekstu, który jest
wyĞwietlany w rotatorze na stronie internetowej.
Tworzymy zawartoĞü czwartego slajdu w postaci
zdjĊcia i umieszczonego na nim tekstu, który jest
wyĞwietlany w rotatorze na stronie internetowej.
Poleć książkęKup książkę Rozdziaä 4. i Animowanie stron internetowych w jQuery
111
ObjaĈnienie
Tworzymy element div, który przechowuje
animowane menu strony internetowej.
Tworzymy osiem zakáadek menu jako kolejne
pozycje li listy ul.
Listing 4.4. Plik szablon_strony.html — ciąg dalszy
Kod Ēródäowy 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. /p p
´class= hiperlacze a href=
´ http://jquery.com/ Lorem ipsum
´ raquo; nbsp; nbsp; nbsp; /a /p
/div /div
/div
div id= kontener_menu
ul
!--Pierwsza zakáadka menu--
li class= menu_1
p a href= http://jquery.com/ class=
´ menu Lorem 1 /a /p
/li
!--Druga zakáadka menu--
li class= menu_2
p a href= http://jquery.com/ class=
´ menu Lorem 2 /a /p
/li
!--Trzecia zakáadka menu--
li class= menu_3
p a href= http://jquery.com/ class=
´ menu Lorem 3 /a /p
/li
!--Czwarta zakáadka menu--
li class= menu_4
p a href= http://jquery.com/ class=
´ menu Lorem 4 /a /p
/li
!--Piąta zakáadka menu--
li class= menu_5
p a href= http://jquery.com/ class=
´ menu Lorem 5 /a /p
/li
!--Szósta zakáadka menu--
li class= menu_6
p a href= http://jquery.com/ class=
´ menu Lorem 6 /a /p
/li
!--Siódma zakáadka menu--
li class= menu_7
p a href= http://jquery.com/ class=
´ menu Lorem 7 /a /p
/li
!--Ósma zakáadka menu--
li class= menu_8
Poleć książkęKup książkę 112
CzöĈè II i Tworzenie animowanych witryn internetowych
Listing 4.4. Plik szablon_strony.html — ciąg dalszy
Kod Ēródäowy pliku szablon_strony.html
ObjaĈnienie
p a href= http://jquery.com/ class=
´ menu Lorem 8 /a /p
/li
/ul
/div
div id= kontener_strona
div id= kontener_lewa_kolumna
p h4 class= naglowek Lorem ipsum dolor
´sit amet /h4 br /
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. br / a
´href= # id= wiecej class= pokaz_ukryj_
´tekst Pokaľ/ukryj /a br / br / span
´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. br /
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.
/span /p
/div
div id= kontener_prawa_kolumna
p h4 class= naglowek Lorem ipsum dolor sit
´amet /h4 br /
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. br / a
´href= # id= wiecej class= pokaz_ukryj_
´zdjecie Pokaľ/ukryj /a br / br / span
´class= ukryte_zdjecie img src=
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.
Tworzymy ukrytą zawartoĞü lewej kolumny
w postaci tekstu. ZawartoĞü ta jest wyĞwietlana
lub ukrywana na stronie internetowej po klikniĊciu
na link PokaĪ/Ukryj.
Tworzymy element div, który przechowuje
zawartoĞü animowanej prawej kolumny strony
internetowej.
Tworzymy ukrytą zawartoĞü prawej kolumny
w postaci zdjĊcia. ZawartoĞü ta jest wyĞwietlana
lub ukrywana na stronie internetowej po klikniĊciu
na link PokaĪ/Ukryj.
Poleć książkęKup książkę Rozdziaä 4. i 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= / /span /p
/div
/div
div id= stopka
p Lorem ipsum dolor sit amet br /
a href= # id= wiecej class= pokaz_ukryj_
´tekst_zdjecie Pokaľ/ukryj /a br / br /
span class= ukryty_tekst_zdjecie
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. br / br
´/ img src= img_strona/01.jpg alt=
´/ /span /p
/div
Tworzymy element div, który przechowuje
zawartoĞü animowanej stopki strony internetowej.
Tworzymy ukrytą zawartoĞü stopki w postaci
tekstu i zdjĊcia. ZawartoĞü ta jest wyĞwietlana
lub ukrywana na stronie internetowej po klikniĊciu
na link PokaĪ/Ukryj.
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
jquery_functions_rotator.js
$(document).ready(function(){
var pozycja_poczatkowa_slajdu = 0;
var szerokosc_slajdu = 1000;
var slajdy = $( .aktualnosci );
var liczba_slajdow = slajdy.length;
var czas_trwania_animacji;
ObjaĈnienie
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.
Definicja zainicjalizowanej zmiennej JavaScript,
której przypisujemy wartoĞü równą 0. W trakcie
wykonywania skryptu zmienna bĊdzie okreĞlaü
pozycjĊ początkową slajdu.
Definicja zainicjalizowanej zmiennej JavaScript,
której przypisujemy wartoĞü równą 1000. W trakcie
wykonywania skryptu zmienna bĊdzie okreĞlaü
szerokoĞü slajdu.
Definicja zainicjalizowanej zmiennej JavaScript,
której przypisujemy wartoĞü selektora .aktualnosci.
Definicja zainicjalizowanej zmiennej JavaScript,
której przypisujemy wartoĞü selektora lenght
przechowującego informacjĊ o caákowitej liczbie
slajdów.
Deklaracja niezainicjalizowanej zmiennej
JavaScript, której zostanie przypisana wartoĞü
zwracana przez funkcjĊ JavaScript setInterval().
Poleć książkęKup książkę 114
CzöĈè II i Tworzenie animowanych witryn internetowych
Listing 4.5. Plik jquery_functions_rotator.js — ciąg dalszy
Kod Ēródäowy pliku
jquery_functions_rotator.js
var czas_pokazu_slajdu = 4000;
czas_trwania_animacji = setInterval
´(zmien_slajd, czas_pokazu_slajdu);
slajdy.wrapAll( div id= pokaz_slajdow
´ /div );
slajdy.css({ float : left });
$( #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)});}
});
ObjaĈnienie
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).
Przypisujemy zmiennej czas_trwania_animacji
wartoĞci zwracane przez funkcjĊ setInterval(),
która ustawia opóĨnienie dla cyklicznie
wywoáywanej animacji.
Dodajemy element div, który bĊdzie przechowywaá
slajdy rotatora.
Ustawiamy kierunek przesuwania slajdów w lewą
stronĊ.
Ustalamy szerokoĞü wszystkich slajdów.
Definicja funkcji zmien_slajd(), która umoĪliwia
ustalenie pozycji początkowej slajdu oraz
wywoáanie funkcji animowanie_slajdow().
Definicja funkcji animowanie_slajdow(), która
umoĪliwia przesuwanie slajdów w lewą stronĊ.
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(){
$( li ).mouseover(function(){
$(this).stop().animate({height: 150px },
´{duration:1200, easing: easeOutBounce })});
$( li ).mouseout(function(){
$(this).stop().animate({height: 50px },
´{duration:1500, easing:
´ easeOutElastic })});
});
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.
Do selektora li dowiązujemy zdarzenie
mouseover(), które umoĪliwia pokazywanie
i ukrywanie zdjĊü umieszczonych w poszczególnych
zakáadkach menu. Animowanie zdjĊü umoĪliwia
zastosowanie metody animate() z efektem
easeOutBounce.
Do selektora li dowiązujemy zdarzenie
mouseout(), które umoĪliwia pokazywanie
i ukrywanie zdjĊü umieszczonych
w poszczególnych zakáadkach menu.
Animowanie zdjĊü umoĪliwia zastosowanie
metody animate() z efektem easeOutElastic.
Poleć książkęKup książkę 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
CSS 2.0, 79
CSS 3.0, 12
dodatek Easing 1.3, 12
EIAA, 12
elementy
formularza, 121
szablonu, 102
C
D
E
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 dziaáanie, 121
Poleć książkęKup książkę 132
Skorowidz
galeria fotografii, 79
IAB, 12
jĊzyk
JavaScript, 12
XHTML 1.0, 12
jQuery, 7, 12
jQuery 1.7.16, 12
jQuery TOOLS, 12
jQuery UI 1.10.0, 12
G
I
J
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
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
moĪliwoĞci modyfikacji strony, 103
P
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
Poleć książkęKup książkę jQuery. Tworzenie animowanych witryn internetowych
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
wartoĞci metody val(), 118
wáaĞciwoĞü length, 85
X
Z
XHTML, 12
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
zdarzenia
stop(), 50
toggleClass(), 82
wrapAll(), 102
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
Poleć książkęKup książkę 134
Skorowidz
Poleć książkęKup książkę
Pobierz darmowy fragment (pdf)
