Table Of ContentTytuł oryginału: jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples
Tłumaczenie: Piotr Rajca
ISBN: 978-83-246-7706-1
Authorized translation from the English language edition, entitled: JQUERY, JQUERY UI,
and JQUERY Mobile: Recipes and Examples; ISBN 0321822080; by Adriaan De Jonge; and
by Phillip Dutson; published by Pearson Education, Inc, publishing as Addison Wesley.
Copyright © 2013 Pearson Education, Inc.
All rights reserved. No part of this book may by 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 Pearson Education, Inc.
Polish language edition published by HELION S.A. Copyright © 2013.
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.
Wydawnictwo HELION dołożyło wszelkich starań, by zawarte w tej książce informacje były
kompletne i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie,
ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo
HELION nie ponosi 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: [email protected]
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/jquere.zip
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/jquere_ebook
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
• Poleć książkę na Facebook.com • Księgarnia internetowa
• Kup w wersji papierowej • Lubię to! » Nasza społeczność
• Oceń książkę
Pochwa(cid:228)y dla ksi(cid:241)(cid:276)ki jQuery, jQuery UI
oraz jQuery Mobile. Receptury
„Podejście do przedstawienia jQuery, jQuery UI oraz jQuery Mobile, które w swojej książce
zaprezentowali de Jonge oraz Dutson, uczy szybko tworzyć wyszukane projekty i jednocześnie eliminuje
wszelkie spekulacje. Dzięki nim korzystanie z jQuery naprawdę wydaje się całkowicie bezproblemowe”.
— Joseph Annuzzi, Jr., architekt aplikacji internetowych, PeerDynamic.com
„Ta książka doskonale przedstawia wszystkie aspekty korzystania z jQuery; zawiera wszystko: zaczynając
od wspaniałych rozdziałów o interfejsie użytkownika, aż po najnowsze technologie, czyli strony przeznaczone
na urządzenia przenośne. Wielokrotnie zaglądałem do tej książki podczas prac nad aktualnie tworzonymi
projektami.
Ta książka będzie wspaniała dla wszystkich, którzy chcą się czegoś dowiedzieć o bibliotece jQuery oraz
jej możliwościach. Autorzy prezentują informacje w sposób, który każdy zrozumie i z którego będzie mógł
skorzystać”.
— Erik Levanger, in(cid:346)ynier UI UX
„Często powtarzałem, że w przypadku biblioteki jQuery połową problemu jest poznanie tych wszystkich
rzeczy, które przy jej użyciu można zrobić. Solidne podstawy mogą bardzo ułatwić przejście od etapu
»To będzie skomplikowane!« do etapu »To można zrobić, używając jQuery!«. Podobnie jak wszystkie
pozostałe książki z recepturami, także i ta zawiera gotowe do użycia przykłady demonstrujące techniki,
zarówno te podstawowe, jak i bardziej złożone. Oprócz głównych zagadnień tematycznych wymienianych
w tytule książki, można w niej także znaleźć informacje o dostosowywaniu interfejsu jQuery UI do własnych
potrzeb oraz dodatkowe receptury poświęcone tworzeniu własnych wtyczek. Bardzo wysoko oceniam także
wskazówki autorów związane z zagadnieniami wydajności działania oraz najlepszymi praktykami
programistycznymi. I w końcu, jako osoba, która wcześniej nie miała żadnych doświadczeń w korzystaniu
z jQuery Mobile, mogę stwierdzić, że książka ta zawiera doskonałe przykłady, które pozwolą szybko zacząć
ją stosować. Ogólnie rzecz biorąc, ta książka znacznie poszerzy umiejętności, które będziesz mógł dodać
do swojego arsenału”.
— Ryan Minnick, programista, Verizon Wireless
„To najlepsza książka dla wszystkich, którzy używają jQuery, jQuery UI oraz jQuery Mobile”.
— Stretch Nate, programista aplikacji internetowych, HealthPlan Services
„Poprzez łatwe do zrozumienia receptury de Jonge oraz Dutson prezentują czytelnikom wszystkie
możliwości jQuery, zaczynając od najprostszych selektorów, a kończąc na zagadnieniach zaawansowanych,
takich jak tworzenie wtyczek oraz stosowanie biblioteki jQuery Mobile. Ta książka jest doskonałym punktem
początkowym dla wszystkich, którzy są zainteresowani poznaniem jednej z bibliotek JavaScript o największych
możliwościach”.
— Jacob Seidelin, programista aplikacji internetowych, Nihilogic
Dla mojej kochającej i wspierającej dziewczyny Christine Kam.
— Adriaan
Dla mamy, która nauczyła mnie kochać książki; dla taty, który nauczył mnie kochać
technologię; oraz dla rodziny, która wspiera mą słabość do nich obu.
— Phil
Podzi(cid:246)kowania
Przede wszystkim chciałbym podziękować Philowi Dutsonowi za dołączenie się do
projektu tej książki i pomoc w ukończeniu jej w zaplanowanym terminie. Oprócz Laury
Lewin, Olivii Basegio, Sheri Cain, Jacoba Seidelina oraz Jospha Annuzziego —
wspomnianych także przez Phila — dziękuję także Trinie MacDonald, która rozpoczęła
ten projekt w wydawnictwie Pearson.
Chciałbym także podziękować swoim kolegom, zarówno tym z mojego poprzedniego
miejsca pracy, firmy ANBW, jak i z aktualnego, firmy Xebia, za inspirację oraz wspaniałe
pomysły. Uwielbiam pracować z osobami, które podobnie jak ja fascynują się nowymi
technologiami!
Gorąco dziękuję swojej rodzinie i przyjaciołom, którzy dodają mi odwagi,
dokądkolwiek bym nie zmierzał. A w szczególności dziękuję mojej dziewczynie Christine
Kam, która jest moim błogosławieństwem i z którą jestem bardzo szczęśliwy. Dziękuję
za Wasze bezwarunkowe wsparcie!
— Adriaan
Chciałbym podziękować Adriaanowi de Jonge za rozpoczęcie prac nad tym projektem
oraz za łaskawe zaproszenie mnie do prac nad jego dokończeniem. Doceniam także
ciężką pracę oraz niezliczone godziny, jakie poświęcił temu projektowi wspaniały zespół
wydawnictwa Pearson. Dziękuję Laurze Lewin za wciągnięcie mnie w prace nad tym
projektem, Olivii Basegio za koordynację prac, Sheri Cain za korektę tekstu oraz pomoc
w określeniu wizualnej reprezentacji materiału; naszym wspaniałym recenzentom
technicznym, Josephowi Annuziemu oraz Jacobowi Seidelinowi, którzy zapewnili
prawidłowe działanie wszystkich przykładów, jak również to, że wyjaśnienia przykładów
są przejrzyste i dokładne. Dziękuję Bobowi Russellowi z Octal Publishing, Inc. za jego
doskonałe umiejętności adiustacyjne oraz Julie Nahil z wydawnictwa Pearson za
koordynację prac podczas całego procesu produkcji książki.
Chciałbym także podziękować moim przyjaciołom projektantom z UltraCube
(Alanowi Lawrencowi, Jakowi Stuartowi, Candis Sorenson, Kaylee White oraz Jenowi
Lewisowi), którzy nieustannie przypominali mi, że życie jest tym, co staramy się w nim
osiągnąć, oraz aktualnemu zespołowi, w którym pracuję (Tracy Cox, Brettowi Woodowi,
Ryanowi Jensenowi, Remowi Galli, Ericowi Barnettowi oraz Chrisowi Lewisowi), którzy
przypomnieli mi, bym zawsze dbał o to, by robić to, co kocham.
— Phil
Spis treści
O autorach ........................................................................15
Wst(cid:246)p ...............................................................................17
Dlaczego powsta(cid:228)a ksi(cid:241)(cid:276)ka z recepturami i przyk(cid:228)adami
na temat jQuery? ........................................................................17
Dla kogo jest przeznaczona ta ksi(cid:241)(cid:276)ka? ..........................................18
Jak korzysta(cid:232) z tej ksi(cid:241)(cid:276)ki? ............................................................18
Struktura ksi(cid:241)(cid:276)ki ...........................................................................19
Zasoby dodatkowe ........................................................................19
Cz(cid:246)(cid:264)(cid:232) I Podstawy ...........................................................21
Rozdzia(cid:228) 1. Rozpoczynanie pracy z jQuery .............................................23
Receptura: Przedstawienie podstawowego sposobu u(cid:276)ycia jQuery .....23
Receptura: Stosowanie jQuery wraz z innymi bibliotekami .................26
Receptura: Okre(cid:264)lanie wersji biblioteki jQuery ..................................27
Receptura: Przegl(cid:241)danie tablic przy u(cid:276)yciu funkcji each() ..................28
Receptura: Operacje na tablicach przy u(cid:276)yciu funkcji map() ...............30
Receptura: Operowanie na tablicach elementów ..............................31
Receptura: Okre(cid:264)lanie po(cid:228)o(cid:276)enia elementu
przy u(cid:276)yciu funkcji index() .............................................................32
Receptura: Odnajdywanie elementów tablicy
przy u(cid:276)yciu funkcji grep() ..............................................................33
Receptura: Okre(cid:264)lanie wielko(cid:264)ci zbioru elementów
przy u(cid:276)yciu funkcji length() ...........................................................34
Receptura: Pobieranie atrybutów data- HTML5 .................................35
Receptura: Zapis danych przy u(cid:276)yciu funkcji data() ...........................36
Receptura: Usuwanie danych przy u(cid:276)yciu metody removeData() .........38
Receptura: Testowanie zmiennych i operowanie na nich ...................39
Receptura: Rozszerzanie obiektów przy u(cid:276)yciu funkcji extend() ..........41
Receptura: Serializacja danych z formularzy .....................................43
Receptura: Testowanie dost(cid:246)pnych mo(cid:276)liwo(cid:264)ci przegl(cid:241)darki .............44
Podsumowanie .............................................................................46
8 jQuery, jQuery UI oraz jQuery Mobile. Receptury
Rozdzia(cid:228) 2. Wybór elementów ..............................................................47
Receptura: (cid:227)(cid:241)czenie dwóch zbiorów elementów
przy u(cid:276)yciu funkcji add() ...............................................................47
Receptura: Precyzowanie zapytania przy u(cid:276)yciu funkcji filter() ............48
Receptura: Wybieranie elementów podrz(cid:246)dnych
przy u(cid:276)yciu funkcji find() oraz children() .........................................49
Receptura: Wybór elementów za pomoc(cid:241) funkcji has()
oraz sprawdzanie ich przy u(cid:276)yciu funkcji is() ..................................51
Receptura: Wybieranie pól formularzy przy wykorzystaniu
pseudoselektorów .......................................................................52
Receptura: Zagnie(cid:276)d(cid:276)anie selektorów .............................................53
Receptura: Emulacja selektora hover CSS .......................................54
Receptura: Wybieranie tekstu za pomoc(cid:241) funkcji contains() ..............55
Przyk(cid:228)ad: Wyró(cid:276)nianie pojedynczego s(cid:228)owa ......................................56
Receptura: Tworzenie w(cid:228)asnych selektorów .....................................57
Receptura: Ograniczanie zakresu kontekstu wyboru .........................59
Podsumowanie .............................................................................60
Rozdzia(cid:228) 3. Modyfikowanie stron ..........................................................61
Receptura: Dodawanie klas ...........................................................61
Przyk(cid:228)ad: Usuwanie klas ................................................................62
Receptura: Generacja nazw klas .....................................................63
Receptura: Zmiana w(cid:228)a(cid:264)ciwo(cid:264)ci i atrybutów .....................................65
Receptura: Zmiana kodu HTML wewn(cid:241)trz elementu .........................66
Receptura: Dodawanie zawarto(cid:264)ci przy u(cid:276)yciu funkcji append()
oraz appendTo() ..........................................................................67
Przyk(cid:228)ad: Dodawanie wyniku funkcji ................................................68
Receptura: Dodawanie tre(cid:264)ci przy u(cid:276)yciu funkcji prepend()
oraz prependTo() .........................................................................70
Receptura: Dynamiczna generacja kodu HTML
przy wykorzystaniu jQuery .............................................................71
Receptura: Do(cid:228)(cid:241)czanie i od(cid:228)(cid:241)czanie elementów ................................72
Receptura: Kopiowanie elementów przy u(cid:276)yciu funkcji clone() ...........73
Receptura: Wstawianie elementów w okre(cid:264)lonym miejscu ................75
Przyk(cid:228)ad: Przesuwanie elementów w gór(cid:246) i w dó(cid:228) listy .......................76
Receptura: Usuwanie elementów ....................................................78
Receptura: Zagnie(cid:276)d(cid:276)anie elementów i usuwanie elementów
otaczaj(cid:241)cych ...............................................................................80
Podsumowanie .............................................................................83
Rozdzia(cid:228) 4. Odbieranie zdarze(cid:254) i odpowiadanie na nie ...........................85
Receptura: Obs(cid:228)uga zdarze(cid:254) zwi(cid:241)zanych z mysz(cid:241) .............................85
Przyk(cid:228)ad: Rysowanie na elemencie canvas ......................................87
Receptura: Obs(cid:228)uga zdarze(cid:254) klawiatury ...........................................89
Receptura: Obs(cid:228)uga zdarze(cid:254) formularzy ...........................................90
Spis tre(cid:264)ci 9
Receptura: Obs(cid:228)uga zdarze(cid:254) zwi(cid:241)zanych z przewijaniem ...................92
Receptura: Dodawanie g(cid:228)ównych procedur obs(cid:228)ugi zdarze(cid:254)
przy u(cid:276)yciu funkcji live() oraz die() .................................................93
Receptura: Przekazywanie zdarze(cid:254) do konkretnego elementu
nadrz(cid:246)dnego przy u(cid:276)yciu funkcji delegate() ....................................95
Receptura: Zmiana kontekstu wykonania funkcji
przy u(cid:276)yciu funkcji proxy() .............................................................98
Podsumowanie .............................................................................99
Rozdzia(cid:228) 5. Komunikacja z serwerem ..................................................101
Receptura: Przygotowanie testowego serwera z u(cid:276)yciem Node.js .....101
Receptura: Generacja (cid:276)(cid:241)dania GET ...............................................103
Receptura: Bezpo(cid:264)rednie wczytywanie kodu HTML .......................104
Receptura: Obs(cid:228)uga (cid:276)(cid:241)da(cid:254) przy u(cid:276)yciu obietnic ..............................105
Receptura: Obs(cid:228)uga b(cid:228)(cid:246)dów serwera .............................................107
Receptura: Obs(cid:228)uga problemów z odnalezieniem strony ..................108
Receptura: Obs(cid:228)uga przekierowa(cid:254) .................................................110
Receptura: Okre(cid:264)lanie czasu oczekiwania na odpowied(cid:274) ................111
Receptura: Przekazywanie nag(cid:228)ówków HTTP ..................................112
Przyk(cid:228)ad: Weryfikacja danych z formularza po stronie serwera .........113
Receptura: Wczytywanie kodu XML ...............................................115
Receptura: Obs(cid:228)uga zdarze(cid:254) AJAX .................................................116
Receptura: Czytanie danych JSONP z zewn(cid:246)trznego serwera ...........117
Podsumowanie ...........................................................................119
Cz(cid:246)(cid:264)(cid:232) II Interfejs u(cid:276)ytkownika .......................................121
Rozdzia(cid:228) 6. Interakcja z u(cid:276)ytkownikiem ..............................................123
Pobieranie i instalacja jQuery UI ...................................................123
Receptura: Przeci(cid:241)ganie elementów .............................................124
Okre(cid:264)lanie postaci komponentów draggable ............................125
Okre(cid:264)lanie opcji komponentów draggable ................................126
Obs(cid:228)uga zdarze(cid:254) komponentów draggable ................................129
Wywo(cid:228)ywanie metod komponentów draggable ...........................130
Receptura: Upuszczanie elementów ..............................................130
Okre(cid:264)lanie stylu komponentów droppable ................................132
Okre(cid:264)lanie opcji komponentów droppable ................................132
Przechwytywanie zdarze(cid:254) komponentów droppable ...................132
Wywo(cid:228)ywanie metod komponentów droppable ..........................134
Receptura: Zmiana kolejno(cid:264)ci elementów
przy wykorzystaniu elementów sortowalnych ................................135
Okre(cid:264)lanie stylów elementów sortowalnych ..............................136
Okre(cid:264)lanie opcji elementów sortowalnych ................................136
Obs(cid:228)uga zdarze(cid:254) elementów sortowalnych ...............................136
Wywo(cid:228)ywanie metod elementów sortowalnych ..........................140
10 jQuery, jQuery UI oraz jQuery Mobile. Receptury
Przyk(cid:228)ad: Sortowanie elementów tworz(cid:241)cych struktur(cid:246) drzewiast(cid:241) ...141
Receptura: Zaznaczanie elementów listy wypunktowanej ................142
Style komponentów selectable ................................................144
Okre(cid:264)lanie opcji komponentów selectable ................................144
Obs(cid:228)uga zdarze(cid:254) komponentów selectable ...............................144
Wywo(cid:228)ywanie metod komponentów selectable ..........................146
Przyk(cid:228)ad: Zaznaczanie elementów w strukturze drzewiastej .............146
Receptura: Zmiana wielko(cid:264)ci elementów .......................................148
Okre(cid:264)lanie wygl(cid:241)du elementów o zmiennej wielko(cid:264)ci ................149
Okre(cid:264)lanie opcji elementów o zmiennej wielko(cid:264)ci .....................149
Obs(cid:228)uga zdarze(cid:254) elementów o zmiennej wielko(cid:264)ci ....................150
Wywo(cid:228)ywanie metod elementów o zmiennej wielko(cid:264)ci ...............151
Podsumowanie ...........................................................................152
Rozdzia(cid:228) 7. Interakcja z wid(cid:276)etami .....................................................153
Receptura: Grupowanie tre(cid:264)ci przy u(cid:276)yciu akordeonu ......................153
Okre(cid:264)lanie wygl(cid:241)du akordeonu ................................................154
Okre(cid:264)lanie opcji akordeonu ....................................................155
Obs(cid:228)uga zdarze(cid:254) akordeonu ....................................................157
Metody .................................................................................158
Receptura: Sugerowanie warto(cid:264)ci
przy u(cid:276)yciu wid(cid:276)etu automatycznego uzupe(cid:228)niania ........................159
Okre(cid:264)lanie wygl(cid:241)du wid(cid:276)etu automatycznego uzupe(cid:228)niania ........161
Okre(cid:264)lanie opcji wid(cid:276)etu automatycznego uzupe(cid:228)niania .............161
Obs(cid:228)uga zdarze(cid:254) wid(cid:276)etu automatycznego uzupe(cid:228)niania .............161
Wywo(cid:228)ywanie metod wid(cid:276)etu automatycznego uzupe(cid:228)niania .......164
Receptura: Przekszta(cid:228)canie elementów w przyciski .........................165
Okre(cid:264)lanie wygl(cid:241)du przycisków ................................................166
Okre(cid:264)lanie opcji przycisków ....................................................167
Obs(cid:228)uga zdarze(cid:254) przycisków ....................................................167
Metody .................................................................................168
Przyk(cid:228)ad: Okre(cid:264)lanie wygl(cid:241)du przycisków opcji
przy u(cid:276)yciu wid(cid:276)etu buttonset .....................................................168
Receptura: Wybór dat przy u(cid:276)yciu wid(cid:276)etu datepicker .....................169
Okre(cid:264)lanie wygl(cid:241)du kalendarza ...............................................170
Okre(cid:264)lanie opcji kalendarza ....................................................171
Obs(cid:228)uga zdarze(cid:254) kalendarza ...................................................176
Wywo(cid:228)ywanie metod kalendarza ..............................................177
Receptura: Przyci(cid:241)ganie uwagi przy u(cid:276)yciu okien dialogowych ..........178
Okre(cid:264)lanie wygl(cid:241)du okna dialogowego .....................................179
Okre(cid:264)lanie opcji okna dialogowego ..........................................180
Obs(cid:228)uga zdarze(cid:254) generowanych przez okna dialogowe ...............181
Wywo(cid:228)ywanie metod okien dialogowych ....................................184
