Table Of Content

Tytuł 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