Darmowy fragment publikacji:
Tytuł oryginału: jQuery Mobile
Tłumaczenie: Radosław Meryk
ISBN: 978-83-246-4772-9
© 2012 Helion S.A.
Authorized Polish translation of the English edition of jQuery Mobile 9781449306687
© 2011 Jonathan Reid
This translation is published and sold by permission of O’Reilly Media, Inc.,
which owns or controls 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.
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: 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/jquemo.zip
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/jquemo
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
Przedmowa .................................................................................................7
1. Poznajemy jQuery Mobile ............................................................. 13
13
14
15
20
Ogólny opis biblioteki jQuery Mobile
Jak dziaäa jQuery Mobile?
Tworzymy pierwszñ aplikacjö jQuery Mobile
Jak to dziaäa: niestandardowy selektor jqmData()
Strony
Strony wewnötrzne
Strony zewnötrzne
Jak to dziaäa? Inicjalizacja stron w jQuery Mobile
Zdarzenia zwiñzane z ukrywaniem i wyĈwietlaniem stron
2. Struktura aplikacji i sposoby nawigacji ........................................ 21
21
22
24
27
29
32
33
35
36
Okna dialogowe
Nawigacja i historia
PrzejĈcia
Jak to dziaäa? Animacje w aplikacjach jQuery Mobile
Jak to dziaäa? Wtyczki i widĔety jQuery
Listy
3. Elementy stron ...............................................................................39
39
40
40
43
52
54
54
57
Proste listy
Zaawansowane listy
Jak to dziaäa? Aktualizowanie list
Paski nawigacji
Pozycjonowanie nagäówka i stopki
Paski narzödzi
3
Przyciski
Grupowanie przycisków
Ikony przycisków
Elementy formularzy
Dostöp do elementów formularzy za pomocñ JavaScript
Pola wyboru i przeäñczniki
Przeäñczniki dwustanowe
Pola i obszary tekstowe
Pola wyszukiwania
Menu select
Suwaki
Siatki ukäadu dokumentu
59
60
62
64
65
65
67
69
69
71
75
77
Motywy i próbki
4. Motywy w jQuery Mobile ............................................................. 81
81
91
95
Jak to dziaäa? Personalizacja próbek
Motywy list
Metody biblioteki jQuery Mobile
changePage
pageLoading
silentScroll
addResolutionBreakpoints
Zdarzenia
Selektory CSS
5. API jQuery Mobile ..........................................................................97
97
97
98
99
99
99
99
102
103
104
104
104
105
108
108
110
111
Zdarzenia zwiñzane z dotykiem
Zdarzenia inicjalizacji
Zdarzenia zwiñzane z ukrywaniem i wyĈwietlaniem stron
Zdarzenia zwiñzane z przewijaniem dokumentu
Zdarzenia zwiñzane ze zmianñ orientacji urzñdzenia
Dostöpne opcje
Modyfikowanie opcji za pomocñ zdarzenia mobileinit
Jak to dziaäa? Przestrzenie nazw atrybutów data-
Konfigurowanie biblioteki jQuery Mobile
API responsywnego ukäadu dokumentu
4
_
Spis treļci
6.
Metoda initMainPage
Metoda initSettings
Metoda initDetailPage
Okno dialogowe do wyĈwietlania komunikatów o bäödach
jQuery Mobile w akcji ...................................................................113
113
Strony aplikacji
Inicjalizacja aplikacji
116
118
123
124
124
125
127
127
128
133
jqmTweet — pierwsza odsäona
Ulepszanie interfejsu uĔytkownika
Usprawnienia CSS
Usprawnienia interakcji
PodejĈcie ogólne
Skorowidz ............................................................................................... 135
Spis treļci
_
5
6
_
Spis treļci
ROZDZIAĤ 3.
Elementy stron
Podobnie jak jQuery UI, biblioteka jQuery Mobile oferuje róĔnorodne elementy
interfejsu uĔytkownika. Wiele z nich bazuje na popularnych elementach inter-
fejsu. Tworzy siö je w standardowy dla jQuery Mobile sposób: najpierw na-
leĔy napisaè semantyczny kod, a nastöpnie dodaè do elementu atrybut data-.
Po inicjalizacji jQuery Mobile ulepszy element w miarö potrzeb.
Jak to dziaĥa? Wtyczki i widŜety jQuery
jQuery Mobile intensywnie korzysta z dwóch standardowych wzorców
projektowych biblioteki jQuery: wtyczek i widĔetów.
Mechanizm wtyczek jQuery to sposób na rozszerzanie samej biblioteki
jQuery. Dziöki temu mechanizmowi uĔytkownik moĔe dodawaè wäasne
metody. Metody te mogñ byè wywoäywane w identyczny sposób jak wszyst-
kie pozostaäe metody jQuery. Mechanizm wtyczek szczegóäowo omówiono
w dokumentacji biblioteki jQuery. Osobom nieznajñcym wzorca wtyczek
jQuery gorñco polecam przestudiowanie tego tematu i korzystanie z mecha-
nizmu wszödzie tam, gdzie jest to moĔliwe. OsobiĈcie uĔywam wtyczek jQu-
ery na co dzieþ, wykonujñc swoje zadania programistyczne. W kontekĈcie
aplikacji jQuery Mobile wzorzec ten oferuje uĔyteczny mechanizm enkap-
sulacji aplikacji, funkcji inicjalizacji stron oraz menedĔerów danych.
Mechanizm widĔetów biblioteki jQuery jest nieco bardziej skomplikowany
od mechanizmu wtyczek, ale równieĔ daje olbrzymie moĔliwoĈci. WidĔety
jQuery tworzy siö za pomocñ klasy-fabryki jQuery.widget. Podobnie jak
w przypadku wtyczek, w rezultacie otrzymujemy metodö jQuery, którñ moĔ-
na wywoäaè dla dowolnego selektora. Jednñ z gäównych korzyĈci stosowania
39
fabryki widĔetów jest zdolnoĈè do utrzymania stanu nawet po zakoþczeniu
dziaäania wynikowej metody. Fabryka umoĔliwia dziaäanie mechanizmu
odĈmiecania, który zapobiega „wyciekom pamiöci” w przeglñdarkach.
Dla przykäadu rozwaĔmy jeden z moich ulubionych widĔetów UI biblioteki
jQuery — akordeon. W celu stworzenia akordeonu najpierw naleĔy napisaè
kod strony, a nastöpnie zastosowaè do niego metodö jQuery.accordion(). Pod-
czas procesu inicjalizacji widĔet akordeonu ulepsza kod, tworzy zdarzenia,
do których moĔna siö dowiñzywaè, oraz udostöpnia metody, które moĔna
wykorzystaè w celu zapewnienia interakcji i modyfikowania wynikowego
„akordeonu”.
Brzmi znajomo? Powinno, bowiem to jest dokäadnie to, co wykonuje biblio-
teka jQuery Mobile. Wiele elementów stron, które bödziemy poznawaè, two-
rzy siö tak, jak widĔety jQuery. Sposób postöpowania z nimi jest identyczny
jak z widĔetami jQuery.
Listy
Biblioteka jQuery Mobile pozwala na tworzenie wizualnie sformatowanych
list, które sñ bardzo podobne do tych wystöpujñcych w aplikacjach natywnych.
Proste listy
Biblioteka jQuery Mobile pozwala na ulepszanie list zarówno ponumerowa-
nych, jak i nieponumerowanych. Wystarczy dodaè do listy atrybut datarole=
´ listview , a resztñ zajmie siö jQuery Mobile (listing 3.1, rysunek 3.1).
Listing 3.1. Prosta lista
h3 Lista nieponumerowana /h3
ul data-role= listview
li Element /li
li Element /li
li Element /li
/ul
h3 Lista ponumerowana /h3
ol data-role= listview
li Element /li
li Element /li
li Element /li
/ol
40
_
Rozdziaĥ 3. Elementy stron
Rysunek 3.1. Prosta lista
Listy zĥoŜone z przycisków
DomyĈlnie elementy list nie majñ wäaĈciwoĈci interaktywnych: klikniöcie
lub przeciñgniöcie elementu listy nie przynosi Ĕadnego efektu. W interfejsach
uĔytkownika aplikacji mobilnych powszechnie stosuje siö listy zäoĔone
z przycisków, które moĔna klikaè. Aby uzyskaè taki efekt za pomocñ jQuery
Mobile, naleĔy doäñczyè znaczniki zakotwiczenia wewnñtrz kodu elementów
listy (listing 3.2).
Listing 3.2. Listy zäoĔone z przycisków
h3 Lista nieponumerowana /h3
ul data-role= listview
li a href= # Element /a /li
li a href= # Element /a /li
li a href= # Element /a /li
/ul
h3 Lista ponumerowana /h3
ol data-role= listview
li a href= # Element /a /li
li a href= # Element /a /li
li a href= # Element /a /li
/ol
Listy
_
41
Teraz elementy list moĔna klikaè (patrz rysunek 3.2) (oczywiĈcie w tym przy-
käadzie äñcza prowadzñ donikñd; w peäni funkcjonalny przykäad Czytelnik
znajdzie w dalszej czöĈci ksiñĔki).
Rysunek 3.2. Lista z przyciskami
Separatory list
Bardzo czösto listy sñ rozdzielane nagäówkami sekcji. Tego rodzaju efekt
moĔna uzyskaè za pomocñ jQuery Mobile poprzez zastosowanie atrybutu
data-role= list-divider do dowolnego elementu listy, który ma peäniè rolö
separatora. Sposób uĔycia takiego separatora pokazano na listingu 3.3, na-
tomiast efekty jego zastosowania na rysunku 3.3.
Listing 3.3. Listy z separatorami
h3 Lista nieponumerowana /h3
ul data-role= listview
li data-role= divider Rzeczy /li
li a href= # Element /a /li
li a href= # Element /a /li
li a href= # Element /a /li
li data-role= divider Przedmioty /li
li a href= # Element /a /li
li a href= # Element /a /li
li data-role= divider Róĝne /li
li a href= # Element /a /li
li a href= # Element /a /li
42
_
Rozdziaĥ 3. Elementy stron
Rysunek 3.3. Listy z separatorami
li a href= # Element /a /li
li a href= # Element /a /li
li a href= # Element /a /li
/ul
h3 Lista ponumerowana /h3
ol data-role= listview
li data-role= divider Grupa /li
li a href= # Element /a /li
li a href= # Element /a /li
li a href= # Element /a /li
li data-role= divider Grupa /li
li a href= # Element /a /li
li a href= # Element /a /li
li data-role= divider Grupa /li
li a href= # Element /a /li
li a href= # Element /a /li
li a href= # Element /a /li
li a href= # Element /a /li
li a href= # Element /a /li
/ol
Zaawansowane listy
Listy sñ bardzo czösto wykorzystywanym elementem interfejsu uĔytkownika
w aplikacjach mobilnych. Z tego powodu biblioteka jQuery Mobile pozwala
na generowanie popularnych modyfikacji za pomocñ niewielkich zmian
w kodzie strony.
Listy
_
43
Listy zagnieŜdŜone
jQuery Mobile przetwarza zagnieĔdĔone listy i na tej podstawie tworzy inte-
raktywne widoki, w które uĔytkownik moĔe siö zagäöbiaè, klikajñc pojedyncze
elementy. Pierwszy z widoków skäada siö z elementów listy najwyĔszego
poziomu. Klikniöcie jednego z tych elementów powoduje wyĈwietlenie listy
podrzödnej itd. Kod takiej listy zamieszczono na listingu 3.4. Wynikowñ listö
pokazano na rysunkach 3.4, 3.5 i 3.6. jQuery Mobile automatycznie wstawia
przycisk Wstecz oraz zarzñdza mapowaniem adresów URL i przejĈciami
pomiödzy stronami.
Listing 3.4. Listy zagnieĔdĔone
h3 Przykïad listy zagnieĝdĝonej /h3
ul data-role= listview
li Restauracje
ul
li francuskie
ul
li Le Central /li
li Bistro Vandome /li
li Antoine /li
/ul
/li
li cajun i kreolskie
ul
li Bayou Bob s /li
li Pappadeaux /li
li Lucile s /li
/ul
/li
li amerykañskie
ul
li Dixon /li
li Vesta Dipping Grill /li
li Steuben /li
/ul
/li
/ul
/li
/ul
44
_
Rozdziaĥ 3. Elementy stron
Rysunek 3.4. Lista zagnieĔdĔona (strona 1)
Rysunek 3.5. Lista zagnieĔdĔona (strona 2)
Listy
_
45
Rysunek 3.6. Lista zagnieĔdĔona (strona 3)
Listy zĥoŜone z przycisków dzielonych
Biblioteka jQuery Mobile pozwala na tworzenie list zäoĔonych z przycisków
dzielonych: przycisków skäadajñcych siö z dwóch róĔnych aktywnych ob-
szarów. Gäówny obszar po lewej stronie przycisku jest szerszy, natomiast
obszar po stronie prawej jest wöĔszy. Przyciski dzielone sñ powszechnie sto-
sowane w interfejsach uĔytkownika aplikacji mobilnych. Dziöki nim jeden
element listy moĔe speäniaè dwie róĔne funkcje. MoĔna to wykorzystaè na
przykäad do podglñdu szczegóäów elementu listy lub do skonfigurowania
elementu w okreĈlony sposób albo — tak jak w przypadku kodu z listingu 3.5
— do przeglñdania szczegóäów restauracji lub dokonywania rezerwacji.
Aby stworzyè przycisk dzielony, naleĔy dodaè dwa znaczniki zakotwiczenia
do elementu listy.
Listing 3.5. Tworzenie przycisków dzielonych
li francuskie
ul
li
a href= lecentral.html Le Central /a
a href= reservations.php?restaurant=903 Zarezerwuj stolik /a
/li
li
a href= bistrovandome.html Bistro Vandome /a
46
_
Rozdziaĥ 3. Elementy stron
a href= reservations.php?restaurant=904 Zarezerwuj stolik /a
/li
li
a href= antoines.html Antoine /a
a href= reservations.php?restaurant=905 Zarezerwuj stolik /a
/li
/ul
/li
jQuery Mobile automatycznie przypisuje pierwszy znacznik zakotwiczenia
jako gäówne äñcze przycisku oraz ostatni znacznik zakotwiczenia jako mniej-
szy obszar z prawej strony. Przykäad zaprezentowano na rysunku 3.7.
Rysunek 3.7. Lista z przyciskami dzielonymi
Z elementem listy moĔna powiñzaè wiöcej niĔ dwa znaczniki zakotwiczenia,
ale jQuery Mobile wykorzysta tylko pierwszy i ostatni. Pozostaäe znaczniki
zakotwiczenia stanñ siö czöĈciñ gäównego przycisku tak jak zwykäe äñcza.
Miniaturki i ikony
MoĔna teĔ okreĈliè obrazek miniaturki bñdĒ ikony dla kaĔdego elementu listy.
W tym celu naleĔy doäñczyè w kodzie strony odpowiednie odwoäanie do ob-
razka (listing 3.6). Miniaturki i obrazki sñ wyĈwietlane po lewej stronie elementu
listy, natomiast ikony sñ mniejsze i sñ wyrównywane w pionie do Ĉrodka
elementu listy. Biblioteka jQuery Mobile udostöpnia klasö CSS, którñ moĔna
zastosowaè do obrazka w celu wskazania, Ĕe to jest ikona (rysunek 3.8), a nie
miniaturka (rysunek 3.9).
Listy
_
47
Listing 3.6. Ikony i miniaturki na liĈcie
ul data-role= listview
li Restauracje
ul
li
a href= #
img src= ../images/icons/icon-french.png
alt= Ikona francuskiej flagi
class= ui-li-icon
francuskie
/a
ul
li
a href= lecentral.html
img src= ../images/logo-generic.png alt= Logo Le Central
Le Central
/a
a href= reservations.php?restaurant=403 Zarezerwuj stolik /a
/li
li
a href= bistrovandome.html
img src= ../images/logo-generic.png alt= Logo Bistro
´Vandome
Bistro Vandome
/a
a href= reservations.php?restaurant=404 Zarezerwuj stolik
/a
/li
li
a href= antoines.html
img src= ../images/logo-generic.png alt= Logo
´restauracji Antoine
Antoine
/a
a href= reservations.php?restaurant=405 Zarezerwuj
´stolik /a
/li
/ul
/li
li
a href= #
img src= ../images/icons/icon-cajun.png
alt= Ikona flagi Cajun
class= ui-li-icon
cajun
/a
ul
li Bayou Bob s /li
li Pappadeaux /li
li Lucile s /li
/ul
/li
48
_
Rozdziaĥ 3. Elementy stron
Rysunek 3.8. Lista z ikonami
li
a href= #
img src= ../images/icons/icon-american.png
alt= Ikona flagi amerykañskiej
class= ui-li-icon
amerykañkie
/a
ul
li Dixon s /li
li Vesta Dipping Grill /li
li Steuben s /li
/ul
/li
/ul
/li
/ul
W czasie kiedy powstawaäa niniejsza ksiñĔka, w jQuery Mobile
ikony i miniaturki byäy zawarte wewnñtrz znaczników kotwicy
w obröbie elementów listy nawet wtedy, kiedy element listy nie
miaä byè aktywny1. Bez znacznika kotwicy formatowanie nie
bödzie poprawne. Zamieszczenie znacznika kotwicy, który nie
jest semantycznie poprawny, nie stanowi problemu, poniewaĔ
jQuery Mobile ignoruje wszystkie äñcza do # .
1 Element aktywny to taki, który moĔna klikaè — przyp. täum.
Listy
_
49
Rysunek 3.9. Lista z miniaturkami
Baloniki liczników
Baloniki liczników to umieszczone na listach ikony zawierajñce informacje
o liczbie elementów z okreĈlonej grupy na liĈcie. Aby umieĈciè ikonö licznika
za pomocñ jQuery Mobile, naleĔy doäñczyè w kodzie strony klasö ui-li-count,
tak jak pokazano na listingu 3.7. Efekt jest widoczny na rysunkach 3.10,
3.11 i 3.12.
Listing 3.7. Baloniki liczników elementów list
ul data-role= listview
li data-role= divider Elementy span class= ui-li-count 10 /span /li
li a href= # Restauracje /a span class= ui-li-count 9 /span
ul
li
a href= #
img src= ../images/icons/icon-french.png
alt= Ikona francuskiej flagi
class= ui-li-icon
francuskie
span class= ui-li-count 3 /span
/a
ul
li
a href= lecentral.html
50
_
Rozdziaĥ 3. Elementy stron
img src= ../images/logo-generic.png alt= Logo Le
´Central
Le Central
/a
span class= ui-li-count 9 /span
a href= reservations.php?restaurant=403 Zarezerwuj
´stolik /a
/li
li
a href= bistrovandome.html
img src= ../images/logo-generic.png alt= Logo
´Bistro Vandome
Bistro Vandome
/a
a href= reservations.php?restaurant=404 Zarezerwuj
´stolik /a
/li
li
a href= antoines.html
img src= ../images/logo-generic.png alt= Logo
´restauracji Antoine
Antoine
/a
a href= reservations.php?restaurant=405 Zarezerwuj
´stolik /a
/li
/ul
/li
li
a href= #
img src= ../images/icons/icon-cajun.png
alt= Ikona Cajun
class= ui-li-icon
cajun
span class= ui-li-count 3 /span
/a
ul
li Bayou Bob s /li
li Pappadeaux /li
li Lucile s /li
/ul
/li
li
a href= #
img src= ../images/icons/icon-american.png
alt= Ikona flagi amerykañskiej
class= ui-li-icon
amerykañkie
span class= ui-li-count 3 /span
/a
ul
li Dixon s /li
Listy
_
51
li Vesta Dipping Grill /li
li Steuben s /li
/ul
/li
/ul
/li
/ul
W czasie kiedy powstawaäa niniejsza ksiñĔka, liczniki dziaäaäy
tylko wtedy, kiedy zostaäy umieszczone wewnñtrz znaczników
kotwicy lub wewnñtrz separatorów list (elementów list z atry-
butami datarole= divider ). W przyciskach dzielonych liczniki
nie mogäy byè umieszczane w ostatnim znaczniku kotwicy.
Rysunek 3.10. Baloniki liczników na listach (strona 1)
Jak to dziaĥa? Aktualizowanie list
Listy naleĔñ do najbardziej zäoĔonych elementów biblioteki jQuery Mobile.
JednoczeĈnie naleĔñ do elementów najczöĈciej wykorzystywanych w apli-
kacjach.
52
_
Rozdziaĥ 3. Elementy stron
Rysunek 3.11. Baloniki liczników na listach (strona 2)
Rysunek 3.12. Baloniki liczników na listach (strona 3)
Listy jQuery Mobile tworzy siö za pomocñ widĔetu listview. Podobnie jak
inne widĔety jQuery, listview udostöpnia metody, które moĔna wywoäy-
waè po inicjalizacji. W czasie kiedy powstawaäa niniejsza ksiñĔka, widĔet
listview udostöpniaä metodö refresh säuĔñcñ do aktualizowania listy. Metoda
Listy
_
53
ta najbardziej przydaje siö w sytuacji, gdy trzeba dodaè lub usunñè elementy
z wczeĈniej zainicjowanej listy (listing 3.8).
Listing 3.8. Aktualizowanie listy — dodawanie nowych elementów
script
// Zainicjowanie obiektu listy
$( ul.twitter-feed ).listview();
var updateTweets = function() {
// Pobranie nowych tweetów, dodanie ich na początek listy
// i odĞwieĪenie listy
var strNewTweetsHtml = getNewTweets();
$( ul.twitter-feed ).prepend(strNewTweetsHtml).listview( refresh );
}
/script
PowyĔszy przykäad pokazuje jednñ z zalet wzorca widĔetów jQuery. Jest
niñ doäñczanie metod do elementów modelu DOM. Dziöki temu metody te
moĔna wywoäywaè po inicjalizacji.
Paski narzýdzi
Biblioteka jQuery Mobile pozwala na tworzenie kilku róĔnych typów pasków
narzödzi. W pierwszym z prezentowanych przykäadów spotkaliĈmy nagäó-
wek i stopkö. jQuery Mobile umoĔliwia takĔe tworzenie pasków nawigacji.
Paski nawigacji
W interfejsie uĔytkownika aplikacji mobilnych paski nawigacji zwykle skäa-
dajñ siö ze zbioru przycisków pozwalajñcych uĔytkownikom na przemiesz-
czanie siö pomiödzy widokami aplikacji. Paski nawigacji moĔna umieszczaè
wewnñtrz nagäówków, stopek lub obszarów treĈci widoku strony jQuery
Mobile. W zaleĔnoĈci od miejsca jQuery Mobile odpowiednio formatuje pasek
nawigacji.
Aby oznaczyè pasek nawigacji, naleĔy dodaè atrybut data-role= navigation
do elementu poziomu bloku, na przykäad elementu HTML5 nav. Znaczniki
kotwic zawarte w oznaczonym elemencie nawigacji sñ sformatowane jako
grupa przycisków. jQuery Mobile automatycznie zarzñdza zmianami stanów
aktywnoĈci i nieaktywnoĈci przycisków (listing 3.9). Efekty zaprezentowano
na rysunku 3.13.
54
_
Rozdziaĥ 3. Elementy stron
Listing 3.9. Prosty pasek nawigacji
section id= page1 data-role= page
header data-role= header
h1 jQuery Mobile /h1
nav data-role= navbar
a href= # class= ui-btn-active Pierwszy /a
a href= # Drugi /a
a href= # Trzeci /a
a href= # Czwarty /a
a href= # PiÈty /a
nav
/header
div class= content data-role= content
h3 TreĂÊ /h3
/div
/div
footer data-role= footer
h3 Helion /h3
/footer
/section
Rysunek 3.13. Prosty pasek nawigacji
Klasa CSS ui-btn-active okreĈla stan aktywnoĈci przycisków
nawigacji.
Paski narzýdzi
_
55
jQuery Mobile pozwala takĔe na tworzenie przycisków o równej szerokoĈci.
Aby uzyskaè taki efekt, naleĔy zamknñè znaczniki kotwicy wewnñtrz listy
nieponumerowanej (listing 3.10). Efekty zaprezentowano na rysunku 3.14.
Listing 3.10. Sformatowany pasek nawigacji
nav data-role= navbar
ul
li a href= # class= ui-btn-active Pierwszy /a /li
li a href= # Drugi /a /li
li a href= # Trzeci /a /li
li a href= # Czwarty /a /li
li a href= # PiÈty /a /li
/ul
nav
Rysunek 3.14. Sformatowany pasek nawigacji
Biblioteka jQuery Mobile pozwala na umieszczenie do piöciu elementów na
sformatowanym pasku nawigacji. W przypadku próby wstawienia wiökszej
liczby elementów jQuery Mobile rozmieĈci je w dwóch kolumnach. Przy-
käad zaprezentowano na listingu 3.11, a efekty pokazano na rysunku 3.15.
Listing 3.11. Pasek nawigacji z przyciskami w dwóch kolumnach
nav data-role= navbar
ul
li a href= # class= ui-btn-active Pierwszy /a /li
li a href= # Drugi /a /li
56
_
Rozdziaĥ 3. Elementy stron
li a href= # Trzeci /a /li
li a href= # Czwarty /a /li
li a href= # PiÈty /a /li
li a href= # Szósty /a /li
/ul
nav
Rysunek 3.15. Pasek nawigacji z przyciskami w dwóch kolumnach
Pozycjonowanie nagĥówka i stopki
Biblioteka jQuery Mobile oferuje trzy sposoby dynamicznego pozycjonowa-
nia pasków narzödzi nagäówka i stopki:
Standardowy
Paski narzödzi sñ rozmieszczone zgodnie z „przepäywem dokumentu”.
Przewijanie dokumentu powoduje znikanie i pojawianie siö pasków
narzödzi na widocznej czöĈci strony. To jest opcja domyĈlna.
Ustalony
Nagäówek i stopka sñ umieszczone w górnej i dolnej czöĈci widocznego
fragmentu strony. Pozostajñ widoczne przez caäy czas, niezaleĔnie od
pozycji przeglñdanego dokumentu. Klikniöcie ekranu powoduje ich
powrót na standardowñ pozycjö w ukäadzie dokumentu.
Paski narzýdzi
_
57
Peänoekranowy
Nagäówek i stopka sñ umieszczone wewnñtrz widocznego fragmentu
strony i pozostajñ widoczne przez caäy czas, niezaleĔnie od pozycji prze-
glñdanego dokumentu. Klikniöcie ekranu powoduje ukrycie nagäówka
i stopki. W istocie nagäówek i stopka sñ usuwane z dokumentu i dy-
namicznie pozycjonowane w dolnej i górnej czöĈci widocznego frag-
mentu strony.
Aby stworzyè nagäówek i stopkö o ustalonej pozycji, naleĔy zastosowaè dla
nich atrybut data-position= fixed (listing 3.12).
Listing 3.12. Nagäówek i stopka o ustalonej pozycji
section id= page1 data-role= page
header data-role= header data-position= fixed
h1 jQuery Mobile /h1
/header
div class= content data-role= content
h3 Obszar treĂci /h3
/div
/div
footer data-role= footer data-position= fixed
h3 Helion /h3
/footer
/section
Aby stworzyè nagäówek i stopkö w trybie peänoekranowym, naleĔy za-
stosowaè atrybut data-fullscreen= true do elementu oznaczonego atrybutem
data-role= page oraz równoczeĈnie zastosowaè atrybut dataposition= fixed
do elementów nagäówka i stopki:
section id= page1 data-role= page data-fullscreen= true
header data-role= header data-position= fixed
h1 jQuery Mobile /h1
/header
div class= content data-role= content
h3 Obszar treĂci /h3
/div
/div
footer data-role= footer data-position= fixed
h3 Helion /h3
/footer
/section
Dynamicznie pozycjonowane paski narzödzi zasäaniajñ treĈè, natomiast one
same pozostajñ widoczne (przykäad pokazano na rysunku 3.16).
58
_
Rozdziaĥ 3. Elementy stron
Rysunek 3.16. Nagäówek i stopka z dynamicznie ustalonñ pozycjñ
Przyciski
Biblioteka jQuery Mobile automatycznie tworzy stylizowane przyciski na
podstawie zwykäych przycisków formularzy niezaleĔnie od tego, czy zostanñ
one stworzone za pomocñ znaczników input, czy button. jQuery Mobile po-
trafi takĔe tworzyè przyciski ze zwykäych äñczy (znaczników kotwicy). Wy-
starczy, Ĕe zastosujemy do nich atrybut data-role= button .
DomyĈlnie przyciski sñ rozciñgane do szerokoĈci elementu-kontenera. Po-
przez zastosowanie atrybutu data-inline= true do przycisku moĔna tworzyè
przyciski wstawiane o wielkoĈci dostosowanej do treĈci, która jest na nich
umieszczona (listing 3.13, rysunek 3.17).
Listing 3.13. Przyciski, przyciski, komu przyciski?
section id= page1 data-role= page
header data-role= header h1 jQuery Mobile /h1 /header
div class= content data-role= content
h3 Przyciski /h3
a href= # data-role= button Przycisk na podstawie ïÈcza /a
input type= submit value= przeĂlij data-inline= true
input type= reset value= zresetuj data-inline= true
/div
/div
footer data-role= footer h1 Helion /h1 /footer
/section
Przyciski
_
59
Rysunek 3.17. Przyciski, przyciski, komu przyciski?
W czasie kiedy powstawaäa niniejsza ksiñĔka, w dokumentacji
jQuery Mobile moĔna byäo przeczytaè, Ĕe w wyniku zastosowania
atrybutu data-inline= true do elementu-kontenera wszystkie
przyciski w nim zawarte bödñ wyrenderowane jako wstawiane.
To nie dziaäa. Atrybut data-inline= true trzeba zastosowaè
do kaĔdego przycisku z osobna. Wiöcej informacji na ten temat
moĔna uzyskaè pod adresem http://jquerymobile.com/demos/1.0a4.1/
docs/buttons/buttons-inline.html. Sñdzö, Ĕe ten bäñd zostanie wyeli-
minowany do wydania 1.0.
Grupowanie przycisków
Przyciski mogñ byè grupowane. W ten sposób moĔna stworzyè zbiór przy-
cisków na jednym pasku. Aby uzyskaè taki efekt, wystarczy opakowaè
przyciski w elemencie-kontenera, a nastöpnie zastosowaè do niego atrybut
datarole= controlgroup .
DomyĈlnie grupy kontrolek tworzñ pionowe listy. JeĈli jednak zastosujemy do
kontenera atrybut datatype= horizontal (tak jak to zrobiäem na listingu 3.14),
to przyciski zostanñ wyrenderowane w trybie wstawianym (ang. inline), tak
jak pokazano na rysunku 3.18.
60
_
Rozdziaĥ 3. Elementy stron
Listing 3.14. Grupy przycisków
section id= page1 data-role= page
header data-role= header h1 jQuery Mobile /h1 /header
div class= content data-role= content
h3 Grupy przycisków /h3
div data-role= controlgroup
a href= # data-role= button Tak /a
a href= # data-role= button Nie /a
a href= # data-role= button Anuluj /a
/div
div data-role= controlgroup data-type= horizontal
a href= # data-role= button Tak /a
a href= # data-role= button Nie /a
a href= # data-role= button Anuluj /a
/div
/div
/div
footer data-role= footer h1 Helion /h1 /footer
/section
Rysunek 3.18. Grupy przycisków
Grupy przycisków nie dziaäajñ tak samo jak przeäñczniki. W okreĈlonym
momencie moĔe byè aktywny wiöcej niĔ jeden przycisk w grupie.
Przyciski
_
61
Ikony przycisków
Czösto wystöpuje potrzeba umieszczania ikon na przyciskach. Biblioteka
jQuery Mobile daje dostöp do zbioru ikon. Istnieje takĔe moĔliwoĈè decy-
dowania o pozycji, w jakiej ma byè umieszczona ikona.
Aby umieĈciè ikonö na przycisku, naleĔy wykorzystaè atrybut data-icon.
Dozwolone wartoĈci atrybutu data-icon zestawiono w tabeli 3.1.
Tabela 3.1. Prawidäowe wartoĈci atrybutu data-icon
Ikona
Wartoļë
alert
arrow-d
arrow-l
arrow-r
arrow-u
back
check
delete
forward
gear
grid
home
info
minus
plus
refresh
search
star
Pozycjö ikony moĔna okreĈliè za pomocñ atrybutu data-iconpos. WartoĈci
tego atrybutu zestawiono w tabeli 3.2.
Kod umoĔliwiajñcy dodanie niektórych spoĈród ikon przycisków pokaza-
no na listingu 3.15. Uzyskane efekty zaprezentowano na rysunku 3.19.
62
_
Rozdziaĥ 3. Elementy stron
Tabela 3.2. Prawidäowe wartoĈci atrybutu data-iconpos
Wartoļë
bottom
left
notext
right
top
Efekt
PoniŜej tekstu, wyļrodkowana
Po lewej stronie przycisku
Tekst ukryty, wyļwietla siý tylko ikona
Po prawej stronie przycisku
PowyŜej tekstu, wyļrodkowana
Listing 3.15. Ikony przycisków
section id= page1 data-role= page
header data-role= header h1 jQuery Mobile /h1 /header
div class= content data-role= content
h3 Ikony przycisków /h3
div data-role= controlgroup data-type= horizontal data-inline= true
a href= # data-role= button data-icon= home
´data-iconpos= left Strona gïówna /a
a href= # data-role= button data-icon= gear
data-iconpos= left Opcje /a
a href= # data-role= button data-icon= search
data-iconpos= left Szukaj /a
/div
/div
/div
footer data-role= footer h1 Helion /h1 /footer
/section
Rysunek 3.19. Ikony przycisków
Przyciski
_
63
Ikony uŜytkownika
Choè biblioteka jQuery Mobile zawiera zestaw ikon wbudowanych, z äa-
twoĈciñ moĔna implementowaè wäasne. Wystarczy skorzystaè z CSS oraz
atrybutu data-icon. JeĈli wartoĈè atrybutu data-icon nie jest jednñ z dostöpnych
wartoĈci, jQuery Mobile stworzy przycisk, ale zastosuje do niego klasö CSS
zdefiniowanñ przez uĔytkownika. Wewnñtrz tej klasy powinna znaleĒè siö
wartoĈè atrybutu data-icon poprzedzona prefiksem ui-icon-. Na przykäad, jeĈli
uĔyjemy kodu data-icon= flagicons-french , to jQuery Mobile wygeneruje
przycisk i utworzy go wewnñtrz znacznika span z klasñ CSS ui-icon-flagicons-
french.
Klasy ikon przycisków biblioteki jQuery Mobile zaprojektowano na bazie
kwadratowych ikon o wymiarach 18×18 pikseli. W przypadku zastosowa-
nia systemu motywów biblioteki jQuery Mobile (zobacz rozdziaä 4.) ikony
naleĔy zapisywaè w formacie PNG z zastosowaniem przezroczystoĈci alfa.
Elementy formularzy
jQuery Mobile automatycznie ulepsza natywne elementy formularzy za
pomocñ komponentów interfejsu uĔytkownika wzmocnionych o obsäugö
zdarzeþ dotyku.
Najpierw naleĔy stworzyè semantyczny kod strony, rozmieĈciè odpowied-
nie etykiety elementów oraz opakowaè wszystkie pola formularzy w pra-
widäowe znaczniki form.
MoĔna takĔe wizualnie pogrupowaè elementy w obröbie formularza. W tym
celu naleĔy zastosowaè atrybut datarole= fieldcontain do grupy elementów
opakowanych wäaĈciwym znacznikiem. Idealnie nadajñ siö do tego znaczniki
fieldset lub div.
jQuery Mobile automatycznie obsäuĔy przesäanie strony za pomocñ techno-
logii AJAX oraz podejmie próbö zintegrowania odpowiedzi serwera z mo-
delem DOM aplikacji, dostarczajñc odpowiednich animowanych przejĈè. Aby
zablokowaè obsäugö formularza za poĈrednictwem tej technologii dla wska-
zanego formularza, naleĔy zastosowaè do znacznika form atrybut data-
ajax= false .
Na koniec, jeĈli nie chce siö, aby biblioteka jQuery Mobile ulepszaäa elementy
formularzy lub caäe formularze, naleĔy zastosowaè do elementu bñdĒ znacz-
nika form atrybut data-role= none .
64
_
Rozdziaĥ 3. Elementy stron
Dostýp do elementów formularzy
za pomocé JavaScript
Podobnie jak inne elementy stron, elementy formularzy jQuery Mobile sñ
zarzñdzane przez róĔnorodne widĔety jQuery. Jednñ z najwiökszych zalet
mechanizmu widĔetów biblioteki jQuery jest moĔliwoĈè dostöpu do me-
tod widĔetu juĔ po zainicjowaniu elementu formularza. Programista moĔe
skorzystaè z udostöpnionych metod widĔetów do wykonywania róĔnych
uĔytecznych dziaäaþ: odczytywania i ustawiania zaznaczonych wartoĈci,
modyfikowania informacji, wäñczania i wyäñczania elementów, ich röcznej
inicjalizacji, przywracania ich do stanu sprzed ulepszenia itd.
Pola wyboru i przeĥéczniki
jQuery Mobile automatycznie ulepsza pola wyboru i przeäñczniki w interfejsie
uĔytkownika, przeksztaäcajñc je w elementy przypominajñce przyciski. Podob-
nie jak inne przyciski, elementy te mogñ byè grupowane poprzez zastosowa-
nie w odniesieniu do elementu-kontenera atrybutu data-role= controlgroup .
DomyĈlnie grupy kontrolek tworzñ pionowe kolumny przycisków zajmujñce
peänñ szerokoĈè kontenera. Aby stworzyè poziomñ grupö kontrolek, naleĔy
uĔyè atrybutu datatype= horizontal . Przykäad moĔna znaleĒè na listingu 3.16,
a uzyskany efekt obejrzeè na rysunku 3.20.
Listing 3.16. Pola wyboru i przeäñczniki
section id= page1 data-role= page
header data-role= header h1 jQuery Mobile /h1 /header
div class= content data-role= content
h3 Pola wyboru i przeïÈczniki /h3
form id= myform action= formprocessor.php method= post
div data-role= fieldcontain
fieldset data-role= controlgroup
legend OkreĂl filtr dla restauracji: /legend
input type= checkbox name= checkbox-french
´id= checkbox-french
label for= checkbox-french Francuskie /label
input type= checkbox name= checkbox-italian
´id= checkbox-italian
label for= checkbox-italian Wïoskie /label
input type= checkbox name= checkbox-greek
´id= checkbox-greek
label for= checkbox-greek Greckie /label
/fieldset
div data-role= fieldcontain
fieldset data-role= controlgroup data-type= horizontal
Elementy formularzy
_
65
legend Wybierz jÚzyk: /legend
input type= radio name= radio-language id= radio-french
label for= radio-french Francuski /label
input type= radio name= radio-language id= radio-italian
checked= checked
label for= radio-italian Wïoski /label
input type= radio name= radio-language id= radio-greek
label for= radio-greek Grecki /label
/fieldset
/div
/form
/div
/div
footer data-role= footer h1 Helion /h1 /footer
/section
Rysunek 3.20. Pola wyboru i przeäñczniki
Metody
W bibliotece jQuery Mobile do zarzñdzania polami wyboru i przeäñcznikami
wykorzystywany jest widĔet checkboxradio. MoĔna go wykorzystaè do wäñ-
czenia, wyäñczenia lub odĈwieĔenia wskazanego pola wyboru lub przeäñcznika
(listing 3.17).
Listing 3.17. Metoda checkboxradio
script
// Zablokowanie przycisku
66
_
Rozdziaĥ 3. Elementy stron
$( #checkbox-french ).checkboxradio( disable );
// Wáączenie zablokowanego przycisku
$( #checkbox-italian ).checkboxradio( enable );
// RĊczne uaktywnienie przycisku i odĞwieĪenie jego statusu w interfejsie uĪytkownika
$( #radio-greek ).attr( checked , true).checkboxradio( refresh );
/script
Przeĥéczniki dwustanowe
Przeäñczniki dwustanowe (ang. flip toggle) to bardzo czösto stosowane ele-
menty interfejsu uĔytkownika aplikacji mobilnych. Przeäñczniki tego rodzaju
pozwalajñ na wybór pomiödzy dwiema wartoĈciami (np. „wäñczony” i „wy-
äñczony”). UĔytkownik moĔe przeäñczyè stan przeäñcznika, przeciñgajñc
przeäñcznik bñdĒ stukajñc w niego.
Do tworzenia przeäñczników dwustanowych w bibliotece jQuery Mobile
wykorzystywany jest element formularza HTML select. Wystarczy utwo-
rzyè element select z dwiema opcjami i zastosowaè do niego atrybut data-
role= slider . Przykäad pokazano na listingu 3.18, a efekty zaprezentowano
na rysunku 3.21.
Listing 3.18. Przeäñcznik dwustanowy
section id= page1 data-role= page
header data-role= header h1 jQuery Mobile /h1 /header
div class= content data-role= content
h3 Pola wyboru i przeïÈczniki /h3
form id= myform action= formprocessor.php method= post
div data-role= fieldcontain
label for= slider-music Muzyka w tle /label
select name= slider-music id= slider-music data-role= slider
option value= on WïÈcz /option
option value= off WyïÈcz /option
/select
/div
/form
/div
footer data-role= footer h1 Helion /h1 /footer
/section
Elementy formularzy
_
67
Rysunek 3.21. Przeäñcznik dwustanowy
Metody
W bibliotece jQuery Mobile do zarzñdzania przeäñcznikami dwustanowymi
wykorzystywany jest widĔet slider. Na listingu 3.19 pokazano, w jaki spo-
sób uzyskaè bezpoĈredni dostöp do przeäñcznika dwustanowego.
Listing 3.19. Metoda slider
script
$(document).ready(function() {
var mySlider = $( #slider-music );
// Zablokowanie suwaka
mySlider.slider( disable );
// Odblokowanie suwaka
mySlider.slider( enable );
// RĊczne przeáączenie suwaka i zaktualizowanie jego statusu w interfejsie uĪytkownika
// (samo przeáączenie nie spowoduje automatycznego zaktualizowania interfejsu uĪytkownika)
mySlider[0].selectedIndex = 1;
mySlider.slider( refresh );
})
/script
68
_
Rozdziaĥ 3. Elementy stron
Pola i obszary tekstowe
Biblioteka jQuery Mobile udostöpnia równieĔ pola i obszary tekstowe. Ele-
menty te sñ domyĈlnie wizualnie ulepszone przez zaokrñglenie naroĔników
i zastosowanie cieni, choè z äatwoĈciñ moĔna to zmieniè (zobacz rozdziaä 4.).
Do pól tekstowych moĔna stosowaè atrybut type wraz z okreĈleniem jednej
z kilku nowych wartoĈci zdefiniowanych w HTML5 umoĔliwiajñcych wyĈwie-
tlenie wäaĈciwego rodzaju klawiatury. Na przykäad pole tekstowe z atrybutem
type= number w wiökszoĈci urzñdzeþ mobilnych spowoduje wyĈwietlenie
klawiatury numerycznej.
WysokoĈè obszarów tekstowych powiöksza siö, w miarö jak uĔytkownik wpi-
suje w nie tekst. Dziöki temu moĔna uniknñè tworzenia pasków przewijania.
Metody
W bibliotece jQuery Mobile do zarzñdzania obszarami i polami tekstowymi
wykorzystywany jest widĔet textinput (listing 3.20).
Listing 3.20. Metoda textinput
script
$(document).ready(function() {
// Zablokowanie pola tekstowego
$( #myinput ).textinput( disable );
// Odblokowanie pola tekstowego
$( #myotherinput ).textinput( enable );
})
/script
Pola wyszukiwania
Pola wyszukiwania to pola tekstowe, dla których zastosowano dodatkowy
styl. Przede wszystkim jest na nich ikona wyszukiwania (szkäo powiökszajñce)
umieszczona z lewej strony pola tekstowego. Kiedy uĔytkownik zaczyna wpi-
sywaè tekst w polu, z jego prawej strony wyĈwietla siö ikona zerowania pola
(znak „x”). Klikniöcie tej ikony spowoduje wyczyszczenie treĈci wprowa-
dzonej w polu.
Elementy formularzy
_
69
Aby stworzyè pole wyszukiwania, wystarczy zastosowaè do pola tekstowe-
go atrybut type= search . Przykäad pokazano na listingu 3.21, a uzyskany
efekt na rysunku 3.22.
Listing 3.21. Pole wyszukiwania
section id= page1 data-role= page
header data-role= header h1 jQuery Mobile /h1 /header
div class= content data-role= content
h3 Pole wyszukiwania /h3
form id= myform action= formprocessor.php method= post
div data-role= fieldcontain
label for= search-restaurants Szukaj restauracji: /label
input type= search name= search-restaurants
´id= search-restaurants /
/div
/form
/div
footer data-role= footer h1 Helion /h1 /footer
/section
Metody
Pole wyszukiwania to nic innego jak pole tekstowe z odpowiednim stylem.
W zwiñzku z tym do jego obsäugi wykorzystuje siö widĔet textinput (zobacz
listing 3.20).
Rysunek 3.22. Pole wyszukiwania
70
_
Rozdziaĥ 3. Elementy stron
Menu select
Menu select naleĔñ do najbardziej progresywnie ulepszanych elementów
w bibliotece jQuery Mobile. Biblioteka pozwala na uĔywanie natywnego dla
platformy widĔetu select albo na stworzenie wäasnego menu select z wy-
korzystaniem stylu zdefiniowanego przez uĔytkownika.
Menu select bazujñce na wäasnym stylu ma istotnñ przewagö w porównaniu
z uĔywaniem natywnego widĔetu select. Na niektórych platformach na-
tywny widĔet select jest pozbawiony waĔnych wäaĈciwoĈci (na przykäad
w systemie Android brakuje obsäugi optgroup). Zastosowanie menu select
bazujñcego na wäasnym stylu umoĔliwia odtworzenie tych wäaĈciwoĈci.
Oprócz tego moĔna dodaè nowe wäaĈciwoĈci, na przykäad moĔliwoĈè wie-
lokrotnego wyboru. ãatwiej równieĔ dopasowaè styl elementu do wizual-
nego motywu aplikacji.
DomyĈlnie biblioteka jQuery Mobile próbuje wykorzystaè natywny widĔet
select. W tym celu nie trzeba robiè niczego szczególnego. Wystarczy stworzyè
element select oraz zdefiniowaè jego opcje. Aby zmusiè bibliotekö jQuery
Mobile do utworzenia menu select bazujñcego na stylu uĔytkownika, nale-
Ĕy zastosowaè do elementu select atrybut data-native-menu= false . Przy-
käad pokazano na listingu 3.22, a efekty zaprezentowano na rysunku 3.23.
Listing 3.22. Natywne menu select
section id= page1 data-role= page
header data-role= header h1 jQuery Mobile /h1 /header
div class= content data-role= content
h3 Demonstracja natywnego menu select /h3
form id= myform action= formprocessor.php method= post
div data-role= fieldcontain
label for= select-restaurants Wybierz swoje restauracje: /label
select id= select-restaurants name= select-restaurants
option value= lecentral Le Central /option
option value= bistrovandome Bistro Vandome /option
option value= antoines Antoine /option
/select
/div
/form
/div
footer data-role= footer h1 Helion /h1 /footer
/section
Elementy formularzy
_
71
Rysunek 3.23. Natywne menu select
Menu select bazujéce na stylu uŜytkownika
Menu select bazujñce na stylu uĔytkownika charakteryzujñ siö kilkoma
waĔnymi wäaĈciwoĈciami:
Elementy zablokowane. Za pomocñ atrybutu disabled znacznika option
moĔna okreĈliè elementy zablokowane.
Wielokrotny wybór. Menu select bazujñce na stylu uĔytkownika pozwala
na wielokrotny wybór. Aby uĔyè tej wäasnoĈci, naleĔy dodaè atrybut multiple
do elementu select. W takiej sytuacji biblioteka jQuery Mobile doda do me-
nu nastöpujñce wäasnoĈci:
x Rozwijane menu bödzie opatrzone nagäówkiem zawierajñcym przycisk
zamkniöcia oraz tekst-rozdzielacz (zobacz „Rozdzielacze” poniĔej). Klik-
niöcie przycisku zamkniöcia spowoduje zamkniöcie menu. Dziöki temu
rozwijane menu moĔe pozostaè otwarte w czasie, kiedy uĔytkownik
wybiera z niego wiele pozycji. Standardowo, gdy uĔytkownik wybie-
rze jeden element z menu select, menu zamknie siö automatycznie.
x Po prawej stronie kaĔdej pozycji menu wyĈwietlñ siö pola wyboru, które
wskazujñ na to, czy okreĈlony element zostaä wybrany, czy nie.
x JeĈli uĔytkownik wybierze z menu jeden lub wiöcej elementów, na przyci-
sku wyboru wyĈwietli siö licznik.
72
_
Rozdziaĥ 3. Elementy stron
x Po zamkniöciu rozwijanego menu tekst kaĔdego wybranego elementu
zostanie dodany do przycisku wyboru. Teksty zbyt däugie, aby mogäy siö
zmieĈciè na przycisku, zostanñ obciöte.
x JeĈli lista wyboru jest zbyt däuga, jQuery Mobile wyĈwietli jñ w osobnym
oknie zamiast w oknie pop up. Dziöki temu przewijanie okna staje siö
äatwiejsze.
W momencie powstawania niniejszej ksiñĔki wäasnoĈè wielokrot-
nego wyboru byäa obarczona kilkoma drobnymi bäödami. NaleĔy
dokäadnie przetestowaè tö wäasnoĈè w aplikacji, aby sprawdziè,
czy dziaäa zgodnie z oczekiwaniami.
Grupy opcji. Biblioteka jQuery Mobile interpretuje znaczniki optgroup säuĔñce
do grupowania znaczników option i tworzenia nagäówków dzielñcych wy-
nikowñ listö w oknie pop up.
Rozdzielacze. MoĔna je definiowaè na jeden z trzech sposobów: poprzez po-
zostawienie pustego znacznika option zarówno tekstu, jak i wartoĈci, pozo-
stawienie pustego znacznika option co do wartoĈci (ale pozostawienie tekstu)
albo zastosowanie atrybutu data-placeholder= true do znacznika option.
JeĈli istnieje tekst w opcji placeholder, biblioteka jQuery Mobile wyĈwietli go
na przycisku select.
Wszystkie wäasnoĈci menu bazujñcych na stylu uĔytkownika zestawiono na
listingu 3.23. Efekty pokazano na rysunku 3.24.
Listing 3.23. Menu select bazujñce na stylu uĔytkownika
section id= page1 data-role= page
header data-role= header h1 jQuery Mobile /h1 /header
div class= content data-role= content
h3 Demonstracja uĝycia menu select /h3
form id= myform action= formprocessor.php method= post
div data-role= fieldcontain
label for= select-restaurants Wybierz swoje
´restauracje: /label
select id= select-restaurants
name= select-restaurants
data-native-menu= false
multiple= multiple
option value= choose data-placeholder= true
´Wybierz... /option
optgroup label= francuskie
option value= lecentral Le Central /option
option value= bistrovandome Bistro Vandome /option
option value= antoines Antoine /option
Elementy formularzy
_
73
/optgroup
optgroup label= cajun
option value= bayoubobs Bayou Bob s /option
option value= pappadeaux disabled=
´ disabled Pappadeaux /option
option value= luciles Lucile s /option
/optgroup
/select
/div
/form
/div
footer data-role= footer h1 Helion /h1 /footer
/section
Rysunek 3.24. Menu select zdefiniowane przez uĔytkownika
Metody
W bibliotece jQuery Mobile do zarzñdzania menu select wykorzystywany jest
widĔet selectmenu (listing 3.24).
Listing 3.24. Metoda selectmenu
script
$(document).ready(function() {
mySelect = $( #select-restaurants );
// Zablokowanie menu select
mySelect.selectmenu( disable );
74
_
Rozdziaĥ 3. Elementy stron
// Odblokowanie menu select
mySelect.selectmenu( enable );
// RĊczne otwarcie menu select
mySelect.selectmenu( open );
// RĊczne zamkniĊcie menu select
mySelect.selectmenu( close );
// RĊczne wybranie elementu i odĞwieĪenie jego stanu w interfejsie uĪytkownika
mySelect[0].selectedIndex = 2;
mySelect.selectmenu( refresh );
// Wymuszenie odbudowania menu select.
// Przydatne w przypadku dynamicznego dodania bądĨ usuniĊcia opcji.
mySelect.selectmenu( refresh , true);
});
/script
Suwaki
Suwaki to elementy pozwalajñce uĔytkownikom na wybieranie jednej ze zbio-
ru wartoĈci przez przesuwanie kursora.
Aby stworzyè suwak, naleĔy zastosowaè do pola tekstowego atrybut type=
´ range , tak jak pokazano na listingu 3.25. Dodatkowo moĔna ustawiè atry-
buty min i max. Efekty zaprezentowano na rysunku 3.25 (w czasie powstawa-
nia niniejszej ksiñĔki suwaki nie obsäugiwaäy atrybutu step).
Listing 3.25. Suwak
section id= page1 data-role= page
header data-role= header h1 jQuery Mobile /h1 /header
div class= content data-role= content
h3 Demonstracja uĝycia suwaka /h3
form id= myform action= formprocessor.php method= post
div data-role= fieldcontain
input type= range id= slider name= slider min= 0 max= 500
/div
/form
/div
footer data-role= footer h1 Helion /h1 /footer
/section
UĔytkownik moĔe przesuwaè suwakiem w obie strony albo moĔe wprowa-
dziè wartoĈè w polu tekstowym, a pozycja suwaka automatycznie siö zaktu-
alizuje.
Elementy formularzy
_
75
Rysunek 3.25. Suwak
Metody
Do obsäugi suwaka w bibliotece jQuery Mobile säuĔy metoda slider (li-
sting 3.26).
Listing 3.26. Metoda slider
script
$(document).ready(function() {
// Zablokowanie suwaka
$( #slider ).slider( disable );
// Odblokowanie suwaka
$( #slider ).slider( enable );
// RĊczne ustawienie wartoĞci suwaka i odĞwieĪenie jego stanu w interfejsie uĪytkownika
$( #slider ).val(100).slider( refresh );
})
/script
76
_
Rozdziaĥ 3. Elementy stron
Siatki ukĥadu dokumentu
Biblioteka jQuery Mobile daje dostöp do zbioru wbudowanych siatek ukäa-
du zawierajñcych od dwóch do piöciu kolumn. Siatki ukäadu dokumentu
przydajñ siö w sytuacjach, w których w dokumencie wystöpujñ mniejsze
elementy, takie jak przyciski bñdĒ pola formularzy, które chcemy rozmieĈciè
z wiökszñ dokäadnoĈciñ.
Siatki ukäadu bazujñ na strukturze zäoĔonej z elementów div: najpierw two-
rzy siö element div, który ma zawieraè siatkö, a nastöpnie, wewnñtrz, dodaje
siö elementy div bödñce komórkami. Element div, który jest kontenerem, ma
przypisanñ odpowiedniñ klasö ui-grid: ui-grid-a dla 2 kolumn, ui-grid-b itd.
aĔ do ui-grid-d dla 5 kolumn. Elementy div, które tworzñ komórki, majñ
przypisane klasy ui-blok w zaleĔnoĈci od ich pozycji: ui-block-a dla pierwszej,
ui-block-b dla drugiej itd. aĔ do ui-block-e dla piñtej.
Aby utworzyè wiele wierszy, naleĔy dodaè wiöcej elementów div komórek
i nadaè im odpowiednie klasy w taki sposób, aby kaĔda kolumna miaäa
przypisanñ wäasnñ klasö ui-block (listing 3.27). Efekty pokazano na rysun-
kach 3.26 i 3.27.
Listing 3.27. Siatki ukäadu
!DOCTYPE html
html
head
title Aplikacja jQuery Mobile /title
link rel= stylesheet href= http://code.jquery.com/mobile/1.0a4.1/
´jquery.mobile-1.0a4.1.min.css /
script src= http://code.jquery.com/jquery-1.5.2.min.js /script
script src= http://code.jquery.com/mobile/1.0a4.1/
´jquery.mobile-1.0a4.1.min.js /script
style
.content div div p {
background-color: #ccc;
height: 50px;
border: 1px solid #333;
margin: 0px;
}
/style
/head
body
section id= page1 data-role= page
header data-role= header h1 jQuery Mobile /h1 /header
div class= content data-role= content
Siatki ukĥadu dokumentu
_
77
h4 2 kolumny /h4
div class= ui-grid-b
div class= ui-block-a p Blok A /p /div
div class= ui-block-b p Blok B /p /div
/div
h4 3 kolumny /h4
div class= ui-grid-b
div class= ui-block-a p Blok A /p /div
div class= ui-block-b p Blok B /p /div
div class= ui-block-c p Blok C /p /div
/div
h4 4 kolumny /h4
div class= ui-grid-c
div class= ui-block-a p Blok A /p /div
div class= ui-block-b p Blok B /p /div
div class= ui-block-c p Blok C /p /div
div class= ui-block-d p Blok D /p /div
/div
h4 5 kolumn /h4
div class= ui-grid-d
div class= ui-block-a p Blok A /p /div
div class= ui-block-b p Blok B /p /div
div class= ui-block-c p Blok C /p /div
div class= ui-block-d p Blok D /p /div
div class= ui-block-e p Blok E /p /div
/div
h4 2 wiersze po 3 kolumny /h4
div class= ui-grid-d
div class= ui-block-a p Blok A /p /div
div class= ui-block-b p Blok B /p /div
div class= ui-block-c p Blok C /p /div
div class= ui-block-a p Blok A /p /div
div class= ui-block-b p Blok B /p /div
div class= ui-block-c p Blok C /p /div
/div
/div
footer data-role= footer h1 Helion /h1 /footer
/section
/body
/html
Na rysunkach 3.26 i 3.27 umieĈciäem caäy dokument zamiast widoku strony
po to, aby pokazaè reguäö CSS, którñ dodaäem, by bloki staäy siö widoczne.
78
_
Rozdziaĥ 3. Elementy stron
Rysunek 3.26. Siatka ukäadu numer 1
Rysunek 3.27. Siatka ukäadu numer 2
Siatki ukĥadu dokumentu
_
79
80
_
Rozdziaĥ 3. Elementy stron
A
adres URL, 33
AJAX, 64, 120
akcent wizualny, 81
animacja, 14, 19, 35, 36
API, 97
responsywnego ukäadu
dokumentu, 104
RESTful, 119
serwisu Twitter, 120
wieloplatformowe, 13
aplikacja
enkapsulacja, 39
inicjalizacja, 116
mobilna, 13, 81
mobilna webowa, 7
natywna, 7
stan zajötoĈci, 98
arkusz stylów, 14, 37, 91
atrybut
data-split-icon, 95
ARIA, 27, 28
data, 27
data-, 20, 39
data-count-theme, 95
data-icon, 62, 64
data-iconpos, 62
data-inline, 60
data-rel, 32
datarole, 60, 64
data-role, 42, 54, 65
data-split-theme, 95
data-split-icon, 95
data-theme, 82, 95
datatype, 65
dataurl, 34
Skorowidz
disabled, 72
obsäugi danych, 14
type, 69, 70, 75
B
balonik licznika, 50, 95
biblioteka
Crockforda, 119
jQuery Mobile, 8, 13, 14, 20, 28, 36, 39,
66, 67, 68, 69, 71, 74, 76, 97, 106
konfigurowanie, 108
system motywów, 64
JSON.js, 119
bäödy, 124
CDN, 14, 91
cieþ, 81
czcionka, 81
ekran, 104, 106
emulator, 17
C
E
F
Firebug, 29
Firefox, 29
flip toggle, Patrz:przeųČcznikdwustanowy
formularz, 64
blokowanie, 64
kontrolka, 27
135
GitHub, 20
G
I
ikona, 47, 62
przycisku dzielonego, 95
uĔytkownika, 64
wyszukiwania, 69
zerowania pola, 69
interfejs uĔytkownika, 14, 39, 64, 65, 67,
81, 127
J
JavaScript Simple Object Notation,
Patrz:JSON
JSON, 120
parsowanie, 119
K
klasa
CSS, 28, 37, 64, 107
motywów, 27
ui-nojs, 27
ui-page, 27
zmiany rozdzielczoĈci, 106
klasa-fabryka jQuery.widget, 39
kolor, 81, 91
kontrolka, 27
L
licznik, 52, 72
balonik, 50, 95
lista, 40, 52, 121, 122
aktualizowanie, 53
dodawanie elementów, 54
motyw, 95
nieponumerowana, 40
obrazki, 47
pionowa, 60
ponumerowana, 40
136
_
Skorowidz
separator, 42, 52, 95
wyĈwietlanie, 127
zagnieĔdĔona, 44
zäoĔona z przycisków, 41, 46
Ĥ
M
äñcze, 19, 34
menu
rozwijane, 72
select, 71, 72
metoda, 39
addResolutionBreakpoints, 106
changePage, 34, 97
jQuery(document).ready, 29
jQuery.ajax, 120
jQuery.bind, 30
jQuery.data, 119
jQuery.delegate, 30
jQuery.live, 30
JSON.parse, 120
JSON.stringify, 120
localStorage, 118
media, 107
pageLoading, 98
refresh, 53
sessionStorage, 118
silentScroll, 99
slider, 76
miniaturka, 47
motyw, 81, 91, 95
listy, 95
przycisku dzielonego, 95
multimedia, 107
N
nagäówek, 15, 54, 57, 72
sekcji, 42
nawigacja, 15, 21
O
obszar tekstowy, 69
okno dialogowe, 32, 98
orientacja, 105, Patrz:urzČdzenieorientacja
P
parsowanie, 119
pasek
narzödzi, 27, 54
nawigacji, 54, 56
platform abstraction layer,
Patrz:warstwa
pole
tekstowe, 69, 75
wyboru, 65, 66, 72
wyszukiwania, 69, 70
próbka, 81, 82, 87, 90
personalizacja, 91
przejĈcie, 14, 19, 21, 29, 34, 98
animowane, 35, 36, 64
przeäñcznik, 61, 65, 66
dwustanowy, 67
przestrzeþ nazw, 20, 30, 111
przewijanie, 104
przycisk, 27, 34, 54, 65
dzielony, 46, 95
grupa, 54, 60
ikona, 62
stylizowany, 59
zamkniöcia, 72
R
rola, 16, 19
rozdzielacz, Patrz:tekstͲrozdzielacz
rozdzielczoĈè, 106
S
Safari, 17, 29
SDK, 17
sekcja, 15
selektor
CSS, 105
filtrowanie, 20
jqmData, 20
niestandardowy, 20
siatka
ukäadu, 77
Software Development Kit, Patrz:SDK
stopka, 15, 54, 57
strona, 113
inicjalizacja, 39, 102
inicjowanie, 27, 123
kod, 28, 64
äadowanie, 29, 98
pobieranie, 27, 29
przekazywanie danych, 118
rozmiar, 105
ukrywanie, 30
ustawieþ, 123
wewnötrzna, 22
widok, 29
widĔet, 27
wyĈwietlanie, 30
zewnötrzna, 24
styl uĔytkownika, 72
suwak, 75
system motywów biblioteki jQuery
Mobile, Patrz:bibliotekajQueryMobile
systemmotywów
szkäo powiökszajñce, Patrz:ikona
wyszukiwania
T
tablica, 98
wyników, 121
tekst-rozdzielacz, 72
tekstura, 81
theming class, Patrz:klasamotywów
täo, 105
transformacja
CSS3, 14, 35, 36
webkit, 36
Skorowidz
_
137
mobileinit, 110
nasäuchiwanie, 30, 124
orientationchange, 104, 107
pagebeforecreate, 102
pagebeforehide, 29, 103
pagebeforeshow, 29, 103
pagecreate, 102
pagehide, 29, 32, 103
pageshow, 30, 32, 104
scroll, 104
scrollstart, 104
scrollstop, 104
swipe, 99
swipeleft, 100
swiperight, 100
tap, 99
taphold, 99
ukrywania stron, 30
wiñzanie, 30
wyĈwietlania stron, 30
zwiñzane z dotykiem, 99
zwiñzane z przewijaniem
dokumentu, 104
zwiñzane ze zmianñ orientacji
urzñdzenia, 104
zmienna globalna, 119
znacznik
div, 15, 28
form, 64
grupowanie, 73
HTML, 14
kotwicy, 49, 52, 54, 56, 59
optgroup, 73
option, 72, 73
semantyczny, 15, 19
span, 28
zakotwiczenia, 46
zestaw, 16
U
urzñdzenie
mobilne, 7, 104
orientacja, 105, 107
przenoĈne, 17
V
viewport, Patrz:wziernik
W
warstwa abstrakcji platformy, 7
webkit, 37
widĔet, 13, 27, 39, 65
checkboxradio, 66
listview, 53
select, 71
selectmenu, 74
slider, 68
wtyczka, 13, 39
jQuery, 32, 118
wymiar, 81
wypeänienie, 81
wziernik, 99
XAMPP, 18
X
Z
zdarzenie, 99
beforecreate, 27
click, 122
document ready, 118
äadowania strony, 29
138
_
Skorowidz
Pobierz darmowy fragment (pdf)
