Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00194 007170 15351674 na godz. na dobę w sumie
jQuery. Tworzenie animowanych witryn internetowych - książka
jQuery. Tworzenie animowanych witryn internetowych - książka
Autor: Liczba stron: 136
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-5541-0 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> jquery - programowanie
Porównaj ceny (książka, ebook, audiobook).

Animuj i przyciągaj - z jQuery na pewno się uda!

Biblioteka jQuery już sześć lat temu szturmem zdobyła rynek frameworków ułatwiających życie projektantom witryn internetowych. Jest lekka, wygodna w użyciu i znacząco skraca czas pracy programistów operujących w JavaScripcie - przy wydatnym poprawieniu efektów ich działań. W dodatku jest darmowa, a jej możliwości dorównują możliwościom płatnego Flasha. Trzeba tylko nauczyć się z niej w pełni korzystać, na przykład by osiągnąć biegłość w animowaniu stron WWW. Do tej pory na polskim rynku wydawniczym nie było pozycji w całości poświęconej zagadnieniom animacji witryn internetowych z użyciem jQuery. Na szczęście dziś jest już dostępna ta książka. Dowiesz się z niej, jak działają poszczególne metody i zdarzenia jQuery. Nauczysz się tworzyć od podstaw animowane banery, rozsuwane, wielopoziomowe menu oraz wyrafinowane galerie fotografii. Przekonasz się też, że zbudowanie kompletnej animowanej witryny (i szablonu takiej witryny) nie przekracza Twoich możliwości, a interaktywne, funkcjonalne formularze to dla Ciebie pestka. No jak? Przecież kusi Cię ta perspektywa!

Z jQuery zdziałasz więcej!

Znajdź podobne książki Ostatnio czytane w tej kategorii

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)

Gdzie kupić całą publikację:

jQuery. Tworzenie animowanych witryn internetowych
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: