Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00258 004865 15201029 na godz. na dobę w sumie
jQuery Mobile - książka
jQuery Mobile - książka
Autor: Liczba stron: 144
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-4772-9 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> jquery - programowanie
Porównaj ceny (książka, ebook, audiobook).

Aplikacje mobilne dla każdego!

Mimo że na rynku wciąż wiodą prym tylko dwa systemy operacyjne dla urządzeń mobilnych, tworzenie aplikacji natywnych przeznaczonych wyłącznie dla nich jest zbyt czasochłonne. Przyszłość należy do tych aplikacji, które będą kompatybilne z wieloma platformami sprzętowymi. Jednak lista problemów, z jakimi musi się zmierzyć projektant takiego oprogramowania, jest długa. Czy coś można na to poradzić? Tak! Rozwiązaniem są bogate możliwości HTML5 i CSS3! Jeżeli dołożyć do tego genialną bibliotekę jQuery Mobile, otrzymamy wybitne trio, pozwalające stworzyć aplikacje, które będą spójnie wyglądać i działać na wielu różnych urządzeniach.

Dzięki tej książce poznasz możliwości jQuery Mobile i przekonasz się, że tworzenie aplikacji na urządzenia mobilne nie musi być trudne. Dowiesz się, jak przygotować strukturę strony oraz jak wykorzystać dostępne elementy interfejsu użytkownika. Nauczysz się nawigować pomiędzy stronami oraz korzystać z okien dialogowych i formularzy. Znajdziesz tu też informacje na temat mechanizmu zdarzeń w jQuery Mobile oraz poznasz podstawy tworzenia własnych motywów graficznych. Książka ta jest idealną pozycją dla wszystkich osób chcących zaprojektować swoją pierwszą aplikację dla urządzeń mobilnych.

jQuery Mobile pozwala na:

Wykorzystaj całą zdobytą wiedzę do stworzenia aplikacji mobilnej od początku do końca!

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

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)

Gdzie kupić całą publikację:

jQuery Mobile
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: