jQuery_Tworzenie_animowanych_witryn_internetowych_jqtwan.pdf

(372 KB) Pobierz
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
Czö è I
Tworzenie animowanych banerów reklamowych ............... 9
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
Rozdziaä 1. Tworzenie zaawansowanych banerów w jQuery ................................ 11
Czö è II
Tworzenie animowanych witryn internetowych
................... 39
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
Rozdziaä 2. Tworzenie zaawansowanych menu w jQuery .................................... 41
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ę
Zgłoś jeśli naruszono regulamin