Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00315 005919 13250932 na godz. na dobę w sumie
jQuery. Od nowicjusza do wojownika ninja - książka
jQuery. Od nowicjusza do wojownika ninja - książka
Autor: , Liczba stron: 336
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-3618-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> jquery - programowanie
Porównaj ceny (książka, ebook, audiobook).

Podkręć stronę z jQuery!

JavaScript ma za sobą długą historię z okresami większej i mniejszej popularności. Sporo osób pamięta jeszcze czasy, gdy każdy szanujący się użytkownik wyłączał jego obsługę w przeglądarce. Te czasy minęły bezpowrotnie! Ciężko dziś wyobrazić sobie strony internetowe bez technologii AJAX oraz wygodnego, dynamicznego i efektownego interfejsu użytkownika. Warto jednak sięgnąć po rozwiązanie, dzięki któremu wykorzystanie języka JavaScript będzie przyjemniejsze, zabawniejsze i co najważniejsze, bardziej wydajne.

Biblioteka jQuery odpowiada na te wszystkie potrzeby. Jest doskonałą implementacją kodu upraszczającego integrację i zwiększającego potencjał interaktywności języka JavaScript na stronach WWW. Dzięki niej w paru eleganckich liniach kodu możesz zawrzeć mnóstwo możliwości, które w czystym JavaScripcie zajęłyby kilkanaście, a może i kilkadziesiąt linii. To jednak nie wszystko, co zyskujesz, gdy korzystasz z jQuery. Co jeszcze może Cię zainteresować? Dostęp do mnóstwa wtyczek, gotowych skryptów i wsparcia społeczności, banalnie proste wykorzystanie technologii AJAX oraz wygodna obsługa formularzy to tylko niektóre z atutów tego narzędzia. W trakcie lektury tej książki poznasz dogłębnie bibliotekę jQuery, jej atuty i pułapki. Jest to idealna pozycja dla każdego webmastera!


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

Darmowy fragment publikacji:

Tytuł oryginału: jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie Tłumaczenie: Marek Pętlicki ISBN: 978-83-246-3618-1 © Helion S.A. 2012 Authorized translation of the English edition of jQuery: Novice to Ninja, 1st Edition ISBN 9780980576856 © 2010, SitePoint Pty. Ltd. This translation is published and sold by permission of O Reilly Media, Inc., the owner of all rights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. 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. 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) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/jqnoni.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/jqnoni Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. 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 ........................................................................................................................11 Kto powinien przeczytaÊ tÚ ksiÈĝkÚ .............................................................................11 Co znajdziesz w tej ksiÈĝce .........................................................................................12 PodziÚkowania ...........................................................................................................14 Konwencje zastosowane w ksiÈĝce .............................................................................14 Rozdziaï 1. ZakochaÊ siÚ w jQuery ............................................................. 17 Co szczególnego ma w sobie jQuery? .........................................................................18 ZgodnoĂÊ z róĝnymi przeglÈdarkami .....................................................................18 Selektory CSS3 ......................................................................................................19 Uĝyteczne narzÚdzia .............................................................................................19 jQuery UI ..............................................................................................................19 Wtyczki .................................................................................................................20 CzystoĂÊ kodu HTML .............................................................................................21 Szeroka popularnoĂÊ .............................................................................................21 Gdzie jest haczyk? ......................................................................................................22 Pobieranie i instalacja jQuery .....................................................................................23 Pobieranie jQuery .................................................................................................23 Google CDN .........................................................................................................24 Codzienne wersje rozwojowe i Subversion ...........................................................25 Wersja nieskompresowana czy skompresowana? .................................................25 Anatomia skryptu jQuery ............................................................................................26 Alias jQuery ..........................................................................................................26 Analiza wywoïañ jQuery .......................................................................................26 Elementy dokumentu HTML, czyli DOM ......................................................................27 JeĂli siÚ zdecydujesz… ...............................................................................................29 Rozdziaï 2. Wybieranie, dekorowanie i rozszerzanie ............................... 31 Czekamy na zaïadowanie strony .................................................................................32 Selektory — serce jQuery ...........................................................................................32 Proste selektory ....................................................................................................33 ZawÚĝanie selekcji ................................................................................................35 Testujemy selekcjÚ ................................................................................................35 Filtry .....................................................................................................................36 Wybieranie wielu elementów ...............................................................................36 Jak tworzyÊ dobre selektory ..................................................................................37 6 jQuery. Od nowicjusza do wojownika ninja Dekorowanie — obsïuga CSS w jQuery ......................................................................37 Odczytywanie wïaĂciwoĂci CSS .............................................................................37 Ustawianie wïaĂciwoĂci CSS .................................................................................38 Klasy ....................................................................................................................40 Rozszerzanie — dodawanie efektów za pomocÈ jQuery .................................................42 Ukrywanie i wyĂwietlanie elementów ...................................................................42 Stopniowe udoskonalanie .....................................................................................46 Dodawanie elementów ........................................................................................47 Usuwanie istniejÈcych elementów ........................................................................49 Modyfikowanie istniejÈcych elementów ................................................................50 Podstawowe animacje — efektowne ukrywanie i wyĂwietlanie ...........................50 Funkcje zwrotne ...................................................................................................52 Kilka sztuczek .............................................................................................................53 PodĂwietlanie przy najechaniu myszÈ ...................................................................53 Sïodkie tajemnice .................................................................................................54 Zanim przejdziemy dalej .............................................................................................55 Rozdziaï 3. Animacje, przewijanie i zmiana rozmiaru .............................. 57 Animacje ....................................................................................................................57 Animowanie wïaĂciwoĂci CSS ...............................................................................57 Animacja koloru ...................................................................................................59 Dynamika animacji ...............................................................................................60 Zaawansowane opcje dynamiki ............................................................................61 PodskakujÈce panele ............................................................................................62 Kolejka animacji ...................................................................................................65 ’añcuchy metod ...................................................................................................65 Zatrzymywanie ïañcucha ......................................................................................66 Animowana nawigacja .........................................................................................67 Animowana nawigacja, wersja 2 ..........................................................................69 Biblioteka jQuery UI ..............................................................................................71 Daj siÚ poruszyÊ! ..................................................................................................73 Przewijanie .................................................................................................................73 Zdarzenie przewijania ...........................................................................................73 PïywajÈca nawigacja ............................................................................................74 Przewijanie dokumentu ........................................................................................75 Modyfikacja paska przewijania .............................................................................77 Zmiana rozmiaru ........................................................................................................78 Zdarzenie zmiany rozmiarów ................................................................................79 Elementy obsïugujÈce zmianÚ rozmiaru ................................................................81 WïaĂnie tak siÚ animuje, przewija i zmienia wymiary ..................................................86 SPIS TRE¥CI 7 Rozdziaï 4. Ilustracje i pokazy slajdów ...................................................... 87 Lightbox .....................................................................................................................87 Wïasna wersja lightboksa .....................................................................................88 Diagnozowanie skryptu za pomocÈ console.log ....................................................91 ColorBox — wtyczka typu lightbox .......................................................................92 Przycinanie ilustracji za pomocÈ Jcrop ........................................................................95 Pokazy slajdów ..........................................................................................................98 Pokazy slajdów z przenikaniem .............................................................................98 Przewijane pokazy slajdów .................................................................................109 Widĝet galerii obrazów w stylu iPhoto ................................................................115 Peïny obraz ..............................................................................................................120 Rozdziaï 5. Menu, karty, dymki i panele ................................................. 121 Menu .......................................................................................................................121 Rozwijane menu pionowe ..................................................................................122 Ikony stanu zwiniÚcia lub rozwiniÚcia menu .......................................................126 Rozwijanie menu po zatrzymaniu nad nim wskaěnika myszy ..............................127 Rozwijane menu poziome ...................................................................................128 Menu akordeonowe .................................................................................................132 Prosty akordeon .................................................................................................132 Akordeony wielopoziomowe ..............................................................................135 Akordeon w jQuery UI ........................................................................................137 Karty ........................................................................................................................138 Prosta implementacja kart ..................................................................................138 Karty w jQuery UI ...............................................................................................140 Panele ......................................................................................................................143 PojawiajÈcy siÚ formularz logowania ..................................................................143 Panel wysuwany ................................................................................................145 Dymki podpowiedzi ..................................................................................................147 Proste dymki podpowiedzi ..................................................................................148 Zaawansowany dymek podpowiedzi ..................................................................151 Zamówienie z menu .................................................................................................156 Rozdziaï 6. Konstrukcja, AJAX i interakcje .............................................. 157 Konstrukcja — najlepsze praktyki .............................................................................157 Czystsze jQuery ..................................................................................................158 Szablony po stronie klienta .................................................................................162 Programowanie pod kÈtem wersji przeglÈdarki (jest zïe) .....................................164 Przyspieszony kurs technologii AJAX ........................................................................166 Czym jest AJAX? .................................................................................................166 ’adowanie zewnÚtrznego kodu HTML ................................................................166 Rozszerzanie moĝliwoĂci odnoĂników za pomocÈ techniki hijax ..........................167 8 jQuery. Od nowicjusza do wojownika ninja Wybieranie fragmentu kodu HTML za pomocÈ selektorów ..................................168 Zaawansowane mechanizmy metody load() ........................................................169 Przygotuj siÚ na przyszïoĂÊ — live oraz die .........................................................170 Pobieranie danych za pomocÈ metody $.getJSON() .............................................171 Wyszukiwarka komentarzy Twittera po stronie klienta ........................................172 NarzÚdzia obsïugi AJAX w jQuery .......................................................................173 CzÚsto uĝywane ustawienia ĝÈdañ AJAX .............................................................174 ’adowanie zewnÚtrznych skryptów — $.getScript() ............................................174 ¿Èdania GET i POST ............................................................................................175 Zdarzenia zwiÈzane z ĝÈdaniami AJAX ................................................................175 Interakcja z uĝyciem technologii AJAX ......................................................................176 Galeria obrazów oparta na AJAKSIE ....................................................................177 Sïowa kluczowe obrazów ...................................................................................189 Wojownicy ninja, mistrzowie techniki AJAX? Obecni! ...............................................193 Rozdziaï 7. Formularze, widĝety i okna dialogowe .............................. 195 Formularze ...............................................................................................................195 Prosta walidacja formularzy ................................................................................196 Walidacja formularzy z wtyczkÈ Validation .........................................................199 Wskaěnik maksymalnej dïugoĂci tekstu ...............................................................201 Wskazówki formularza ........................................................................................202 Zaznaczenie pól opcji ..........................................................................................204 Programowe modyfikowanie wartoĂci pól ..........................................................205 Autouzupeïnianie ...............................................................................................208 Widĝet oceny ......................................................................................................210 Elementy kontrolne ..................................................................................................215 Widĝet wyboru daty ...........................................................................................215 Suwaki ...............................................................................................................218 PrzeciÈgnij i upuĂÊ ..............................................................................................221 Sortowanie obiektów w jQuery UI ......................................................................226 Pasek postÚpu ....................................................................................................228 Okna dialogowe i powiadomienia ............................................................................230 Proste modalne okno dialogowe ........................................................................230 Dialog z jQuery UI ..............................................................................................233 Powiadomienia w stylu Growl ............................................................................236 Powiadomienia 1-up ..........................................................................................238 Zmiana formularzy na lepsze ....................................................................................241 Rozdziaï 8. Listy, drzewa i tabele ............................................................. 243 Listy .........................................................................................................................243 Element selectable z jQuery UI ............................................................................244 Sortowanie list ...................................................................................................249 ZarzÈdzanie listami pól wyboru ..........................................................................250 SPIS TRE¥CI 9 Drzewa .....................................................................................................................254 Drzewo rozwijane ...............................................................................................254 Delegacja zdarzeñ ..............................................................................................257 Tabele ......................................................................................................................259 Blokada nagïówków tabeli .................................................................................259 Powtarzanie nagïówka .......................................................................................262 Siatki danych ......................................................................................................264 Zaznaczanie wierszy tabel z uĝyciem pól opcji ....................................................272 PoczÈtek listy sukcesów ............................................................................................274 Rozdziaï 9. Wtyczki, motywy i techniki zaawansowane ........................ 277 Wtyczki ....................................................................................................................277 Tworzenie wtyczki ..............................................................................................278 Zagadnienia zaawansowane ....................................................................................285 Rozszerzanie jQuery ............................................................................................285 Zdarzenia ...........................................................................................................290 Inne szczegóïowe zagadnienia szkolenia wojownika ninja jQuery ............................300 Unikanie konfliktów nazw ..................................................................................300 Kolejkowanie animacji i usuwanie kolejki ...........................................................301 Traktowanie obiektów JavaScript tak jak obiektów jQuery ..................................303 Tworzenie motywów wizualnych ..............................................................................304 Uĝywanie galerii motywów ................................................................................304 Definiowanie wïasnego motywu ........................................................................305 Obsïuga motywów we wïasnych komponentach ................................................306 StarTrackr! — epilog ................................................................................................308 Dodatek A PodrÚczna ĂciÈgawka ............................................................. 309 Opcje metody $.ajax() ...............................................................................................309 Flagi ...................................................................................................................309 Ustawienia .........................................................................................................310 Funkcje obsïugi zdarzeñ AJAX i funkcje zwrotne .................................................312 Opcje $.support ........................................................................................................312 Zdarzenia .................................................................................................................315 WïaĂciwoĂci zdarzeñ ...........................................................................................315 Metody zdarzeñ ..................................................................................................315 Wïasne obiekty zdarzeñ ......................................................................................316 Dodatek B Specyfika jÚzyka JavaScript ................................................... 317 Koercja typów ..........................................................................................................317 Operatory równoĂci ..................................................................................................318 Prawda i faïsz ...........................................................................................................319 10 jQuery. Od nowicjusza do wojownika ninja Dodatek C Zaawansowane narzÚdzia do tworzenia wtyczek ........................ 321 Selektor i kontekst ....................................................................................................321 Stos jQuery ...............................................................................................................322 Minimalizacja ...........................................................................................................323 Skorowidz .................................................................................. 325 Rozdziaï Animacje, przewijanie i zmiana rozmiaru Klient jest niezwykle zadowolony z pierwszej rundy naszych zmian i poprawek i chce pójść jesz- cze dalej. Jego firma współpracuje z przemysłem rozrywkowym i, jego zdaniem, strona WWW powinna odzwierciedlać ekscytującą i dynamiczną naturę tej gałęzi przemysłu. Wierzy też, że atrak- cyjne animacje pomogą zwiększyć sprzedaż. „Sądzę, że potrzebujemy czegoś zgodnego z Web 2.0, o którym wiele słyszałem. Czy możecie coś zrobić, żeby strona bardziej kojarzyła się z Web 2.0?”. Rzeczywiście, możemy. Klient wręcza nam kolejną listę sugerowanych poprawek, pełną ekscytu- jących zmian. Ta lista pomoże nam wyjść poza proste zadania polegające na ukrywaniu i wyświe- tlaniu elementów i przybliży nas do statusu wojownika ninja jQuery. Animacje Biblioteka jQuery powstała właśnie po to, żeby tworzyć animacje. Stopniowe zanikanie komuni- katu o błędzie po nieudanym logowaniu, rozwijanie menu czy nawet wizualne przewijanie stron treści przypominające przekładanie kart książki lub gry polegające na strzelaniu do kosmitów: wszystkie te zadania są łatwe do realizacji dzięki wbudowanym metodom, wspomaganym niezli- czoną rzeszą wtyczek. Animowanie wïaĂciwoĂci CSS Do tej pory poznaliśmy pewne istotne podstawy animacji w jQuery: wsuwanie, zanikanie i efek- towne ukrywanie oraz wyświetlanie elementów. Nie mieliśmy jednak większej kontroli nad tym, co jest animowane i w jaki sposób. Nadszedł czas na wprowadzenie bardzo ważnej metody jQuery, nazwanej animate(), która pozwala na zastosowanie animacji do wielu właściwości CSS, umożli- wiając tworzenie niesamowitych efektów na stronach WWW. Przyjrzyjmy się praktycznemu przykładowi zastosowania tej metody: 58 jQuery. Od nowicjusza do wojownika ninja $( p ).animate({ padding: 20px , borderBottom: 3px solid #8f8f8f , borderRight: 3px solid #bfbfbf }, 2000); rozdzial_03/01_animating_css/script.js (fragment) Powyższy kod realizuje animację na wszystkich akapitach strony, zmieniając atrybut padding z do- myślnej wartości do 20px oraz dodając ramkę u góry i po prawej stronie. Animacja będzie wyko- nywała się przez dwie sekundy (2000 milisekund). W celu zastosowania metody animate() przekazujemy literał obiektu określający właściwości, które mają być animowane. Właściwości są określane jako pary klucz:wartoĂÊ w taki sam sposób jak w metodzie css(). Należy jednak pamiętać o jednej istotnej zasadzie: zamiast margin-left należy zastosować nazwę marginLeft, a zamiast background-color nazwę backgroundColor, czyli nie wolno używać nazw właściwości z łącznikiem, a należy stosować konwencję nazw camelCase. Każda nazwa właściwości CSS zawierająca łącznik musi być zmodyfikowana w ten sposób1. Parametr czasu animacji działa tak samo jak w przypadku animacji, które tworzyliśmy w roz- dziale 2.: można przekazać liczbę określającą czas w milisekundach lub słowne określenie czasu trwania: slow, fast, normal. Wartości właściwości wymiarowych CSS mogą być podane w pikselach, jednostce em, procentach lub punktach, na przykład można napisać 100px, 10em, 50 lub 16pt. Użyte wartości mogą też być względne w stosunku do aktualnych: wystarczy przed wartością użyć znaków += lub -=, co spowoduje, że zostanie ona odpowiednio zwiększona o dodaną wartość lub o nią zmniejszona. Użyjemy tych możliwości do tego, aby pozycje w menu nawigacyjnym po- ruszały się, gdy najedziemy na nie wskaźnikiem myszy, czyli musimy zastosować metodę obsługi zdarzenia hover(): rozdzial_03/02_relative_css_animation/script.js (fragment) $( #navigation li ).hover(function() { $(this).animate({paddingLeft: +=15px }, 200); }, function() { $(this).animate({paddingLeft: -=15px }, 200); }); Po najechaniu wskaźnikiem myszy na pozycję w menu odsunie się ona płynnie w prawą stronę. Metody animate można użyć do uzyskania precyzyjnej kontroli nad wyświetlaniem, ukrywaniem i funkcjami przełączania widoczności elementów, które poznaliśmy w rozdziale 2. Wystarczy dla od- powiedniej właściwości CSS zastosować wartość show, hide lub toggle zamiast wartości liczbowej: 1 Inny sposób rozwiązania tego problemu polega na ujęciu w cudzysłowy nazw kluczy zawierających niedo- zwolone znaki — przyp. tłum. ANIMACJE, PRZEWIJANIE I ZMIANA ROZMIARU 59 rozdzial_03/03_animate_show_hide (fragment) $( #disclaimer ).animate({ opacity: hide , height: hide }, slow ); Obserwowanie animacji elementów to niezwykle satysfakcjonujący wynik pracy programisty. W ramach ćwiczenia pobaw się animowaniem różnych atrybutów CSS i spróbuj uzyskać ciekawe i unikalne efekty. Metoda animate() obsługuje więcej opcji, wiele z nich służy do zaawansowanej kontroli parametrów animacji. Omówimy je szczegółowo w dalszej części rozdziału. Animacja koloru Gdy już przekonasz się, jak wiele frajdy daje metoda animate(), zapewne zechcesz animować ko- lor. Jednak ta operacja jest nieco bardziej skomplikowana, ponieważ pośrednie wartości koloru, między początkowym a końcowym punktem animacji, muszą być wyliczane w specjalny sposób. W przeciwieństwie do wysokości czy szerokości elementu, które zmieniają się w prosty, liniowy sposób, do wyliczenia koloru jQuery potrzebuje dodatkowych obliczeń, aby upewnić się, że barwa znajduje się, powiedzmy, w trzech czwartych odległości między niebieskim a pomarańczowym. Ten mechanizm wyliczania koloru został pominięty w podstawowej bibliotece. Taka decyzja ma sens, jeśli się głębiej zastanowić: w większości zastosowań mechanika animacji koloru nie jest nie- zbędna, dzięki czemu plik podstawowej biblioteki może zachować rozsądne rozmiary. Jeśli ktoś chce animować kolory, potrzebna mu jest wtyczka Color Animations2. Uĝycie wtyczek Oficjalne repozytorium wtyczek projektu jQuery3 zawiera spory zbiór wtyczek, który stale siÚ rozrasta. Nie- które z nich sÈ bardzo uĝyteczne, inne mniej. Wtyczki moĝna wyszukiwaÊ po nazwie, kategorii (jak efekty czy narzÚdzia) albo po ocenie przyznanej przez spoïecznoĂÊ uĝytkowników jQuery. Gdy juĝ znajdziesz interesujÈcÈ CiÚ wtyczkÚ, pobierz jÈ do odpowiedniego miejsca w swoim projekcie (najczÚĂciej bÚdzie to ten sam katalog, w którym zapisaïeĂ plik biblioteki jQuery). Warto przeczytaÊ plik readme lub odpowiedniÈ dokumentacjÚ na stronie WWW, ale najczÚĂciej wtyczkÚ wystarczy o prostu zaimportowaÊ w dokumencie HTML w ten sam sposób jak inne biblioteki jÚzyka JavaScript. W jaki sposób korzystaÊ z wtyczki, to juĝ zagadnienie specyficzne dla kaĝdej z nich. W tym przypadku nie uniknie siÚ koniecznoĂci zapoznania z dokumentacjÈ. Po pobraniu i zaimportowaniu wtyczki Color Animations można animować kolory za pomocą metody animate() — tak samo jak inne właściwości CSS. Spróbujmy zmienić kolor notki prawnej przez okres dwóch sekund, żeby zwrócić na nią uwagę użytkowników strony. 2 http://plugins.jquery.com/project/color 3 http://plugins.jquery.com/ 60 jQuery. Od nowicjusza do wojownika ninja $( #disclaimer ).animate({ backgroundColor : #ff9f5f }, 2000); Dzięki tej technice notka prawna jest znacznie lepiej widoczna. rozdzial_03/04_color_animation (fragment) Dynamika animacji Dynamika animacji (ang. easing) określa sposób, w jaki prędkość animacji zmienia się w czasie. Dynamika animacji jest zdefiniowana za pomocą algorytmu matematycznego i pozwala zmieniać prędkość w trakcie trwania animacji. Dzięki temu, że korzystamy z jQuery, możemy odłożyć na inną okazję konieczność odkurzenia wiadomości z zakresu równań matematycznych. Standardowa biblioteka jQuery oferuje dwie opcje dynamiki animacji: linear i swing. Każde wy- wołanie metody animate() pozwala na użycie jednej z tych dwóch opcji kontroli dynamiki. Różnicę między nimi można zobaczyć w formie wykresów na rysunku 3.1. Wykres prezentuje sposób, w jaki prędkość animacji zmienia się w czasie dla każdej z tych opcji. Rysunek 3.1. Standardowe opcje dynamiki animacji w jQuery Dynamika typu swing polega na powolnym rozpoczęciu, następnie prędkość znacznie się zwięk- sza, a przy końcu znów spada. Wizualnie dynamika typu swing wygląda znacznie naturalniej w porównaniu z dynamiką liniową, dlatego jQuery stosuje ją domyślnie w metodzie animate(), jeśli dynamika nie zostanie określona w sposób jawny. Dynamika liniowa (opcja linear) nie wykorzystuje przyspieszania ani spowalniania, animacje odby- wają się ze stałą prędkością. Takie animacje w większości przypadków wyglądają dość nudno i sztyw- no, ale warto wypróbować tę opcję, może okazać się użyteczna w specyficznych zastosowaniach. W ramach przykładu dodamy animację w efekcie kliknięcia pierwszego akapitu na naszej stronie WWW: po pierwszym kliknięciu powiększymy jego wysokość, wykorzystując dynamikę liniową, a po drugim zmniejszymy ją do oryginalnych rozmiarów, stosując dynamikę typu swing. Różnica jest dość subtelna, ale jeśli powtórzysz animację kilka razy, łatwo ją zauważysz. Animacja zmniej- szania wysokości wydaje się bardziej naturalna. rozdzial_03/05_easing/script.js (fragment) $( p:first ).toggle(function() { $(this).animate({ height : +=150px }, 1000, linear ); }, function() { $(this).animate({ height : -=150px }, 1000, swing ); }); ANIMACJE, PRZEWIJANIE I ZMIANA ROZMIARU 61 W powyższym listingu znajdziemy sporo szczegółów specyficznych dla jQuery, warto zatem na chwilę się zatrzymać, żeby przeanalizować ten kod i zrozumieć, co się dzieje: „ za pomocą metody filter() selektora wybieramy tylko pierwszy akapit, „ do wybranego akapitu podpinana jest metoda obsługi zdarzenia toggle() (która jest wy- woływana przy kolejnych kliknięciach), „ w każdej funkcji obsługi zdarzenia wybieramy obiekt this, odwołujący się do elementu, na którym zostało odpalone zdarzenie (czyli do klikniętego akapitu), „ pierwsza funkcja obsługi zdarzenia wykorzystuje format +=, powodujący zwiększenie wy- sokości akapitu o 150 pikseli, wykorzystując animację z dynamiką liniową, „ druga funkcja obsługi zdarzenia wykorzystuje format -=, powodujący zmniejszenie wyso- kości akapitu o 150 pikseli, wykorzystując animację z dynamiką typu swing. Jeśli zrozumiałeś ten przykład, należą Ci się gratulacje! Naprawdę łapiesz, o co chodzi w jQuery! Zaawansowane opcje dynamiki Jak wspomnieliśmy, dynamika animacji typu swing daje znacznie przyjemniejszy efekt, prawdo- podobnie odpowiedni dla większości zastosowań. Jednak swing i linear to jedynie wierzchołek góry lodowej, jeśli chodzi o możliwości w tym zakresie. Do dyspozycji mamy znacznie więcej typów dynamiki. Większość z nich jest zdefiniowana we wtyczce Easing4, dostępnej w repozytorium wtyczek jQuery. Wtyczki wchodzÈce w skïad jQuery UI Biblioteka Easing jest równieĝ dostÚpna w sekcji efektów biblioteki jQuery UI, którÈ bÚdziemy omawiaÊ niebawem. JeĂli zaczyna CiÚ mÚczyÊ duĝa liczba wtyczek, zajrzyj do punktu „Biblioteka jQuery UI” w dal- szej czÚĂci rozdziaïu. Ta biblioteka gromadzi duĝÈ liczbÚ popularnych wtyczek, miÚdzy innymi do obsïugi animacji kolorów, przeksztaïceñ miÚdzy klasami i dynamiki animacji. Wystarczy zaïadowaÊ jednÈ bibliotekÚ jQuery UI, nie trzeba importowaÊ kaĝdej z tych wtyczek z osobna. Wystarczy pobrać plik JavaScript z kodem wtyczki i załadować go w pliku HTML za importem biblioteki jQuery. Wtyczka Easing nie oferuje nowych metod, zamiast tego mamy do dyspozycji około 30 opcji dynamiki animacji. Wyjaśnianie zasad działania każdej z nich byłoby doskonałym testem dla wyobraźni najlepszych pisarzy, zamiast tego proponujemy jednak zapoznać się z ry- sunkiem 3.2, który wyjaśnia algorytmy działania kilku z opcji w sposób graficzny. Można zauważyć, że niektóre algorytmy wychodzą poza wykres. W takim przypadku animowany obiekt przechodzi za punkt zatrzymania, żeby po chwili wrócić do niego i tam się zatrzymać. Efekt wygląda podobnie do zabawki zaczepionej na gumce, która delikatnie sprężynując, przycią- ga ją na swoje miejsce. 4 http://plugins.jquery.com/project/Easing 62 jQuery. Od nowicjusza do wojownika ninja Rysunek 3.2. Zaawansowane opcje dynamiki animacji Dodatkowych algorytmów dynamiki animacji używa się tak samo jak dostępnych standardowo: wystarczy podać ich identyfikator w parametrze metody animate(). Mamy spory wybór, warto więc wypróbować choćby kilka z nich, żeby nabrać wyobrażenia o ich działaniu: rozdzial_03/06_other_easing_options/script.js (fragment) $( p:first ).animate({height: +=300px }, 2000, easeOutBounce ); $( p:first ).animate({height: -=300px }, 2000, easeInOutExpo ); $( p:first ).animate({height: hide }, 2000, easeOutCirc ); $( p:first ).animate({height: show }, 2000, easeOutElastic ); Tylko popatrz, jak skacze ten akapit! Zapewne zastanawiasz się, skąd wzięły się nazwy opcji dy- namiki animacji, albo chcesz poznać ich pełną listę. Twórcą algorytmów jest Robert Penner, któ- ry algorytmy dynamiki animacji zdefiniował w formie formuł matematycznych i umieścił na swojej stronie WWW5. Najlepszym sposobem na zapoznanie się z formułami stojącymi za każdą z opcji dynamiki jest analiza kodu źródłowego wtyczki Easing. Czas na zabawÚ Zrób sobie przerwÚ i przetestuj opcje dynamiki animacji zdefiniowane przez wtyczkÚ. Istnieje niewielka szansa, ĝe bÚdziesz kiedykolwiek w stanie uĝyÊ wszystkich, ale ich znajomoĂÊ pozwoli dokonaÊ Ăwiado- mego wyboru tej z nich, która najlepiej odpowiada Twoim oczekiwaniom. Poza tym zabawa z funkcjami pomaga utrwaliÊ ich znajomoĂÊ, co jest bardzo waĝnÈ broniÈ w rÚkach wojownika ninja jQuery! PodskakujÈce panele Dowiedzieliśmy się nieco na temat metody animate(), zajrzyjmy więc do najnowszej listy zmian zgłoszonych przez klienta. Dzisiejsza lista dotyczy niezwykle istotnej nowości w serwisie Star- Trackr! — chodzi o codziennie modyfikowaną listę celebrytów pod nazwą „Kto jest w tej chwili na to- pie?” (w skrócie KJWTCNT). Ta lista ma zawierać informacje o celebrytach, o których z jakichś 5 http://www.robertpenner.com/easing/ ANIMACJE, PRZEWIJANIE I ZMIANA ROZMIARU 63 powodów (pozytywnych lub negatywnych) nagle zrobiło się głośno, wraz z ich zdjęciem i krótką informacją biograficzną. Listę zaimplementujemy za pomocą animacji i technik definiowania dy- namiki w postaci ruchomych paneli, które mogą być niezależnie otwierane lub zamykane. Wygląd tego widżetu przedstawia rysunek 3.3. Rysunek 3.3. Panele informacji o celebrytach W naszym HTML-u ten element strony zaimplementujemy w postaci obiektu div zawierającego informacje o wszystkich celebrytach. Każdy panel będzie składał się z nagłówka h3, po którym wystąpi kolejny obiekt div zawierający zdjęcie i krótki akapit: rozdzial_03/07_bouncy_content_panes/index.html (fragment) div id= bio h2 Kto jest w tej chwili na topie? /h2 h3 Staszek ’adny /h3 div img src= ../../images/beau_100.jpg width= 100 height= 100 / p Notka o Staszku /p /div h3 Jurek Co /h3 div img src= ../../images/johnny_100.jpg width= 100 height= 100 / p Notka o Jurku /p /div h3 Bubatronik /h3 div img src= ../../images/glenda_100.jpg width= 100 height= 100 / p Notka o Bubatronik /p /div /div Gdy użytkownik klika jeden z nagłówków, panel rozwija się lub zwija, zależnie od stanu. Panele można dowolnie stylizować, ale najczęściej stosowana technika polega na uzyskaniu nagłówka o wyróżniającym się kolorze tła, co jasno sugeruje, że to jest element, który można kliknąć. 64 jQuery. Od nowicjusza do wojownika ninja SkaczÈca animacja Warto mieÊ ĂwiadomoĂÊ jednego szczegóïu zwiÈzanego z animowaniem obiektów: gdy animowany obiekt znajduje siÚ blisko nagïówka, animacja „szarpie”, co jest szczególnie widoczne przy ukrywaniu. Dzieje siÚ tak dlatego, ĝe margines nagïówka jest usuwany po ukryciu obiektu leĝÈcego bezpoĂrednio za nim. Proste obejĂcie tego problemu polega na ustawieniu marginesów nagïówka na zero. Chcemy uniknąć wyświetlania paneli przy ładowaniu strony, więc w pierwszym kroku ukryjemy wszystkie obiekty zawierające treść: rozdzial_03/07_bouncy_content_panes/script.js (fragment) $( #bio div ).hide(); Jeśli jednak chcemy, żeby któryś z paneli był domyślnie wyświetlony, możemy to określić w tym miejscu. To uświadomi użytkownikom, że pod nagłówkami istnieją ukryte panele, więc warto je klik- nąć. Implementacja tego w jQuery to proste zadanie: wykorzystujemy filtr :first, za pomocą którego wybieramy pierwszy panel, po czym go wyświetlamy. $( #bio div:first ).show(); Selektor potomków W powyĝszym przykïadzie zastosowaliĂmy nowy selektor, o którym warto powiedzieÊ nieco wiÚcej. Jest to selektor potomków, wykorzystujÈcy znak wiÚkszoĂci ( ). Selektor potomków wybiera element nad- rzÚdny (lewa strona znaku ), a nastÚpnie jego elementy podrzÚdne (jeden poziom w dóï) dopasowane do podselektora (po prawej stronie znaku ). JeĂli pominiemy selektor potomka (znak ), ten kod wybierze wszystkie elementy div znajdujÈce siÚ w elemencie o id równym bio, nawet jeĂli znajdÈ siÚ na innym poziomie zagnieĝdĝenia. WiÚcej na temat tego selektora moĝna znaleěÊ w dokumentacji jQuery6. Nasz dokument zawiera już niezbędny kod HTML, wystarczy więc dodać trochę kodu jQuery do obsługi interakcji. Ujawnienie ukrytej treści wymaga obsługi zdarzenia click, odszukania następ- nego elementu (w którym znajduje się treść) i wyświetlenia go, co już robiliśmy w rozdziale 2. Tym razem jednak zastosujemy dynamikę animacji typu bounce, co spowoduje, że panele będą się zachowywać jak upadająca piłka, która chwilę podskakuje, zanim się zatrzyma: rozdzial_03/07_bouncy_content_panes/script.js (fragment) $( #bio h3 ).click(function() { $(this).next().animate( { height : toggle }, slow , easeOutBounce ); }); Doskonale sprawdzający się w tym przypadku efekt podskakującej piłki realizuje opcja dynamiki easeOutBounce. Koniecznie sprawdź jego działanie w przeglądarce. 6 http://docs.jquery.com/Selectors/child ANIMACJE, PRZEWIJANIE I ZMIANA ROZMIARU 65 Kolejka animacji Kolejnym zagadnieniem związanym z metodą animate() są opcje dodatkowe. Wywołanie wyglą- da następująco: animate(parametry, opcje); Opcje definiuje się w postaci literału obiektu (zbiór par klucz:wartoĂÊ). Znamy już kilka z nich: czas trwania (ang. duration), dynamika (ang. easing) czy funkcja zwrotna wykonywana po zakoń- czeniu animacji (complete). Istnieją jeszcze dwie: step i queue. Zanim je wyjaśnimy, rzućmy okiem na składnię wywołania funkcji animate z użyciem opcji: rozdzial_03/08_animation_queue/script.js (fragment) $( p:first ).animate( { height: +=100px , backgroundColor: green }, { duration: slow , easing: swing , complete: function() {alert( gotowe! );}, queue: false } ); Warto pamiętać, że większość możliwości metody animate() można wykorzystać z użyciem pro- stej składni. Składnia złożona jest używana wyłącznie w celu wykorzystania bardziej zaawanso- wanych możliwości, jak parametr queue. Parametr ten służy do kontroli kolejki (ang. queue) animacji, które mają być wykonane na ele- mencie. Wywołanie metody animate() na elemencie powoduje dodanie tej animacji do kolejki. Element wykonuje kolejkę sekwencyjnie aż do jej wyczerpania. Łatwo to zauważyć, jeśli wykona się sekwencję szybkich kliknięć na animowanym obiekcie. Istnieje jednak wiele sytuacji, w których tego typu zachowanie jest niepożądane. Czasem chcemy, aby kilka animacji odbywało się jednocześnie. Jeśli wyłączymy kolejkę animacji, kolejne animacje będą wykonywane równolegle. Kolejka animacji jest kontrolowana za pomocą parametru queue oraz metod stop(), queue() i dequeue(). Ta kombinacja metod i parametrów daje nam elastyczną kontrolę nad działaniem anima- cji. Zanim jednak zagłębimy się w tajniki kontroli animacji, powinniśmy poznać jedną z najważ- niejszych technik związanych z jQuery. ’añcuchy metod Do tej pory wyrażenia jQuery wykonywaliśmy sekwencyjnie, jedno po drugim, ewentualnie za- gnieżdżaliśmy je w ramach funkcji zwrotnych. W celu ponownego użycia selektora musieliśmy wywołać go ponownie lub użyć obiektu this. Biblioteka jQuery obsługuje jednak mechanizm 66 jQuery. Od nowicjusza do wojownika ninja pozwalający wykonać kilka metod na tym samym selektorze. Mechanizm ten nazywamy łańcu- chem (ang. chaining) i przejście na poziom ninja wymaga znajomości tego szczegółu. Łańcuch pozwala wykonać większą liczbę wywołań metod jQuery w pojedynczym wyrażeniu. Łańcuch buduje się przez dopisanie metody do innego wyrażenia. Na przykład połączmy w łańcuch metody hide(), slideDown() i fadeOut(). Nasz element szybko znika, potem wjeżdża na swoje miejsce, a na końcu stopniowo zanika: $( p:first ).hide().slideDown( slow ).fadeOut(); Możemy tworzyć łańcuchy metod o dowolnej długości. Należy jednak zachować czujność: two- rzenie kodu w ten sposób łatwo uzależnia! Oprócz wykonywania łańcucha metod na tym samym obiekcie łańcuch może nawigować po obiektach DOM, dodawać i usuwać obiekty po drodze, co może prowadzić do dość potwornych wyrażeń. Łańcuchy metod warto zapisywać w czytelny sposób, przenosząc kolejne wywołania do kolejnych wierszy. Taki zapis zajmuje więcej miejsca, ale kod jest znacznie czytelniejszy i łatwiejszy w utrzyma- niu. Nasz poprzedni przykład możemy zapisać następująco: $( p:first ) .hide() .slideDown( slow ) .fadeOut(); Należy pamiętać, że selektor jQuery po każdym wywołaniu metody zawiera zmodyfikowany przez nią wynik, a nie wartość początkową. Oznacza to, że w kolejnych wywołaniach metod z łańcucha możemy dodawać i usuwać elementy, a zmiany będą miały zastosowanie tylko do aktualnej selekcji. Jeśli przyjrzysz się niektórym z naszych wcześniejszych przykładów, z pewnością znajdziesz przy- padki łańcuchów metod, na przykład $(this).next().toggle(). Metoda next() przenosi selektor na kolejny obiekt (rodzeństwo), a metoda toggle() przełącza jego stan widoczności, nie narusza- jąc oryginalnego obiektu. W pracy z jQuery będziesz miał mnóstwo okazji do wykorzystania łańcuchów metod, dalsza część książki jest nimi po prostu wypełniona. Między innymi na tym polega radość używania jQuery! Zatrzymywanie ïañcucha Jeśli pojawi się potrzeba zatrzymania na chwilę łańcucha metod w trakcie realizacji, można wyko- rzystać metodę delay(). Wystarczy podać czas oczekiwania (w milisekundach). Oto prosty przy- kład takiego użycia: $( p:first ) .hide() .slideDown( slow ) .delay(2000) .fadeOut(); ANIMACJE, PRZEWIJANIE I ZMIANA ROZMIARU 67 To wyrażenie wsunie akapit, odczeka dwie sekundy, po czym spowoduje jego stopniowe zanikanie. Metoda delay() może być doskonałym sposobem kontroli przebiegu wieloetapowych animacji. Animowana nawigacja Tym razem klient upiera się przy swoim: chce, żeby główne menu było animacją we Flashu, z wi- zualnymi efektami towarzyszącymi nawigacji. „Flash wygląda lepiej”. Zapewniasz go, że Flasha masz w małym palcu i że na szybko coś przygotujesz. OK, klient wyszedł z pokoju. Czas wykorzystać świeżo nabyte umiejętności w celu stworzenia efek- townego paska nawigacji, przypominającego w działaniu animację Flash. Menu będzie miało fa- lujący „bąbel” oznaczający daną pozycję, nad którą aktualnie znajduje się wskaźnik myszy. Zrobimy to, wykorzystując wyłącznie wolne technologie: HTML, CSS i JavaScript. A Flash? Nie potrzebu- jemy żadnego Flasha! W przykładach wykorzystamy tylko podstawowe animacje, dzięki czemu będą one łatwe do analizy. Na początek zmodyfikujemy CSS obsługujący nasze menu, aby wyświetlało się w poziomie, a nie w pionie. Nasz kod HTML dla menu wygląda następująco: rozdzial_03/09_animated_navigation/index.html (fragment) ul id= navigation li a href= # Strona gïówna /a /li li a href= # O nas /a /li li a href= # Kup teraz! /a /li li a href= # Pomysï na prezent /a /li /ul Naszym bąblem będzie pusty element div, ustawiający się za elementem nawigacyjnym, nad któ- rym zatrzyma się wskaźnik myszy. Zatem pierwsze zadanie dla jQuery polega na utworzeniu ta- kiego elementu i dopisaniu go do dokumentu: rozdzial_03/09_animated_navigation/script.js (fragment) $( div id= navigation_blob /div ).css({ width: $( #navigation li:first a ).width() + 10, height: $( #navigation li:first a ).height() + 10 }).appendTo( #navigation ); Warto zwrócić uwagę na to, że w środku literału obiektu używamy selektora w celu odczytania wymiarów obiektu. Jeśli masz doświadczenie z programowaniem, nie zdziwi Cię to; nowicjuszy uspokajamy: to nie jest nic nadzwyczajnego, wszędzie tam, gdzie można wpisać wartość statyczną, można też użyć wyrażenia wyliczającego (lub odczytującego) wartość. Do odczytanych wymiarów dodajemy 10, dzięki czemu bąbel jest nieco większy od elementu menu, za którym ma się znaleźć. Mamy już bąbel, teraz potrzebujemy zdarzeń, które wprawią go w ruch. Zdarzeniem będzie umieszczenie wskaźnika myszy nad pozycją w menu, więc użyjemy metody hover(). Jak pamiętamy, metoda ta oczekuje dwóch parametrów: pierwszy określa funkcję obsługi zdarzenia mouseover, drugi funkcję zdarzenia mouseout. Nasze wyrażenie będzie zatem miało następującą strukturę: 68 jQuery. Od nowicjusza do wojownika ninja $( #navigation a ).hover(function() { // funkcja obsługi mouseover . . . }, function() { // funkcja obsługi mouseout . . . }); rozdzial_03/09_animated_navigation/script.js (fragment) Czas na odrobinę zabawy. Rzućmy okiem na pierwszą funkcję, która jest wywoływana, gdy za- trzymamy wskaźnik myszy nad pozycją menu: rozdzial_03/09_animated_navigation/script.js (fragment) // funkcja obsługi mouseover $( #navigation_blob ).animate( {width: $(this).width() + 10, left: $(this).position().left}, {duration: slow , easing: easeOutElastic , queue: false} ); Gdy wskaźnik myszy zatrzyma się nad pozycją w menu, wykonujemy animację dwóch atrybutów naszego bąbla: szerokości i pozycji. Pozycja elementu jest odczytywana za pomocą metody position(). Metoda ta nie powoduje zmian, po prostu zwraca dwie wartości określające przesunięcie lewego górnego wierzchołka obiektu w stosunku do rodzica. Nas interesuje przesunięcie poziome, ponieważ bąbel będzie poruszał się od lewej do prawej. Opcję queue ustawiamy na wartość false, ponieważ nie chcemy, aby animacje nawarstwiły się nam, powodując zakłócenia wizualne w obsłudze menu (w przypadku użytkownika szczególnie nerwowo poruszającego myszą nad menu). Po przeniesieniu wskaźnika na inną pozycję menu rozpocznie się inna animacja, niezależnie od tego, czy aktualna skończyła działanie. Mimo to musimy poinformować jQuery o tym, co ma zrobić, gdy użytkownik przesunie wskaź- nik myszy poza pozycję w menu. Ten fragment kodu jest dość podobny do poprzedniego, ale zawiera nieco więcej metod w łańcuchu: rozdzial_03/09_animated_navigation/script.js (fragment) // funkcja obsługi mouseout $( #navigation_blob ) .stop(true) .animate( {width: hide }, {duration: slow , easing: easeOutCirc , queue: false} ) .animate( {left: $( #navigation li:first a ).position().left;}, fast ); } ANIMACJE, PRZEWIJANIE I ZMIANA ROZMIARU 69 Tym razem połączyliśmy w łańcuch dwie animacje: pierwsza ukrywa bąbel z użyciem estetycznej dynamiki animacji, druga przenosi go na pozycję początkową, czyli lewą stronę menu. Warto zwrócić uwagę na metodę stop() wykonywaną na początku obsługi zdarzenia. Metoda ta robi dokładnie to, na co wskazuje jej nazwa: zatrzymuje animację. Akceptuje dwa dodatkowe pa- rametry: clearQueue i gotoEnd. Parametr clearQueue ustawiamy na true, co powoduje wyczysz- czenie kolejki animacji. Parametr gotoEnd jest wykorzystywany w celu ustalenia końcowego stanu elementu, gdyby kolejka animacji została wykonana: obiekt jest natychmiast ustawiany w ten stan (bez animacji). W tym przy- padku tego nie chcemy, ponieważ zależy nam, aby kolejne animacje rozpoczęły się od miejsca, w którym bąbel znajduje się w danej chwili, nawet jeśli jest właśnie w połowie drogi między elementami menu. Pobaw się nieco animacją menu, żeby sprawdzić, jak właściwy dobór parametrów dynamiki ani- macji wpływa na uzyskanie naturalnego wrażenia działania interfejsu. To też doskonała okazja, aby sprawdzić inne parametry dynamiki animacji. Wystarczy zastąpić proponowane przez nas innymi z dostępnej listy. Aż trudno uwierzyć, jak wielka jest między nimi różnica! Można też animować inne atrybuty bąbla, na przykład zmieniać jego kolor. Animowana nawigacja, wersja 2 Jedną z doskonałych cech takich bibliotek jak jQuery jest możliwość szybkiego przetestowania różnych alternatywnych rozwiązań i wybrania tego, które działa najlepiej. Do powrotu klienta zostało nam kilka godzin. Spróbujmy rozwiązać to samo zadanie w nieco in- ny sposób. Zobaczymy, co z tego wyniknie. W tym przypadku nasze pozycje w menu będą miały ukrytą ikonę, która będzie wyskakiwała po naje- chaniu myszą (co przedstawia rysunek 3.4). Konfiguracja tego efektu jest prosta. Mamy zwykłą listę nienumerowaną, skonfigurowaną za po- mocą CSS w formie poziomej, ale każdy element listy posiada dodatkowy, ukryty element defi- niujący ikonę. W tym celu w specjalny sposób jest ustawiana wysokość elementu listy, tak że wi- doczny jest tylko tekst, a na życzenie wysokość jest animowana tak, aby wyświetlić również ikonę. Rysunek 3.4. PodskakujÈce animowane menu Na początek zdefiniujemy style CSS. Nasze menu pozycjonujemy w sposób bezwzględny w stosunku do kontenera (element div), w którym musimy zadbać o wystarczającą ilość miejsca na wysuwane ikony. Ikony stanowią tło elementów tekstowych menu, ale tło jest przesunięte, dzięki czemu ikony 70 jQuery. Od nowicjusza do wojownika ninja nie są widoczne. Wysokość elementów tekstowych wynosi 20px, a tło jest przesunięte o 30px w dół. W efekcie tło (czyli ikona) nie jest widoczne przy domyślnej wysokości elementów menu. Każda pozycja menu ma ustawioną inną ikonę w charakterze tła: rozdzial_03/10_animated_navigation_2/navigation.css (fragment) #container { position: relative; } #navigation { position:absolute; width: inherit; top: 0; right: 0; margin: 0; } #navigation li { height:20px; float:left; list-style-type: none; width:70px; padding:3px; border-right:1px solid #3687AF; background-color: #015287; background-repeat: no-repeat; background-position: center 30px; } #navigation li a { color: #FFFFFF; } #navigation #home{ background-image:url( icon_home.png ); } ... Jedyną nowością w powyższym kodzie jest zatrzymanie akcji w celu wyczyszczenia kolejki anima- cji, zarówno w obsłudze zdarzenia mouseover, jak i mouseout. Następnie animujemy wysokość elementu w celu wyświetlenia ukrytych ikon lub zmniejszamy ją w celu ich ukrycia. Precyzyjnie dobrane ustawienia czasu trwania animacji i jej dynamiki pozwalają uzyskać ciekawy efekt podskaki- wania, o który nam chodziło. W tym przypadku również zachęcamy do eksperymentów z różny- mi ustawieniami i dostosowania efektu do własnych potrzeb. rozdzial_03/10_animated_navigation_2/script.js (fragment) $( #nav_stretch li ).hover( function() { $(this) .stop(true) .animate( {height: 60px }, {duration: 500, easing: easeOutBounce } ) }, function() { $(this) ANIMACJE, PRZEWIJANIE I ZMIANA ROZMIARU 71 .stop(true) .animate( {height: 20px }, {duration: 500, easing: easeOutCirc } ) } ); I w ten sposób mamy nie jeden, a dwa niezłe przykłady efektów, które możemy pokazać klientowi. Biblioteka jQuery UI Jak wspomnieliśmy w rozdziale 1., biblioteka jQuery UI jest kolekcją zaawansowanych widżetów i interakcji, stworzonych z użyciem jQuery. Znajdziemy tu kontrolki wyboru daty, akordeony i obsłu- gę zdarzeń typu „przeciągnij i upuść”. Tego typu elementy stają się coraz popularniejsze w aplika- cjach WWW. Zanim jednak zaczniemy cieszyć się nowymi zabawkami, musimy zdobyć bibliotekę jQuery UI. Ten proces jest nieco bardziej skomplikowany w porównaniu z podstawową bibliote- ką jQuery i wtyczkami, których używaliśmy dotychczas. Kłopot wynika z faktu, że pełna wersja biblioteki jQuery UI waży niemal 500 kB (300 kB po zminimalizowaniu)! To dużo. Na szczęście większość projektów wykorzystuje zaledwie ułamek możliwości całej biblioteki. Z tego powodu na stronie projektu jQuery dostępne jest narzędzie pozwalające stworzyć własną, dopasowaną do potrzeb wersję jQuery UI, to znaczy taką, która zawiera tylko potrzebne nam elementy i nic więcej. Opcje konfiguratora własnej wersji jQuery UI7 mogą na pierwszy rzut oka wydać się nieco przy- tłaczające, ale nie należy się zrażać. Narzędzie konfiguracyjne składa się z kilku sekcji: Core, Interaction, Widgets, Effects i Themes. Sekcja Core dotyczy głównej części biblioteki jQuery UI, na niej swoje działanie opierają komponenty z sekcji Widgets i Interaction. Dobre podejście polega na odznaczeniu wszystkiego, a następnie zaznaczeniu tylko tego, co niezbędne. Jeśli dany element wymaga zainstalowania innego, ten drugi zostanie zaznaczony automatycznie. Na etapie tworzenia aplikacji warto zaopatrzyć się w pełną wersję. W ten sposób będziemy mieli wszystko pod ręką, na wszelki wypadek. Po zakończeniu tworzenia aplikacji można wrócić na stronę konfiguratora i stworzyć bibliotekę w wersji produkcyjnej, zawierającą tylko to, co niezbędne. Różnica w rozmiarze między wersją pełną a dostosowaną może być spora, co demonstruje rysunek 3.5. Jedną z opcji, która ma duży wpływ na wygląd widżeów i interakcji, jest motyw (ang. theme). Do dys- pozycji mamy sporą liczbę gotowych motywów, które wybiera się z listy rozwijanej. W rozdziale 9. zajmiemy się bardziej szczegółowo motywami, pokażemy też, jak tworzyć własne. Na razie jednak, nie chcąc psuć niezłego tempa, użyjemy domyślnego motywu i wracamy do pracy. Archiwum utworzone przez konfigurator, dostosowane do wersji jQuery UI zawiera sporą liczbę pli- ków. Znajdziemy tam mnóstwo kodu demonstracyjnego i dokumentacji. Warto poszperać w katalogu development-bundle, ale niecierpliwych zainteresuje tylko plik jQuery-ui-1.7.2-min.js (numer wersji jest oczywiście odpowiedni dla aktualnie najnowszej wersji stabilnej) oraz katalog wybranego motywu. 7 http://jqueryui.com/ 72 jQuery. Od nowicjusza do wojownika ninja Rysunek 3.5. Porównanie peïnej wersji biblioteki jQuery UI z wersjÈ dostosowanÈ Katalog motywu należy umieścić w lokalizacji dostępnej z poziomu kodu HTML. W przykładach z tej książki jQuery UI umieściliśmy w katalogu lib (obok biblioteki jQuery), a pliki motywu w katalogu css. Biblioteka jQuery UI zawiera pakiet Effects, który pozwala implementować interesujące efekty. Zawiera też dodatkowe metody i funkcje pomocne w tworzeniu zaawansowanych animacji. Część z tych możliwości mieliśmy okazję poznać dzięki wtyczkom Color Animations oraz Easing. Obie te wtyczki są zawarte w pakiecie Effects, zatem nie musimy już nic włączać indywidualnie, jeśli planujemy używać biblioteki efektów wchodzącej w skład jQuery UI. Zanim przejdziemy do dalszych zagadnień, rzućmy okiem na dostępne efekty. Znów pomęczymy nasz pierwszy akapit na stronie i potrząśniemy nim nieco, podświetlimy go na żółto, a na końcu wysadzimy, rozpryskując na kawałki: rozdzial_03/11_jquery_ui_effects/script.js (fragment) $( p:first ) .effect( shake , {times:3}, 300) .effect( highlight , {}, 3000) .hide( explode , {}, 1000); Robi wrażenie! A to oczywiście zaledwie przedsmak możliwości dostępnych efektów. Niektórych z nich można używać tylko w taki sposób jak w powyższym przykładzie, inne stanowią uzupełnienie standardowych parametrów animacji: hide (ukrywania), show (wyświetlania) lub toggle (przełą- czania widoczności). Przykładem tej drugiej grupy są parametry: blind, clip, puff, fold i slide. Nie będziemy ich wszystkich analizować, najlepiej, jeśli spędzisz niedzielne popołudnie na ich wypróbowaniu. Nie wszystkie efekty są brawurowe, ale wiele z nich sprawia wrażenie przydat- nych w codziennych zastosowaniach, jak highlight, który jest standardowym sposobem ozna- czania na przykład nowych wiadomości użytkownika. Dobrym pomysłem jest samodzielne przetestowanie wszystkich efektów, żeby pamiętać o nich wówczas, gdy okażą się przydatne. A jeśli asortyment efektów dostępny z jQuery UI to dla Ciebie za mało, setki innych czekają w repozytorium wtyczek jQuery! ANIMACJE, PRZEWIJANIE I ZMIANA ROZMIARU 73 Daj siÚ poruszyÊ! Rozumiesz już podstawy tworzenia animacji z jQuery: selektory, funkcje obsługi zdarzeń, funkcje zwrotne, łańcuchy metod i — najważniejszą z nich — metodę animate(). Zapoznałeś się też po- krótce z rozbudowaną biblioteką jQuery UI. Najlepszy sposób opanowania tych umiejętności po- lega na wykorzystaniu ich w praktyce. Zatem idź i wykonuj animacje na wszystkim, co Ci wpadnie w oko. Spróbuj pobawić się z każdą właściwością każdego elementu na każdej stronie, aż poczu- jesz, że rzeczywiście stały się posłuszne Twojej woli. Zanim przejdziemy od animacji do innych zaawansowanych mechanizmów związanych z jQuery, zwrócimy uwagę na przewijanie i zmianę rozmiaru elementów. Te zagadnienia są nieco miej efektow- ne od animacji, ale stanowią istotne elementy obsługi interfejsu użytkownika. Pomogą też utrwalić podstawowe pojęcia związane z jQuery: metody i łączenie ich w łańcuchy. Na co jeszcze czekamy? Przewijanie Przewijanie jest zagadnieniem zbliżonym do animacji, ponieważ w tym przypadku elementy również poruszają się na ekranie. W przeciwieństwie do animacji to jednak użytkownik kontro- luje przebieg tej operacji. Istnieje mnóstwo sposobów dostosowania tego typu interakcji do własnych potrzeb. W tym punkcie przyjrzymy się menu, które zachowuje swoje położenie nawet mimo przewinięcia strony przez użytkownika, tworzeniem motywów pasków przewijania oraz sposobom zastosowania technik animacyjnych w zagadnieniach związanych z przewijaniem dokumentu. Zdarzenie przewijania Zanim będziemy w stanie udoskonalić mechanizm przewijania, musimy wiedzieć, kiedy ono nastę- puje. Jak się okazuje, istnieje zdarzenie związane z przewijaniem. Zdarzenie to nazywa się scroll i jest odpalane w przypadku zmiany pozycji przewijania elementu, który ma taką właściwość, jak okno lub div z obsługą przewijania. Jeśli zatem użytkownik przewija stronę, odpalane jest zdarze- nie, które możemy przechwycić i obsłużyć. W celu przechwycenia zdarzenia przewijania musimy podpiąć się do elementu przewijanego — najczęściej jest to element o
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

jQuery. Od nowicjusza do wojownika ninja
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ą: