Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00065 004757 14870032 na godz. na dobę w sumie
jQuery. Rusz głową! - książka
jQuery. Rusz głową! - książka
Autor: , Liczba stron: 520
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-3864-2 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> jquery - programowanie
Porównaj ceny (książka, ebook (-20%), audiobook).

Najlepszy podręcznik do jQuery!

Jeżeli Twoja witryna internetowa ma się wyróżniać na tle konkurencji, musi być interaktywna, przyjemna dla oka i wygodna w użyciu. Jeżeli nie spełnia tych warunków, będzie jej niezwykle trudno zdobyć popularność. Ale zawsze możesz wykorzystać JavaScript! Zastosowanie tego języka programowania pozwala na istotne wzbogacenie strony. Z kolei użycie biblioteki jQuery sprawia, że wykorzystanie potencjału JavaScriptu jeszcze nigdy nie było tak proste. Jeżeli dodać do tego liczne gotowe do użycia efekty specjalne, otrzymamy niemalże perfekcyjne rozwiązanie.

Kolejna książka z serii 'Rusz głową!' to najlepszy sposób na opanowanie możliwości biblioteki jQuery. Atrakcyjna forma graficzna oraz nowoczesna metodologia nauczania sprawiają, że przyswajanie wiedzy jest przyjemne i efektywne. Autorzy nie wymagają również od Ciebie znajomości języka JavaScript - dzięki temu możesz z marszu zacząć poznawać jQuery. Nie ma na co czekać! Sprawdź, jak używać selektorów, reagować na zdarzenie, modyfikować drzewo DOM oraz używać efektów specjalnych. 'jQuery. Rusz głową!' to Twoja przepustka do tworzenia angażujących, interaktywnych witryn WWW, która wyglądają i działają tak jak prawdziwe aplikacje!

Poznaj jQuery i ulepsz swoją stronę internetową!

Władaj stronami z jQuery!

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

Darmowy fragment publikacji:

• Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność spis treści Zaczynamy z jQuery 1 Akcja na stronach internetowych Chcesz więcej dla swoich stron. Masz w zanadrzu HTML oraz CSS i chciałbyś wzbogacić swoje umiejętności o pisanie skryptów, ale nie masz zamiaru spędzić całego życia, pisząc je wiersz po wierszu. Potrzebujesz biblioteki skryptów, która pozwoli Ci zmieniać strony internetowe w locie. A skoro wyrażamy już nasze życzenia, to może dodać jeszcze współpracę z Ajaksem i PHP? Czy da się zrobić w trzech wierszach to, do czego większość języków po stronie klienta potrzebuje piętnastu? Pobożne życzenia? W żadnym wypadku! Musisz zapoznać się z jQuery. jQuery( ) $( ) $( ) Chcesz władać stronami HTML i CSS są w porządku, ale... …potrzebujesz mocy skryptu Nadchodzi jQuery (i JavaScript)! Spojrzenie do wnętrza przeglądarki Ukryta struktura strony Dzięki jQuery drzewo DOM nie jest takie straszne Jak to działa? jQuery wybiera elementy tak samo jak CSS Stylu, przedstawiam ci skrypt Selektory jQuery do usług jQuery przetłumaczony Twoja pierwsza fucha w jQuery Skonfiguruj swoje pliki HTML i CSS Wysuń się... Niechaj bladość będzie z Tobą Uratowałeś kampanię Kudłaci Przyjaciele Twój niezbędnik jQuery 38 39 40 41 43 44 45 47 49 50 51 52 56 60 62 63 66 69 Słyszałem kliknięcie przycisku. Przesuń element do góry. 10 Interpreter JavaScriptu Selektory i metody 2 Chwytaj i w drogę spis treści jQuery pomaga chwytać elementy strony internetowej i robić z nimi różne rzeczy. W tym rozdziale zagłębimy się w selektory i metody jQuery. Dzięki selektorom możemy chwytać elementy na stronie, a metody pozwalają na robienie z nimi rozmaitych sztuczek. Podobnie jak wielka księga zaklęć magicznych, biblioteka jQuery pozwala nam zmieniać masę rzeczy w locie. Możemy sprawiać, że obrazy rozpływają się w powietrzu i pojawiają znikąd. Możemy wybrać określony fragment tekstu i w animowany sposób zmienić rozmiar jego czcionki. Rozpocznijmy więc pokaz — złapmy kilka elementów strony i do roboty! „Skacz z radości” potrzebuje Twojej pomocy Jakie są wymogi projektu? Zagłębiamy się w sekcje Zdarzenie click w zbliżeniu Dodaj do strony metodę click Bądź bardziej konkretny Przydzielanie elementów do klas ID-entyfikowanie elementów Pospinaj swoją stronę Tymczasem na naszej liście Tworzenie miejsca w pamięci Łącz za pomocą konkatenacji Tymczasem w naszym kodzie... Wstaw komunikat za pomocą metody append Wszystko działa świetnie, ale... Daj mi $(this) Zaprzęgnij $(this) do pracy Pozbywaj się na dobre za pomocą remove Schodzimy w dół z selektorem potomka Twoja kolej na skakanie z radości Twój niezbędnik jQuery 72 73 75 78 81 83 84 85 88 91 92 93 94 95 97 99 100 102 103 109 110 11 spis treści Zdarzenia i funkcje jQuery 3 Niech się coś dzieje na Twojej stronie jQuery ułatwia dodawanie akcji oraz interaktywności do każdej strony internetowej. W tym rozdziale przyjrzymy się temu, jak sprawić, żeby strona reagowała, kiedy użytkownicy wchodzą z nią w interakcję. Sprawienie, że kod będzie reagował na działania użytkownika, wyniesie Twoją witrynę na zupełnie nowy poziom. Zajmiemy się też tworzeniem funkcji wielokrotnego użycia, dzięki czemu kod napiszesz raz, ale już korzystać z niego będziesz wielokrotnie. Słuchacz zdarzeń słyszy zdarzenie i przekazuje je do... ...interpretera JavaScriptu, który sprawdza, co trzeba zrobić po każdym zdarzeniu... Twoja znajomość jQuery znowu jest potrzebna Facet od pieniędzy ma rację... Dodawanie zdarzeń na stronę Za kulisami słuchacza zdarzeń Wiązanie zdarzenia Wyzwalanie zdarzenia Usuwanie zdarzenia Weźmy się za bary elementy Struktura Twojego projektu Dodajemy funkcje Śrubki i trybiki funkcji Funkcja anonimowa Funkcje nazwane jako funkcje obsługi zdarzeń Przekazywanie zmiennej do funkcji Funkcja może też zwracać wartość Korzystaj z logiki warunkowej w celu podejmowania decyzji „Skacz z radości” potrzebuje jeszcze większej pomocy Metody mogą zmieniać CSS Dodaj zdarzenie hover To już prawie wszystko... Twój niezbędnik jQuery 112 113 115 116 117 118 122 126 132 136 137 138 139 142 143 145 149 151 153 155 158 12 spis treści Manipulowanie stroną internetową za pomocą jQuery 4 Zmodyfikuj drzewo DOM To, że strona skończyła się pobierać, nie znaczy od razu, że musi ona zachowywać tę samą strukturę. W rozdziale 1. zobaczyliśmy, jak podczas wczytywania strony, w celu ustalenia jej struktury, jest konstruowane drzewo DOM. W bieżącym rozdziale dowiemy się, jak poruszać się w górę i w dół struktury drzewa DOM i jak pracować z hierarchią elementów oraz relacjami rodzic – dziecko, aby za pomocą jQuery zmieniać w locie strukturę strony. Twój element Restauracja w Webowicach chce interaktywnego menu Dla wegetarian Poklasyfikuj swoje elementy Pora na przyciski Co teraz? Biegamy po gałęziach drzewa DOM Wspinaczkowe metody przechodzenia drzewa Metody łańcuchowe — aby sięgać jeszcze dalej Zmienne mogą przechowywać też elementy I znowu ten dolar... Poszerz swoje możliwości przechowywania o tablice Przechowuj elementy w tablicy Wymieniaj elementy za pomocą replaceWith Jak może nam pomóc replaceWith? Zastanów się, zanim użyjesz replaceWith replaceWith nie sprawdza się w każdej sytuacji Wstawienie zawartości HTML do drzewa DOM Użyj metod filtrujących w celu zawężenia wyboru (część 1.) Użyj metod filtrujących w celu zawężenia wyboru (część 2.) Przywróć hamburgera A co z mięsem? Treściwa tablica Metoda each przegląda tablice To już wszystko... prawda? Twój niezbędnik jQuery 160 161 166 169 171 176 177 178 185 186 187 188 190 191 193 194 195 197 198 201 202 203 204 207 210 13 Efekty i animacja w jQuery 5 Nieco wdzięku na Twojej stronie Sprawianie, że na Twojej stronie będą się dziać różne rzeczy, to niezły pomysł, ale tylko do czasu. Jeśli nie będzie ona wyglądać atrakcyjnie, ludzie nie zechcą z niej korzystać. Dlatego właśnie przydadzą Ci się efekty i animacja w jQuery. W bieżącym rozdziale nauczysz się, co zrobić, aby wraz z upływem czasu elementy zmieniały swoje miejsce na stronie, jak pokazać lub ukryć określony element albo jak go powiększyć lub zmniejszyć, a wszystko to na oczach użytkownika. Dowiesz się też, jak zakładać harmonogramy animacji, aby uruchamiały się one w różnych odstępach czasu, co nada Twojej stronie bardzo dynamiczny wygląd. Gryzmołki potrzebują aplikacji sieciowej Zrób sobie potwora Zrób sobie potwora — potrzebujemy układu i położenia na stronie Trochę więcej struktury i stylu Uaktywniamy interfejs Robimy efekt błyskawicy W jaki sposób jQuery animuje elementy? Efekty wygaszania zmieniają właściwość CSS opacity Wysuwanie sprowadza się do zmiany wysokości Zatrudnij efekty wygaszania Łącz efekty za pomocą łańcuchów metod Kontratakujemy za pomocą funkcji czasowych Dodaj do swojego skryptu funkcje błyskawic Efekty własnej roboty wykorzystujące metodę animate Co można, a czego nie można animować? Metoda animate zmienia w czasie styl Dokładnie skąd dokąd? Ruch bezwzględny obiektów a ich ruch względny Przesuwaj elementy względnie dzięki łączeniu operatorów Dodaj funkcje animujące do swojego skryptu Patrz, mamo! Bez Flasha! Twój niezbędnik jQuery 212 213 214 217 218 223 224 225 226 228 229 230 233 235 236 238 241 242 243 245 248 250 spis treści 14 jQuery i JavaScript 6 Luke jQuery, jestem twoim ojcem! Sama biblioteka jQuery nie da sobie ze wszystkim rady. Chociaż jest ona biblioteką JavaScriptu, nie potrafi niestety robić wszystkiego, co jej język ojczysty. W tym rozdziale przyjrzymy się niektórym aspektom JavaScriptu, których będziesz potrzebował do tworzenia naprawdę atrakcyjnych stron, oraz temu, jak można z nich korzystać w jQuery w celu tworzenia niestandardowych list i obiektów, a także jak przechodzić przez nie w pętlach, aby ułatwić sobie życie. Atrakcyjniejszy barek Rusz Głową Obiekty oferują inteligentne przechowywanie Buduj własne obiekty Twórz obiekty wielokrotnego użycia za pomocą konstruktorów Interakcja z obiektami Konfiguracja strony Powrót tablic Dostęp do tablic Dodawaj i aktualizuj elementy tablicy Zrób to jeszcze raz (i jeszcze raz, i jeszcze raz, i...) Szukanie igły w stogu siana Czas na podjęcie decyzji... znowu! Operatory porównania i operatory logiczne Czyszczenie w jQuery... Dodajemy więcej emocji Twój niezbędnik jQuery i JavaScriptu ... 1 ... 2 ... 3 ... 4 ... 2 ... 3 ... 4 spis treści 252 254 255 256 257 258 261 262 263 265 268 275 276 282 286 288 15 spis treści Niestandardowe funkcje dla niestandardowych efektów 7 Co ostatnio dla mnie zrobiłeś? Kiedy połączysz niestandardowe efekty jQuery z funkcjami JavaScriptu, możesz sprawić, że Twój kod — a tym samym Twoja aplikacja internetowa — będzie wydajniejszy, skuteczniejszy i lepszy. W tym rozdziale zagłębisz się jeszcze bardziej w ulepszanie efektów jQuery poprzez obsługę zdarzeń przeglądarki, pracę z funkcjami czasu oraz poprawę organizacji i możliwości wielokrotnego użycia Twoich niestandardowych funkcji w JavaScripcie. 290 Nadciąga burza 291 Utworzyliśmy funkcję potwora Sprawuj kontrolę nad efektami czasowymi za pomocą obiektu window 292 Odpowiadaj na zdarzenia przeglądarki za pomocą metod onblur i onfocus 295 299 Metody czasowe mówią funkcjom, kiedy działać 302 Napisz funkcje stopLightning i goLightning Prośba o nową funkcjonalność w Zrób sobie potwora 310 311 Zacznijmy losować 312 Znasz już bieżącą pozycję... 312 ...oraz funkcję getRandom Przesuwaj względnie do bieżącej pozycji 316 325 Zrób sobie potwora v2 to prawdziwy przebój! Twój niezbędnik jQuery 326 W rzeczy samej, zęby to najlepsze, co mam, ale na miłość boską — mógłbym chcieć skorzystać też z reszty mojej twarzy! 16 spis treści jQuery i Ajax 8 Proszę podać dane Używanie jQuery w celu robienia sprytnych sztuczek z CSS i drzewem DOM to fajna sprawa, ale już wkrótce będziesz musiał odczytywać informacje (albo dane) z serwera i je wyświetlać. Może nawet przyjdzie Ci zaktualizować fragmenty strony informacjami z serwera bez potrzeby jej odświeżania. Poznaj Ajax. W połączeniu z jQuery i JavaScriptem może on właśnie coś takiego robić. W tym rozdziale dowiemy się, jak jQuery radzi sobie z namawianiem Ajaksa do wysyłania zapytań do serwera i co potem robi z otrzymanymi informacjami. Wprowadź bieg Od bitu do bajtu w XXI wiek Spojrzenie na stronę z zeszłego roku Dynamizujemy Stary Webie, poznaj nowego Weba Zrozumieć Ajax Czym jest Ajax? X Pobieranie danych przy użyciu metody ajax Przetwarzanie danych XML Harmonogramy zdarzeń na stronie Funkcje samowywołujące się Dostać więcej od swojego serwera Która godzina? Wyłączanie zaplanowanych zdarzeń na stronie Twój niezbędnik jQuery i Ajaksa Coroczny bieg Od bitu do bajtu na 10 kilometrów W tym roku bieg odbywa się na wyspie Maui — zarezerwuj sobie miejsce z wyprzedzeniem! $(“li”).find(“ul”) li 328 329 332 333 334 334 335 340 342 346 347 350 351 356 360 17 Obsługa danych JSON 9 Kliencie, oto serwer Chociaż czytanie danych z pliku XML jest bardzo przydatne, to jednak nie zawsze wystarcza. Bardziej interaktywny format wymiany danych (JavaScript Object Notation, znany też jako JSON) ułatwia pobieranie danych z serwera. JSON jest też łatwiejszy do wygenerowania i czytania niż format XML. Używając jQuery, PHP oraz SQL-a, nauczysz się, jak utworzyć bazę danych przechowującą informacje, które będziesz mógł później odczytać za pomocą formatu JSON i wyświetlić na ekranie przy użyciu jQuery. Tak objawia się prawdziwa moc aplikacji internetowych! Dział Marketingu webowickiej Megakorporacji nie zna XML-a Błędy w XML-u psują stronę Pobierz dane ze strony Co zrobić z danymi Sformatuj dane, zanim je wyślesz Prześlij dane do serwera Przechowuj dane w bazie MySQL Utwórz bazę danych w celu przechowywania informacji o biegaczach Anatomia instrukcji insert Używaj PHP w celu odczytywania danych Przetwórz dane POST na serwerze Połącz się z bazą danych za pomocą PHP Użyj polecenia select, aby pobrać dane z bazy Pobierz dane za pomocą PHP Z pomocą nadchodzi JSON! jQuery + JSON = coś niesamowitego Kilka reguł PHP... Kilka (kolejnych) reguł PHP... Formatowanie informacji wyjściowych w PHP Dostęp do danych w obiekcie JSON Sanityzacja i walidacja danych w PHP Twój niezbędnik jQuery, Ajaksa, PHP i MySQL 362 363 364 367 368 369 371 372 374 377 378 379 381 383 386 387 388 389 390 397 400 405 spis treści 18 Interfejs użytkownika w jQuery spis treści 10 Sieć WWW żyje i umiera dzięki swoim użytkownikom i ich Diametralna zmiana wyglądu danym. Zbieranie danych od użytkowników to poważne zajęcie, które może być czasochłonnym wyzwaniem dla programisty. Widziałeś już, jak Ajax, PHP i MySQL mogą pomóc w czynieniu efektywniejszym działania aplikacji internetowych. Teraz przyjrzymy się, jak jQuery może nam pomóc w utworzeniu interfejsów użytkownika dla formularzy zbierających dane. Po drodze otrzymasz sporą dawkę jQuery UI — oficjalnej biblioteki interfejsu użytkownika języka jQuery. Kryptozoolodzy.org potrzebują zmiany wyglądu Odpicuj swój formularz HTML Oszczędź sobie bólu głowy (i zyskaj trochę czasu) za pomocą jQuery UI Co znajduje się w środku pakietu jQuery UI Utwórz kalendarz dla formularza z obserwacjami jQuery za kulisami Opcje widgetów są konfigurowalne Nadaj styl przyciskom Kontroluj pola liczbowe za pomocą suwaków Komputery mieszają kolory, używając barwy czerwonej, zielonej i niebieskiej Napisz funkcję refreshSwatch I jeszcze pewien drobiazg... Twój niezbędnik jQuery 408 409 412 416 417 418 419 422 426 435 438 442 446 Kiedy wreszcie dadzą mi spokój ci paparazzi? ? 19 11 Niezależnie od tego, jak bardzo utalentowanym programistą jesteś, Obiekty, wszędzie obiekty jQuery i API sam nie dasz sobie rady ze wszystkim... Zobaczyliśmy, jak można dołączać wtyczki jQuery, takie jak jQuery UI, albo nawigację z wykorzystaniem kart, aby bez większego wysiłku wzbogacać programy pisane w jQuery. W celu wyniesienia naszych aplikacji na jeszcze wyższy poziom, dodania do nich paru z naprawdę niezłych narzędzi dostępnych w Internecie oraz skorzystania z informacji udostępnionych przez prawdziwych potentatów — takich jak Google, Twitter albo Yahoo! — będziemy jednak potrzebować czegoś... więcej. Firmy te, i wiele innych, dostarczają API (application programming interfaces, czyli interfejsy programowania aplikacji) dedykowane dla swoich usług, z których możesz korzystać w swojej witrynie. W tym rozdziale przyjrzymy się podstawom API i zastosujemy niezwykle popularny interfejs, jakim jest Google Maps API. Cześć! Jestem markerem. Chętnie zamarkuję... to jest zawrę z Tobą znajomość. Na pewno już gdzieś mnie widziałeś! Gdzie jest generał paskuda? API Google Maps API używają obiektów Dołącz mapy Google do swojej strony Odczytywanie danych w formacie JSON za pomocą SQL-a i PHP Punkty na mapie to markery Lista kontrolna funkcji wyświetlającej wiele obserwacji Nasłuchiwanie zdarzeń na mapie Udało się! Twój niezbędnik jQuery API 448 450 451 453 456 460 464 474 478 481 spis treści 20 spis treści Ostatki A Dziesięć najważniejszych rzeczy (o których nie napisaliśmy) Nawet po tym wszystkim ciągle jest jeszcze wiele rzeczy, do których nie dotarliśmy. Istnieje mnóstwo dobrodziejstw jQuery i JavaScriptu, których nie udało nam się wcisnąć do tej książki. Byłoby nieuczciwością nie wspomnieć o nich, a tak będziesz lepiej przygotowany na każdy inny aspekt jQuery, który możesz napotkać podczas swoich podróży. 1. Wszystkie drobiazgi z biblioteki jQuery 2. jQuery w sieciach CDN 3. Przestrzeń nazw jQuery: metoda noConflict 4. Debugowanie kodu jQuery 5. Zaawansowane techniki animacji: kolejki 6. Walidacja formularzy 7. Biblioteka jQuery UI Effects 8. Tworzenie własnych wtyczek do jQuery 9. JavaScript dla zaawansowanych: domknięcia 10. Szablony 484 487 488 489 490 491 492 493 494 495 21 spis treści Konfiguracja środowiska programistycznego B Przygotuj się do przyszłych sukcesów Potrzebujesz miejsca na ćwiczenie nowo nabytych umiejętności PHP bez narażania swoich danych na niebezpieczeństwa czyhające w sieci. Posiadanie bezpiecznego miejsca na opracowywanie aplikacji PHP przed wypuszczeniem jej w szeroki świat sieci internetowej zawsze jest dobrym pomysłem. Dodatek ten zawiera instrukcje dotyczące instalacji serwera WWW, MySQL i PHP, dzięki czemu będziesz mieć do dyspozycji bezpieczne miejsce do pracy i ćwiczeń. Utwórz środowisko programistyczne PHP Dowiedz się, co już masz Czy masz serwer WWW? Czy masz PHP? Którą wersję? Czy masz MySQL? Którą wersję? Zacznij od serwera WWW Zakończenie instalacji serwera Apache Instalacja PHP Etapy instalacji PHP Etapy instalacji PHP: zakończenie Instalacja MySQL Etapy instalacji MySQL w systemie Windows Uaktywnienie PHP w systemie Mac OS X Etapy instalacji MySQL w systemie Mac OS X 498 498 499 499 500 501 502 502 503 504 504 505 510 510 Skorowidz 518 S 22 5. Efekty i animacja w jQuery Nieco wdzięku na Twojej stronie Zobaczcie, jak pięknie się poruszam. Mam w sobie tyle gracji. Założę się, że tak nie potraficie! Sprawianie, że na Twojej stronie będą się dziać różne rzeczy, to niezły pomysł, ale tylko do czasu. Jeśli nie będzie ona wyglądać atrakcyjnie, ludzie nie zechcą z niej korzystać. Dlatego właśnie przydadzą Ci się efekty i animacja w jQuery. W bieżącym rozdziale nauczysz się, co zrobić, aby wraz z upływem czasu elementy zmieniały swoje miejsce na stronie, jak pokazać lub ukryć określony element albo jak go powiększyć lub zmniejszyć, a wszystko to na oczach użytkownika. Dowiesz się też, jak zakładać harmonogramy animacji, aby uruchamiały się one w różnych odstępach czasu, co nada Twojej stronie bardzo dynamiczny wygląd. to jest nowy rozdział  211 rezygnacja z flasha Gryzmołki potrzebują aplikacji sieciowej Gryzmołki zaopatrują webowickie dzieci w atrakcyjne materiały artystyczne do zabawy. Kilka lat temu firma uruchomiła popularną witrynę internetową, w której udostępniła interaktywne aplikacje dla dzieci. Społeczność jej fanów rośnie w takim tempie, że Gryzmołki zaczęły mieć problemy z radzeniem sobie na bieżąco z napływającymi prośbami. Aby zaspokoić potrzeby nowej, większej klienteli Gryzmołków, dyrektor ds. projektów internetowych chciałaby utworzyć aplikację, która nie korzystałaby z Flasha ani z żadnych innych wtyczek przeglądarkowych. Nasze projekty dla dzieciaków to przede wszystkim dobra zabawa i zaangażowanie. Czy możesz wykonać dla nas aplikację dla grupy wiekowej od 6 do 10 lat? Potrzebujemy mnóstwa efektów wizualnych i trochę interaktywności. Tylko bez Flasha proszę! 212 Rozdział 5. Zrób sobie potwora Oto plan aplikacji przekazany przez dyrektor ds. projektów internetowych wraz z plikami graficznymi od projektanta przeznaczonymi do użycia w programie: efekty i animacja w jquery Projekt Zrób sobie potwora Zadaniem aplikacji Zrób sobie potwora jest zabawianie dzieci w docelowej grupie wiekowej przez umożliwienie im zrobienia sobie potwora dzięki mieszaniu 10 różnych głów, oczu, nosów i ust. Przejścia między poszczególnymi częściami twarzy potwora powinny być animowane. Interfejs użytkownika Animacja Symulacja obrazująca, jak powinna się zmieniać część twarzy potwora. Pojemnik Ramka Obszar głowy Kliknij, aby przewinąć głowę potwora. Obszar oczu Kliknij, aby przewinąć oczy potwora. Obszar nosa Kliknij, aby przewinąć nos potwora. Obszar ust Kliknij, aby przewinąć usta potwora. img - lightning1 img - lightning2 img - lightning3 Po dziewięciu kliknięciach każdy pasek powinien „przewinąć się” na początek. Symulacja obrazująca, jak powinna wyglądać animacja błyskawicy. Obrazy błyskawicy powinny pojawiać się i znikać szybko, tak jakby rzeczywiście się błyskało. lightning_01.jpg Pliki graficzne frame.png szerokość: 545 pikseli wysokość: 629 pikseli headsstrip.png szerokość: 3670 pikseli, wysokość: 172 piksele eyessstrip.png szerokość: 3670 pikseli, wysokość: 79 pikseli lightning_02.jpg nosessstrip.png szerokość: 3670 pikseli, wysokość: 86 pikseli mouthsstrip.png szerokość: 3670 pikseli, wysokość: 117 pikseli lightning_03.jpg Masz mnóstwo szczegółów dotyczących wymagań projektu oraz potrzebne pliki graficzne, ale grafik nie napisał żadnego HTML-a ani CSS, a od tego właśnie musisz zacząć. Co powinieneś zrobić, aby utworzyć i skonfigurować te pliki? jesteś tutaj  213 budowanie solidnych fundamentów Zrób sobie potwora — potrzebujemy układu i położenia na stronie Bez wątpienia sporo mówiliśmy do tej pory na temat konieczności zdefiniowania już na samym początku struktury i stylu — jeszcze zanim napiszesz cokolwiek w jQuery. Teraz jest to jeszcze ważniejsze: jeżeli z góry nie określisz układu i położenia elementów na stronie, Twoje efekty oraz animacje mogą okazać się nieudane, i to szybko. Nie ma nic gorszego, niż gapić się w swój kod jQuery i zastanawiać się, dlaczego nie robi on w przeglądarce tego, co chciałeś. Dobrym rozwiązaniem jest naszkicowanie swoich pomysłów i przemyślenie tego, co się będzie dziać na ekranie. Każdy pasek z rysunkiem potwora ma 3670 pikseli szerokości, ale jednorazowo możemy pokazać tylko 367 pikseli. Jaki atrybut CSS pozwoli nam to zrobić? Ta sekcja powinna mieć 545 pikseli szerokości, aby pomieścić ramkę... ...a ta sekcja 367 pikseli, żeby zmieścić twarz potwora. Twarz potwora będzie się składać z kolejnych czterech sekcji przechowujących poszczególne paski z rysunkami. div#pic_box div#frame 214 Rozdział 5. 367 pikseli szerokości div#head 172 piksele szerokości div#eyes div#nose 79 pikseli szerokości 86 pikseli szerokości div#mouth 117 pikseli szerokości Paski z rysunkami należy rozmieścić, używając elementów img zagnieżdżonych w sekcjach odpowiednich dla danej części twarzy potwora. Na przykład znacznik img dla rysunku headsstrip.jpg znajdzie się wewnątrz sekcji div#head. W każde z pustych miejsc w plikach HTML i CSS wpisz identyfikator CSS, właściwość albo ustawienie, które pomogą Ci skonfigurować układ i położenie elementów aplikacji Zrób sobie potwora. W przypadku wątpliwości poszukaj wskazówek na dwóch poprzednich stronach. Kilka z pustych miejsc wypełniliśmy za Ciebie. Ćwiczenie efekty i animacja w jquery body header id= top img src= images/Monster_Mashup.png / p Zrób sobie twarz potwora, klikając obrazek. /p /header “pic_box div id= frame div id= div id= class= face img src= images/headsstrip.jpg /div div id= class= face img src= images/eyesstrip.jpg /div div id= class= face img src= images/nosesstrip.jpg /div div id= class= face img src= images/mouthsstrip.jpg /div /div /div script type= text/javascript src= scripts/jquery-1.7.min.js /script script type= text/javascript src= scripts/my_scripts.js /script /body index.html #frame { position: left:100px; top:100px; width:545px; height:629px; background-image:url(images/frame.png); z-index: 2; overflow: } #pic_box{ position: left:91px; top:84px; relative; height:460px; z-index: 1; overflow: } .face{ position: left:0px; top:0px; z-index: 0; } #head{ height:172px; } #eyes{ } #nose{ } #mouth{ } my_style.css jesteś tutaj  215 rozwiązanie ćwiczenia W każde z pustych miejsc w plikach HTML i CSS wpisz identyfikator CSS, właściwość albo ustawienie, które pomogą Ci skonfigurować układ i położenie elementów aplikacji Zrób sobie potwora. W przypadku wątpliwości poszukaj wskazówek na dwóch poprzednich stronach. Kilka z pustych miejsc wypełniliśmy za Ciebie. Rozwiązanie ćwiczenia body header id= top img src= images/Monster_Mashup.png / p Zrób sobie twarz potwora, klikając obrazek. /p /header div id= frame “pic-box div id= “head div id= class= face img src= images/headsstrip.jpg /div “eyes div id= class= face img src= images/eyesstrip.jpg /div “nose div id= class= face img src= images/nosesstrip.jpg /div “mouth div id= class= face img src= images/mouthsstrip.jpg /div /div /div script type= text/javascript src= scripts/jquery-1.7.min.js /script script type= text/javascript src= scripts/my_scripts.js /script /body absolute; Kiedy animujemy pozycję elementów, powinniśmy używać położenia absolutnego albo względnego. #frame { position: left:100px; top:100px; width:545px; height:629px; background-image:url(images/frame.png); z-index: 2; overflow: } hidden; index.html relative; .face{ position: left:0px; top:0px; z-index: 0; } #head{ height:172px; #pic_box{ position: left:91px; top:84px; relative; width:367px; height:460px; z-index: 1; overflow: } hidden; 216 Rozdział 5. Nadanie właściwości overflow } wartości „hidden” umożliwi nam ukrycie części paska z rysunkiem, która wykracza poza obszar sekcji pic_box. } #eyes{ height:79px; W tym celu można skorzystać też z właściwości CSS „clip”. #nose{ height:86px; } #mouth{ height:117px; } my_style.css efekty i animacja w jquery Trochę więcej struktury i stylu W następnej kolejności czekają nas zmiany strukturalne w plikach HTML i CSS. Do plików index.html oraz my_style.css dodaj poniższy kod. Pliki graficzne możesz pobrać z ftp://ftp.helion.pl/przyklady/jquerg.zip. Zrób to! Dodaj kontener i zagnieźdź w nim rysunki z błyskawicą. div id= container img class= lightning id= lightning1 src= images/lightning-01.jpg / img class= lightning id= lightning2 src= images/lightning-02.jpg / img class= lightning id= lightning3 src= images/lightning-03.jpg / div id= frame div id= pic_box div id= head class= face img src= images/headsstrip.jpg /div div id= eyes class= face img src= images/eyesstrip.jpg /div div id= nose class= face img src= images/nosesstrip.jpg /div div id= mouth class= face img src= images/mouthsstrip.jpg /div /div /div /div #container{ position:absolute; left:0px; top:0px; z-index: 0; } .lightning{ display:none; position:absolute; left:0px; top:0px; z-index: 0; } Chcemy, żeby rysunki z błyskawicą były początkowo niewidoczne. Kiedy chcemy animować elementy, powinniśmy nadać ich właściwości position wartość absolute, fixed albo relative. index.html body{ background-color:#000000; } p{ color:#33FF66; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; } #text_top { position:relative; z-index: 4; } my_style.css jesteś tutaj  217 teraz jesteś już ekspertem od klikania Uaktywniamy interfejs Teraz, kiedy opracowaliśmy już wizualnie układ strony Zrób sobie potwora, skonfigurujmy resztę sekcji interfejsu użytkownika zgodnie z otrzymanym planem. Część ta sprowadza się do klikania w celu wywoływania zdarzeń. Zajmujesz się tym już od czterech rozdziałów, więc konfiguracja powinna Ci pójść jak z płatka. Interfejs użytkownika Pojemnik Ramka Obszar głowy Kliknij, aby przewinąć głowę potwora. Obszar oczu Kliknij, aby przewinąć oczy potwora. Obszar nosa Kliknij, aby przewinąć nos potwora. Obszar ust Kliknij, aby przewinąć usta potwora. img - lightning1 img - lightning2 img - lightning3 Po dziewięciu kliknięciach każdy pasek powinien „przewinąć się” na początek Trzeba kliknąć każdy z obszarów, aby przewinąć rysunek. Należy zliczać każde kliknięcie, aby pasek z rysunkiem można było przewinąć na początek. Nie istnieją głupie pytania P: Nie za bardzo już pamiętam, o co chodzi z tym pozycjonowaniem w CSS. Dlaczego jest nam to potrzebne do efektów i animacji w jQuery? O: position to właściwość CSS, która kontroluje, jak i gdzie umieści elementy silnik przeglądarki odpowiedzialny za układ strony. jQuery realizuje wiele ze swoich efektów, korzystając z właściwości position. Jeśli już trochę pozapominałeś i potrzebujesz odświeżenia wiadomości, zajrzyj do znakomitych wyjaśnień znajdujących się w centrum deweloperskim Mozilli: http://developer.mozilla.org/en/CSS/ position#Relative_positioning P: Dlaczego musimy właściwości CSS position nadawać wartość absolute, fixed albo relative, kiedy chcemy animować elementy? O: Jeśli pozostawimy właściwości CSS position jej domyślną wartość (czyli static), nie będziemy mogli zastosować położenia górnego, prawego, lewego ani dolnego. Kiedy zaczniemy pracować z funkcją animate, będziemy potrzebowali ustawiać takie położenia, a wartość static po prostu na to nie pozwala. Pozostałe ustawienia właściwości position — absolute, fixed oraz relative — to umożliwiają. P: Wspomniałeś o silniku przeglądarki odpowiedzialnym za układ strony. Co to takiego? O: Silnik przeglądarki to jej centralna część, która interpretuje kod HTML i CSS i wyświetla go w oknie roboczym przeglądarki (czyli oknie, które pokazuje użytkownikowi zawartość strony). Google Chrome i Safari korzystają z silnika Webkit, Firefox używa silnika Gecko, a Microsoft Internet Explorer silnika o nazwie Trident. 218 Rozdział 5. efekty i animacja w jquery Magnesiki z kodem jQuery Ułóż magnesiki z kodem w odpowiednim porządku, aby otrzymać aktywny element div#head. Upewnij się, że zmienne oraz instrukcje warunkowe zachowują właściwą kolejność, dzięki czemu będziesz mógł wykryć osiągnięcie przez zmienną headclix wartości 9, która oznacza dziesiąte kliknięcie. } += 1; headclix }); if (headclix = 0; } headclix = 0; else { }); $(document).ready(function(){ 9){ var headclix $( #head ).click(function(){ jesteś tutaj  219 magnesiki z kodem — rozwiązanie Magnesiki z kodem jQuery — rozwiązanie Ułóż magnesiki z kodem w odpowiednim porządku, aby otrzymać aktywny element div#head. Upewnij się, że zmienne oraz instrukcje warunkowe zachowują właściwą kolejność, dzięki czemu będziesz mógł wykryć osiągnięcie przez zmienną headclix wartości 9, która oznacza dziesiąte kliknięcie. $(document). ready(function(){ var headclix = 0; $( #head ).click(function(){ if (headclix 9){ Jeżeli zmienna headclix jest większa lub równa 9, zrób to. headclix += 1; } Zaczynasz od 0, ponieważ jeszcze nic nie zostało kliknięte. Ten warunek ogranicza użytkownika do dziesięciu kliknięć. W to miejsce trafi kod animujący. Nadaj zmiennej headclix wartość, jaką miała wcześniej, plus jeden. else { W tym miejscu umieścisz kod przewijający pasek z rysunkiem. headclix = 0; } Po dziesiątym kliknięciu zresetuj zmienną headclix. }); }); 220 Rozdział 5. Czy moglibyśmy w jakiś sposób powtórnie wykorzystać ten kod, żeby pozostałe elementy też były aktywne? Oczywiście! Każdy z tych elementów zachowuje się podobnie do elementu div#head (należy uwzględnić tylko kilka różnic takich jak nazwy zmiennych). efekty i animacja w jquery Zaostrz ołówek Zaostrz ołówek Uzupełnij poniższy skrypt jQuery, aby elementy oczu, nosa i ust były aktywne. Za chwilę do każdego kliknięcia dodamy odpowiednią funkcjonalność. Upewnij się, że zmienne oraz instrukcje warunkowe zachowują właściwą kolejność, dzięki czemu będziesz mógł wykryć dziesiąte kliknięcie. $(document).ready(function(){ $( #head ).click(function(){ if (headclix 9){ headclix += 1; } else{ headclix = 0; } }); }); my_scripts.js jesteś tutaj  221 zaostrz rozwiązanie Zaostrz ołówek Zaostrz ołówek Rozwiązanie Tak więc uaktywniłeś elementy oczu, nosa i ust, ustawiając w odpowiedniej kolejności zmienne oraz instrukcje warunkowe, dzięki czemu będziesz mógł wykryć dziesiąte kliknięcie. $(document).ready(function(){ var headclix = 0, eyeclix=0, noseclix= 0, mouthclix = 0; $( #head ).click(function(){ if (headclix 9){ headclix += 1; } else{ headclix = 0; } }); $( #eyes ).click(function() { if (eyeclix 9){ eyeclix += 1; } else{ eyeclix = 0; } }); $( #nose ).click(function() { if (noseclix 9){ noseclix += 1; } else{ noseclix = 0; } }); $( #mouth ).click(function() { if (mouthclix 9){ mouthclix += 1; } else{ mouthclix = 0; } }); }); M o ż em y z a d e k l a r ow a ć w i e l e zm i e n n y c h i n a d a ć im w a r t o ś c i , r o z d z i e l a j ą c t e zm i e n n e p r z e c i n k am i . Każda część twarzy potwora jest teraz aktywna i skonfigurowana w taki sposób, aby przed przewinięciem paska z rysunkiem pozwolić tylko na dziewięć kliknięć. Czy zwróciłeś uwagę, że — pomimo drobnych różnic — każda funkcja wewnątrz metody click ma podobną strukturę? To mógłby być dobry przypadek do wielokrotnego wykorzystania kodu. Cierpliwości, mój pasikoniku, dojdziemy do tego w rozdziale 7. my_scripts.js 222 Rozdział 5. efekty i animacja w jquery Robimy efekt błyskawicy Następny w kolejności jest efekt błyskawicy. Zanim spróbujemy zrealizować jego działanie, sprawdźmy, co na ten temat jest w planie. Interfejs użytkownika Pojemnik Ramka Obszar głowy Kliknij, aby przewinąć głowę potwora. Obszar oczu Kliknij, aby przewinąć oczy potwora. Obszar nosa Kliknij, aby przewinąć nos potwora. Obszar ust Kliknij, aby przewinąć usta potwora. img - lightning1 img - lightning2 img - lightning3 Rysunki z błyskawicą są zagnieżdżone w sekcji pojemnika… …i muszą się szybko pojawiać i znikać. Symulacja obrazująca, jak powinna wyglądać animacja błyskawicy. Obrazy błyskawicy powinny pojawiać się i znikać szybko, tak jakby rzeczywiście się błyskało. Zrobiliśmy już coś podobnego w rozdziale 1. z wysuwaniem się rysunku i nabieraniem przez niego barw. Czy nie moglibyśmy skorzystać z tego samego, żeby Zrób sobie potwora zadziałało? Potencjalnie tak, ale być może istnieje lepszy sposób. Przyjrzeliśmy się gotowym efektom jQuery w rozdziale 1., ale teraz zagłębimy się w nie trochę bardziej. jesteś tutaj  223 sztuczki z właściwościami W jaki sposób jQuery animuje elementy? Kiedy przeglądarka pobiera plik CSS, ustawia wizualne właściwości elementów na stronie. Korzystając z wbudowanych efektów jQuery, interpreter JS zmienia te właściwości i animuje elementy na Twoich oczach. Nie jest to jednak magia... wszystko sprowadza się do właściwości CSS. Spójrzmy jeszcze raz na kilka efektów, które już widziałeś. hide, show i toggle zmieniają właściwość CSS display hide show toggle Interpreter JS zmienia właściwość CSS display wybranego elementu na none i usuwa go z układu strony. Interpreter JS tak zmienia właściwość CSS display wybranego elementu, aby stał się on widoczny. Jeśli element jest ukryty, interpreter JS go pokazuje, i odwrotnie. Efekty jQuery zmieniają właściwości CSS w locie, wprowadzając zmiany na stronie na oczach użytkownika. WYSIL Szare komórkI hide, show i toggle zmieniają właściwość display. Potrzebujemy jednak przewijać części twarzy oraz w tym samym czasie włączać i wyłączać błyskawice. Którą właściwość CSS zmienia Twoim zdaniem jQuery w celu uzyskania tych efektów? 224 Rozdział 5. Efekty wygaszania zmieniają właściwość CSS opacity fadeIn efekty i animacja w jquery Za pomocą fadeIn interpreter JavaScriptu zmienia właściwość CSS opacity wybranego elementu od 0 do 100. fadeTo fadeOut fadeTo umożliwia animowaną zmianę właściwości opacity wybranego elementu do określonej wartości procentowej. Za pomocą fadeOut interpreter JavaScriptu zmienia właściwość CSS opacity wybranego elementu od 100 do 0 i pozostawia na stronie miejsce dla tego elementu. Porady maniaka Właściwość CSS opacity nie działa tak samo na różnych przeglądarkach. Na szczęście jQuery zadba o to w naszym imieniu i tak naprawdę to wszystko, co musimy o tym wiedzieć! jesteś tutaj  225 dodaj nieco wdzięku do swoich wysunięć Wysuwanie sprowadza się do zmiany wysokości Hej, DOM-ie, zmniejsz wysokość wybranego elementu do 0, a następnie zmień właściwość display. Czy jesteś kimś w rodzaju magika? Wersja DOM strony Interpreter JavaScriptu slideUp Interpreter JavaScriptu nakazuje drzewu DOM zmienić właściwość CSS height wybranego elementu (lub elementów) na 0, a następnie nadać właściwości display wartość none. W zasadzie jest to ukrycie za pomocą wsunięcia. slideDown Interpreter JavaScriptu pokazuje wybrany element (lub elementy), animując ich wysokość od 0 do wartości ustawionej w stylu CSS. slideToggle Interpreter JavaScriptu sprawdza, czy obraz ma pełną wysokość, czy zerową, i przełącza efekt wysunięcia w zależności od wyniku. Jeżeli element ma wysokość 0, interpreter wysuwa go w dół, a jeśli ma pełną wysokość, wsuwa go w górę. 226 Rozdział 5. efekty i animacja w jquery Mogę więc wysuwać elementy wyłącznie w górę i w dół? A co, jeśli bym chciała przesunąć coś w lewo albo w prawo? jQuery udostępnia gotowe efekty tylko do wysuwania elementów w górę albo w dół. W bibliotece tej nie znajdziesz metody slideRight ani slideLeft (a przynajmniej nie było ich w chwili pisania tej książki). Nie przejmuj się jednak — zajmiemy się tym nieco później... W jQuery nie znajdziesz metody slideRight ani slideLeft. Zaostrz ołówek Zaostrz ołówek Które z gotowych efektów jQuery przydadzą się w aplikacji Zrób sobie potwora? Dla każdej grupy efektów napisz, czy będą one pomocne, i wyjaśnij, dlaczego tę grupę wybrałeś lub nie. Efekt Czy możemy go użyć? Dlaczego? Pokazywanie/ ukrywanie Wysunięcia Wygaszenia jesteś tutaj  227 zaostrz rozwiązanie Zaostrz ołówek Zaostrz ołówek Rozwiązanie Które z gotowych efektów jQuery przydadzą się w aplikacji Zrób sobie potwora? Efekt Czy możemy go użyć? Dlaczego? Pokazywanie/ ukrywanie Nie Wysunięcia Nie Wygaszenia Tak Efekty pokazywania i ukrywania (show i hide) nie pomogą nam przy tworzeniu aplikacji Zrób sobie potwora, ponieważ nie musimy animować właściwości display żadnego elementu. O mały włos! Pasek z rysunkiem musimy przesunąć w lewo, a slideUp, slideDown i efekty wysunięć pozwalają na zmienianie tylko właściwości height. Potrzebujemy czegoś, co zmieniałoby właściwość left. Możemy skorzystać z efektów wygaszania, aby sprostać wymogom planu, które stwierdzają, że rysunki błyskawic powinny pojawiać się i wygaszać szybko, jakby naprawdę się błyskało. Zatrudnij efekty wygaszania W założeniach jest mowa o tym, że rysunki błyskawic powinny pojawiać się i wygaszać, ale ma się to dziać szybko, aby wyglądało tak, jakby naprawdę się błyskało. Zagłębmy się trochę w efekty wygaszania i zobaczmy, jak możemy sprawić, że błyskanie będzie działać. Tutaj jest identyfikator pierwszego elementu graficznego. Tutaj wstawiamy parametr duration decydujący o czasie trwania animacji. Kontroluje on to, jak długo będzie trwał efekt. $( #lightning1 ). fadeIn( fast ); Możesz użyć jednego z parametrów tekstowych: slow, normal lub fast... ...albo możesz podać wartość w milisekundach. Mógłbyś na przykład wstawić 1000 i animacja efektu trwałaby jedną sekundę. $( #lightning1 ).fadeIn(1000); 228 Rozdział 5. efekty i animacja w jquery Łącz efekty za pomocą łańcuchów metod Błyskawice muszą pojawiać się i wygaszać wciąż na nowo. Zamiast rozpisywać te efekty oddzielnie, możemy skorzystać z łańcucha metod, z którego korzystaliśmy przez chwilę w rozdziale 4., kiedy musieliśmy wspinać się po drzewie DOM. Łańcuchy metod to cecha jQuery pozwalająca na łączenie ze sobą metod, które będą działać na zwróconym zbiorze elementów. Dzięki nim efekty błyskawic będą łatwiejsze do napisania, a zatem przyjrzyjmy się im bliżej. Właściwość display elementu zmieni się od ukrycia do pełnej widoczności i nieprzejrzystości... ...a następnie element znowu zostanie zmieniony w całkowicie przezroczysty. $( #lightning1 ).fadeIn().fadeOut(); Jeśli między nawiasami nie określisz czasu trwania, efekt otrzyma domyślną wartość normal, która wynosi 400 milisekund, czyli 0,4 sekundy. Każda metoda, którą dodajesz, jest jak ogniwo w łańcuchu. Napisz wiersze kodu, które zrealizują każdy z etapów przedstawionych poniżej. Ćwiczenie 1 2 Pokaż stopniowo element #lightning1 w czasie jednej czwartej sekundy. Dodaj kolejny efekt, który wygasi element #lightning1 w czasie jednej czwartej sekundy. jesteś tutaj  229 piorun uderza Napisz wiersze kodu, które zrealizują każdy z etapów przedstawionych poniżej. Rozwiązanie ćwiczenia 1 2 Pokaż stopniowo element #lightning1 w czasie jednej czwartej sekundy. $( #lightning1 ).fadeIn( 250 ); Dodaj kolejny efekt, który wygasi element #lightning1 w czasie jednej czwartej sekundy. $( #lightning1 ).fadeIn( 250 ).fadeOut( 250 ); Kontratakujemy za pomocą funkcji czasowych Masz już więc błyskawicę, która pojawia się i znika, ale wymogi projektu mówią, że błyskawice powinny uderzać przez cały czas. Prawdziwa błyskawica strzela przez niebo, po czym zwykle następuje przerwa, po której na niebie pojawia się kolejna. Potrzebujemy zatem powtarzać nasz efekt. Powróć myślami do poprzednich rozdziałów, gdzie musiałeś wykonywać powtarzalne zadania. Z czego korzystałeś? Zgadza się: z funkcji! Po raz pierwszy pojawiły się one w rozdziale 3., gdy tworzyliśmy funkcję wielokrotnego użytku obsługującą kliknięcia oraz generator liczb losowych. Teraz możemy użyć funkcji do wywoływania wygaszeń, poczekać chwilę, a następnie znowu je wywoływać w różnych odstępach czasu. Dzięki temu uzyskamy dla Zrób sobie potwora udany efekt wielu błyskawic. Spójrzmy na funkcję realizującą taki efekt. Hej, JavaScripcie, utwórz dla mnie nową funkcję. To jest nazwa, której będziemy używać do wywołania funkcji. Oto nasz parametr określający odstęp czasu (zmienna o nazwie t). Wstaw go tutaj i użyj ponownie w tym wierszu. $( #lightning1 ).fadeIn(250).fadeOut(250); setTimeout( lightning_one() ,t); function lightning_one(t){ }; Ten wiersz zawiera kod efektów jQuery. Metoda setTimeout nakazuje interpreterowi JS wywołanie funkcji, a następnie odczekanie chwilę przed ponownym jej wywołaniem. A tutaj widzimy bardzo fajną cechę JavaScriptu. Mówisz interpreterowi JS, że chcesz, aby funkcja wywoływała samą siebie wciąż na nowo. Oto odstęp czasu. Jest on wyrażony w milisekundach tak jak czasy trwania efektów, którym przyglądaliśmy się kilka stron wcześniej. W zaledwie trzech wierszach kodu uzyskałeś zsynchronizowaną w czasie funkcję błyskającą pierwszym rysunkiem pioruna. Spróbuj teraz napisać funkcje dla pozostałych dwóch rysunków z piorunami. 230 Rozdział 5. efekty i animacja w jquery Magnesiki jQuery Poukładaj magnesiki z kodem we właściwej kolejności, aby uzyskać funkcje animujące błyskawice dla pozostałych dwóch elementów z piorunami. function lightning_two (t){ }; function lightning_three (t){ }; .fadeIn(250) t); $( #lightning2 ) .fadeOut(250); lightning_two() , .fadeOut(250); lightning_three() , setTimeout( t); setTimeout( .fadeIn(250) $( #lightning3 ) jesteś tutaj  231 magnesiki z kodem — rozwiązanie Magnesiki jQuery — rozwiązanie Poukładaj magnesiki z kodem we właściwej kolejności, aby uzyskać funkcje animujące błyskawice dla pozostałych dwóch elementów z piorunami. function lightning_two (t){ $( #lightning2 ) $( #lightning2 ) .fadeIn(250) .fadeOut(250); setTimeout( lightning_two() , t); }; function lightning_three (t){ $( #lightning3 ) $( #lightning3 ) .fadeIn(250) .fadeOut(250); setTimeout( lightning_three() , t); }; P: Czy fadeIn().fadeOut() nie jest tym samym co toggle? O: Dobre pytanie! To nie jest to samo. Metoda toggle jest pojedynczą metodą, która po prostu przełącza wybrany element ze stanu ukrytego na widoczny i na odwrót w zależności od bieżącego stanu tego elementu. Połączenie fadeIn i fadeOut w łańcuch utworzy sekwencyjny efekt, który najpierw stopniowo pokaże wybrany element lub elementy, po czym — gdy to zostanie już osiągnięte — ponownie je wygasi. 232 Rozdział 5. Nie istnieją głupie pytania P: Metoda setTimeout jest dla mnie nowa. Czy pochodzi ona z jQuery, czy z JavaScriptu? O: Metoda setTimeout pochodzi tak naprawdę z JavaScriptu i możesz z niej korzystać w celu kontrolowania pewnych aspektów animacji w jQuery. Funkcją setTimeout zajmiemy się dokładniej w dalszych rozdziałach, a zwłaszcza w rozdziale 7. Jeśli chciałbyś poczytać o niej już teraz, odwiedź Mozilla Developer’s Center pod adresem https://developer.mozilla. org/en/window.setTimeout, a jeżeli naprawdę chcesz pogłębić swoją wiedzę, sięgnij po znakomitą książką Davida Flanagana JavaScript: The Definitive Guide (O’Reilly; http://oreilly.com/ catalog/9780596805531). P: Kiedy używam efektu hide, element po prostu znika. Jak mogę to spowolnić? O: Aby spowolnić efekt hide, show albo toggle, dodaj między nawiasami parametr duration określający czas trwania animacji. Oto, jak moglibyśmy zrealizować efekt ukrywania w rozdziale 1.: $( #picframe ).hide(500); Dodaj do swojego skryptu funkcje błyskawic Korzystając z kodu, który utworzyłeś w ćwiczeniu na poprzedniej stronie, zaktualizuj plik ze skryptem dla aplikacji Zrób sobie potwora. efekty i animacja w jquery Zrób to! W tych wierszach są wywoływane funkcje zdefiniowane na samym dole pogrubioną czcionką. $(document).ready(function(){ var headclix = 0, eyeclix = 0, noseclix = 0, mouthclix = 0; lightning_one(4000); lightning_two(5000); lightning_three(7000); Liczby między nawiasami to parametry w milisekundach, które zostaną przekazane do metody setTimeout. Za ich pomocą możesz zmieniać czasy błyskania piorunów. $( #head ).click(function(){ if (headclix 9){headclix+=1;} else{headclix = 0;} }); $( #eyes ).click(function(){ if (eyeclix 9){eyeclix+=1;} else{eyeclix = 0;} }); $( #nose ).click(function(){ if (noseclix 9){noseclix+=1;} else{noseclix = 0;} }); $( #mouth ).click(function(){ if (mouthclix 9){mouthclix+=1;} else{mouthclix = 0;} }); });//koniec funkcji end doc.onready Dla oszczędności miejsca usunęliśmy niektóre podziały wierszy. Nie przejmuj się, jeśli w Twoim skrypcie wyglądają one inaczej. To są definicje funkcji błyskawic. function lightning_one(t){ $( #container #lightning1 ).fadeIn(250).fadeOut(250); setTimeout( lightning_one() ,t); }; function lightning_two(t){ $( #container #lightning2 ).fadeIn( fast ).fadeOut( fast ); setTimeout( lightning_two() ,t); }; function lightning_three(t){ $( #container #lightning3 ).fadeIn( fast ).fadeOut( fast ); setTimeout( lightning_three() ,t); }; my_scripts.js jesteś tutaj  233 jazda próbna Jazda próbna Otwórz stronę w swojej ulubionej przeglądarce, aby sprawdzić, czy Twój efekt błyskawicy działa. Udało Ci się osiągnąć efekt wygaszania błyskawic, łącząc go z metodą JavaScriptu setTimeout. Pioruny pojawiają się i znikają szybko w różnych odstępach czasu, symulując prawdziwe błyskawice. Jak dotąd udało Ci się opracować funkcje obsługujące kliknięcia, a trzy rysunki błyskawic pojawiają się i wygaszają w różnych odstępach czasu. Spójrzmy na plan, aby sprawdzić, co pozostało jeszcze do zrobienia. Projekt Zrób sobie potwora Zadaniem aplikacji Zrób sobie potwora jest zabawianie dzieci w docelowej grupie wiekowej przez umożliwienie im zrobienia sobie potwora dzięki mieszaniu 10 różnych głów, oczu, nosów i ust. Przejścia między poszczególnymi częściami twarzy potwora powinny być animowane. potwora powinny być animowane. Dotarliśmy więc do Animacja Symulacja obrazująca, jak powinna się zmieniać część twarzy potwora. miejsca, w którym potrzebujemy przesunąć rysunek w lewo, a żaden z gotowych efektów przesuwania tego nie robi. Czy istnieje jakaś inna metoda, której moglibyśmy użyć? Symulacja obrazująca, jak powinna wyglądać animacja błyskawicy. Ta część planu stanowi nasze ostatnie wyzwanie w projekcie. Gotowe efekty są wspaniałe, ale nie pozwalają Ci robić wszystkiego, na co tylko masz ochotę. Nadeszła pora na opracowanie niestandardowego efektu, który będzie przesuwać części twarzy potwora w lewo. 234 Rozdział 5. efekty i animacja w jquery Efekty własnej roboty wykorzystujące metodę animate Tak więc w jQuery nie ma efektu slideRight ani slideLeft, a dokładnie tego potrzebujesz na tym etapie realizacji projektu. Czy to oznacza, że nasza strona Zrób sobie potwora poległa? Bez obaw. jQuery oferuje metodę animate służącą do tworzenia własnych efektów. Za pomocą animate możesz tworzyć niestandardowe animacje, które będą potrafiły robić o wiele więcej niż gotowe efekty. Metoda ta umożliwia animowanie właściwości CSS wybranego elementu lub elementów, a także animowanie wielu właściwości w tym samym czasie. Rzućmy okiem na niektóre z efektów, jakie możesz osiągnąć za pomocą metody animate. Efekty ruchu Możesz animować właściwości CSS związane z położeniem, żeby tworzyć iluzję przesuwania się elementów po ekranie (tak jak w przypadku pokazanej tu mumii). Efekty skali Możesz animować właściwości CSS height i width, aby tworzyć iluzję rośnięcia albo kurczenia się elementu. WYSIL Szare komórkI Którą właściwość CSS będziesz musiał animować, aby przy każdym kliknięciu części twarzy potwora przesuwały się w lewo? jesteś tutaj  235 to kwestia matematyki Co można, a czego nie można animować? Za pomocą metody animate możesz dynamicznie zmieniać właściwości czcionek, aby tworzyć efekty tekstowe. W jednym wywołaniu animacji możesz także animować wiele właściwości CSS jednocześnie, co poszerza paletę ciekawych rzeczy, które potrafi robić Twoja aplikacja sieciowa. Chociaż metoda animate jest naprawdę niezła, ma ona swoje ograniczenia. Gdzieś tam w głębi animacja wykorzystuje mnóstwo matematyki (czym na szczęście nie musisz się przejmować), a zatem jesteś ograniczony do pracy tylko z tymi właściwościami CSS, których ustawienia są numeryczne. Znaj swoje ograniczenia, ale popuść wodze wyobraźni — metoda animate oferuje pełne spektrum elastyczności i rozrywki. Efekty tekstowe Kurczę się, kurczę! Och, co za świat, co za świat! Kurczę się, kurczę! Och, co za świat, co za świat! Kurczę się, kurczę! Och, co za świat, co za świat! Kurczę się, kurczę! Och, co za świat, co za świat! Kurczę się, kurczę! Och, co za świat, co za świat! Możesz animować właściwości CSS czcionek, aby tworzyć iluzję lecącego, rosnącego albo malejącego tekstu. To zaledwie kilka przykładów. Potrzebowalibyśmy o wiele, wiele, wiele więcej stron w książce, żeby zaprezentować wszystkie możliwości. Obejr zyj to! Metoda animate będzie działać wyłącznie z właściwościami CSS, które w swoich ustawieniach korzystają z liczb: ƒ obramowanie, margines, ƒ pozycja dolna, lewa, prawa dopełnienie; i górna; ƒ wysokość elementu, wysokość ƒ pozycja tła; minimalna i maksymalna; ƒ szerokość elementu, szerokość minimalna i maksymalna; ƒ rozmiar czcionki; ƒ odstępy między literami i wyrazami; ƒ wcięcie tekstu; ƒ wysokość linii. 236 Rozdział 5. efekty i animacja w jquery Metoda animate z bliska Z zewnątrz metoda animate działa tak jak inne metody, z którymi już pracowałeś. Wybierz element lub elementy, z którymi chcesz pracować. Wywołaj metodę animate. Pierwszy parametr pozwala Ci wybrać właściwość CSS, którą chcesz animować. Drugi parametr to czas trwania w milisekundach. Pozwala Ci on określić, jak długo będzie trwać animacja. $( #my_div ).animate({left: 100px },500); W tym przykładzie animujemy właściwość CSS left... ...i ustawiamy ją na 100 pikseli. Pierwszy parametr jest wymagany — musisz go tu umieścić, aby animacja zadziałała. Drugi parametr jest opcjonalny. Jedną z największych zalet metody animate jest jednak możliwość zmieniania wielu właściwości wybranego elementu w tym samym czasie. $( #my_div ).animate({ opacity: 0, width: 200 , height: 800 }, 5000); W tym przykładzie animujemy jednocześnie przezroczystość i wielkość elementu. Parametry właściwości CSS należy ustawiać zgodnie ze standardem DOM, a nie ze standardem CSS. Obejr zyj to! WYTĘŻ UmYSŁ Jak myślisz — co takiego dzieje się za kulisami w przeglądarce, co pozwala metodzie animate zmieniać elementy na oczach użytkownika? jesteś tutaj  237 wprawianie rzeczy w ruch Metoda animate zmienia w czasie styl Efekty wizualne oraz animacja, które oglądasz na ekranie w kinie albo w telewizji, korzystają ze złudzenia ruchu. Specjaliści od efektów i animatorzy biorą sekwencję obrazów i odtwarzają je w określonym tempie po jednym obrazie, aby to złudzenie osiągnąć. Spotkałeś się zapewne z opracowanymi tym prostym sposobem książkami, w których ten sam efekt jest osiągany podczas ich wertowania. To samo dzieje się w oknie przeglądarki, z tym że nie mamy sekwencji obrazów do pokazania. Zamiast tego interpreter JavaScriptu wielokrotnie wywołuje funkcję, która zmienia styl animowanego obiektu. Przeglądarka przenosi te zmiany na ekran. Użytkownik widzi iluzję ruchu albo zmianę elementu, kiedy modyfikowany jest jego styl. 1 Kiedy działa metoda animate, interpreter JavaScriptu ustawia licznik na czas trwania animacji. Zmień właściwość CSS left na 500px w czasie 400 milisekund. J e ś l i w m e t o d z i e a n im a t e n i e o k r e ś l i s z w a r t o ś c i d l a p a r am e t r u c z a s u t rw a n i a , z o s t a n i e p r z y j ę t a w a r t o ś ć d om y ś l n a 4 0 0 m i l i s e k u n d . Interpreter JavaScriptu 2 Interpreter JavaScriptu mówi silnikowi przeglądarki, żeby zmienił właściwość CSS określoną w parametrze metody animate. Silnik przeglądarki wyświetla tę właściwość na ekranie. Chciałbym ustalić harmonogram odświeżania ekranu. Wygląda na to, że uda mi się uwinąć w czasie trochę dłuższym niż kilka milisekund. Silnik przeglądarki internetowej JavaScript interpreter 3 Interpreter JavaScriptu wielokrotnie wywołuje funkcję zmieniającą właściwość CSS elementu do chwili, w której licznik ustawiony w punkcie 1 wyzeruje się. Przy każdym wywołaniu funkcji zmiana jest pokazywana na ekranie. 4 Użytkownik widzi iluzję ruchu, kiedy przeglądarka renderuje zmiany elementu. Przeglądarka 238 Rozdział 5. efekty i animacja w jquery Połącz fragmenty kodu zawierające metodę animate z opisem tego, co robi on na ekranie. $( #my_div ).animate({top: 150px }, slow ) $( p ).animate({ marginLeft: 150px , marginRight: 150px }); $( #my_div ).animate({width: 30 }, 250) $( #my_div ).animate({right: 0 }, 500) Jednocześnie animuje zmiany lewego i prawego marginesu wszystkich paragrafów. Animuje zmianę prawej pozycji #my_div do zera w ciągu pół sekundy. Animuje zmianę odstępu między literami we wszystkich sekcjach w domyślnym czasie 400 milisekund. Jednocześnie animuje zmianę dopełnienia i szerokości #my_div. $( p ).animate({letterSpacing: 15px }); Powoli animuje zmianę górnej pozycji #my_div. $( #my_div ).animate({ padding: 200px , width: 30 }, slow ) Szybko animuje zmianę wysokości wszystkich obrazów. $( img ).animate({height: 20px }, fast ) Animuje zmianę szerokości #my_div w czasie jednej czwartej sekundy. jesteś tutaj  239 kto co robi — rozwiązanie Rozwiązanie Połącz fragmenty kodu zawierające metodę animate z opisem tego, co robi on na ekranie. $( #my_div ).animate({top: 150px }, slow ) $( p ).animate({ marginLeft: 150px , marginRight: 150px }); $( #my_div ).animate({width: 30 }, 250) $( #my_div ).animate({right: 0 }, 500) Jednocześnie animuje zmiany lewego i prawego marginesu wszystkich paragrafów. Animuje zmianę prawej pozycji #my_div do zera w ciągu pół sekundy. Animuje zmianę odstępu między literami we wszystkich sekcjach w domyślnym czasie 400 milisekund. Jednocześnie animuje zmianę dopełnienia i szerokości #my_div. $( p ).animate({letterSpacing: 15px }); Powoli animuje zmianę górnej pozycji #my_div. $( #my_div ).animate({ padding: 200px , width: 30 }, slow ) Szybko animuje zmianę wysokości wszystkich obrazów. $( img ).animate({height: 20px }, fast ) Animuje zmianę szerokości #my_div w czasie jednej czwartej sekundy. 240 Rozdział 5. efekty i animacja w jquery Dokładnie skąd dokąd? Ważną rzeczą do zapamiętania na temat metody animate jest fakt, że zmienia ona aktualną właściwość CSS na właściwość, którą ustawisz w pierwszym parametrze. Aby Twoje niestandardowe animacje były skuteczne, musisz się mocno zastanowić, jakie wartości są aktualnie ustawione w CSS. W poprzednim przykładzie zmieniliśmy lewe położenie #my_div na 100 pikseli. To, co wydarzy się na ekranie, w całości zależy od bieżącej wartości właściwości CSS left elementu #my_div. Bieżąca wartość właściwości CSS Wartość właściwości CSS w animate #my_div #my_div{ left: 20px; } #my_div przesunie się o 80 pikseli w prawo. Element jest animowany do położenia bezwzględnego. $( #my_div ).animate({left: 100px }); Jeśli właściwość ma aktualnie inną wartość, otrzymamy inny wynik. Bieżąca wartość właściwości CSS Wartość właściwości CSS w animate #my_div zaczyna się od dwusetnego piksela #my_div{ left: 200px; } #my_div przesunie się o 100 pikseli w lewo, ponieważ po lewej stronie znajduje się mniej pikseli. $( #my_div ).animate({left: 100px }); Fascynujące! Tylko jak możemy z tego skorzystać, żeby zadziałało nasze Zrób sobie potwora? Wszystko jest względne. Aby części twarzy potwora w Zrób sobie potwora przesuwały się w stronę, w którą chcemy, musimy zastanowić się, jakie są ich bieżące pozycje i jak chcemy je zmienić względem pozycji, które zajęły po tym, kiedy ostatnio zmieniła je metoda animate. jesteś tutaj  241 to jest względnie łatwe Ruch bezwzględny obiektów a ich ruch względny Zapewne pamiętasz, że paski z rysunkami, które chcemy pokazać, zagnieździliśmy wewnątrz sekcji o identyfikatorze #pic_box. Obecnie w CSS właściwość left elementu #pic_box ma wartość 91px. Zastanówmy się nad tym, jak chcielibyśmy przesuwać paski z rysunkami, aby uzyskać efekt przesunięcia w lewo, na którym nam zależy. szerokość 367 pikseli szerokość 367 pikseli szerokość 367 pikseli Zaczynamy od pokazania pierwszej części głowy. Jej względne położenie to 0 pikseli. Za każdym razem, kiedy użytkownik kliknie, chcemy przewinąć pasek z rysunkiem o 367 pikseli w lewo. Potrzebujemy więc przekazać metodzie animate, żeby przesunęła rysunek o –367 pikseli za każdym razem, kiedy zostanie wywołana funkcja. Zastanów się nad przykładem animacji bezwzględnej z poprzedniej strony. Tutaj mówimy metodzie animate, żeby nadała lewej pozycji sekcji #my_div wartość równą dokładnie 100 pikseli. Ale jak powiedzieć jej, żeby przesunęła element o –367 pikseli za każdym razem, kiedy metoda animate zostanie wywołana? $( #my_div ).animate({left: 100px }); $( #head ).animate({left: ??? }); Animacja względna = przesuń to za każdym razem właśnie o tyle Za pomocą animacji bezwzględnej przesuwasz element na bezwzględną pozycję siatki ekranu. Za pomocą animacji względnej przesuwasz element względem pozycji, którą zajmował ostatnio po zakończeniu animacji, która go tam umieściła. Ale jak przesuwamy element względnie za pomocą metody animate? 242 Rozdział 5. efekty i animacja w jquery Przesuwaj elementy względnie dzięki łączeniu operatorów Istnieją specjalne operatory JavaScriptu, które przesuwają element lub elementy o tę samą wartość przy każdym wywołaniu metody animate. Są one znane jako operatory przypisania, ponieważ są zwykle używane do przypisywania wartości zmiennej w taki sposób, że do jej bieżącej wartości jest dodawana nowa wartość. Brzmi to o wiele bardziej skomplikowanie, niż w istocie jest. Znak równości jest operatorem przypisania. Kiedy łączysz operatory arytmetyczne ze znakiem równości, otrzymujesz przydatne skróty. a = 20 a += 30 a -= 10 Operator = przypisuje zmiennej a wartość 20. Znak plusa w połączeniu z operatorem przypisania jest tu skrótem dla „a = a + 30”. Tutaj znak minusa w połączeniu z operatorem przypisania tworzy skrót dla „a = a – 10”. Takie połączenia operatorów pomagają w tworzeniu animacji względnej, umożliwiając ustawianie nowej wartości na wartość bieżącą plus albo minus pewna liczba pikseli. Ten zapis przesunie element o identyfikatorze box o 20 pikseli za każdym razem, kiedy zostanie wywołana metoda animate. $( #box ).animate({left: +=20 }); Oto, co się stanie z elementem #box przy każdym wywołaniu powyższej metody animate. animate zostaje wywołana i ustawia left na +=20. animate zostaje wywołana i ustawia left na +=20. Załóżmy, że left startuje z wartością 0. left = 0 left = 20 left = 40 Zwiększając za każdym razem wartość lewej pozycji elementu, w rzeczywistości przesuwamy go w prawą stronę okna przeglądarki. Napisz wiersz kodu w jQuery, który zrealizuje następujące czynności: CELNE SPOSTRZEŻENIA Oto dwa inne zestawienia operatorów przypisania: ƒ ƒ a *= 5 jest skrótem dla przemnożenia bieżącej wartości a przez 5 i przypisania uzyskanego wyniku do a. a /= 2 jest skrótem dla podzielenia bieżącej wartości a przez 2 i przypisania uzyskanego wyniku do a. Ćwiczenie 1 2 Przesunięcie elementu #head o 367 pikseli w lewo przy każdym wywołaniu metody animate. Czas trwania ustaw na pół sekundy. Przesunięcie elementu #head na po
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

jQuery. Rusz głową!
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ą: