
Dziś dalsza nauka jQuery Mobile, a omówimy między innymi dialogi oraz listy.
Nauka jQuery Mobile – dalsze kroki
Na początek zajmiemy się istotnym elementem UI, jaki stanowią dialogi.
Podstawowo, tak jak w innych przypadkach, bazujemy na definiowaniu atrybutów dla elementów.
Na przykład:
<a href="foo.html" data-rel="dialog">Open dialog</a>
Aby zobaczyć dialogi jQuery Mobile w akcji, rozważmy nieco większy przykład:
... <a href="#dialog" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop">Dialog demo</a> <div data-role="popup" id="dialog" data-overlay-theme="a" data-theme="c"> <div data-role="header" data-theme="a"> <h1>Delete it?</h1> </div> <div data-role="content" data-theme="d"> <h3>Are you sure you want to delete this item?</h3> <p>Lorem ipsum ...</p> <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">No</a> <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="b">Yes</a> </div> </div> ...
Rezultat (uruchomiony na Opera Mobile Emulator):
Pełny przykład dostępny tutaj.
W powyższym kodzie widzimy sporo nowych atrybutów, ale mimo to efekt uzyskaliśmy niewielkim nakładem pracy.
Dla zainteresowanych zagłębieniem się w temat dialogów, polecam powiązane miejsca w dokumentacji jQuery Mobile:
http://demos.jquerymobile.com/1.2.0-beta.1/docs/pages/page-dialogs.html
http://api.jquerymobile.com/dialog/
Przejdźmy teraz to kolejnych elementów UI oferowanych przez ten znakomity framework.
Paski narzędzi – toolbars
Są to elementy, które często spotyka się w nagłówku aplikacji, ewentualnie w stopce. Umożliwiają one łatwy dostęp do opcji tudzież nawigacji.
Przykład użycia:
<div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a> <h1>Welcome!</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">Search</a> </div> <div data-role="main" class="ui-content"> <p>Demo ... </p> </div> <div data-role="footer" style="text-align: center;"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Option #1k</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Option #2</a> </div> </div> </div>
Wynik:
Pełny przykład dostępny tutaj.
Więcej informacji i przykładów pasków narzędzi:
http://www.w3schools.com/jquerymobile/jquerymobile_toolbars.asp
Idąc krok dalej można spotkać paski nawigacyjne (Navigation bars), czyli grupy łączy ustawione poziomo, służące typowo do tworzenia elementów nawigacji.
Przykład:
<div data-role="header"> <div data-role="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Search</a></li> </ul> </div> </div>
Podstawa to zdefiniowanie odpowiedniej roli dla elementu nadrzędnego (data-role=”navbar”).
Więcej informacji i przykładów:
http://www.w3schools.com/jquerymobile/jquerymobile_navbars.asp
Panele w jQuery Mobile
Kolejnym przydatnym elementem są panele. Mogą one pojawiać się dynamicznie z boku aplikacji i udostępniać dodatkową treść. Może to być cokolwiek, na przykład menu z opcjami. Wspaniała sprawa, bardzo pasująca do aplikacji mobilnych.
Przykład:
<div data-role="page" id="pageone"> <div data-role="panel" id="myPanel"> <h2>Panel!</h2> <p> <small> You can close the panel by clicking outside the panel,<br /> pressing the Esc key or by swiping. </small> </p> </div> <div data-role="header"> <h1>Page header</h1> </div> <div data-role="main" class="ui-content"> <p>Click on the button to open the Panel.</p> <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a> </div> <div data-role="footer"> <h1>Page Footer</h1> </div> </div>
Pełny przykład dostępny tutaj.
Więcej przykładów:
http://www.w3schools.com/jquerymobile/jquerymobile_panels.asp
Inne
W pewnością warto znać także inne możliwości, takie jak wsparcie tabel:
http://www.w3schools.com/jquerymobile/jquerymobile_tables.asp,
umożliwiających bezbolesne tworzenie tabel z danymi i filtrowanie ich.
jQuery Mobile udostępnia także siatki (grids)
http://www.w3schools.com/jquerymobile/jquerymobile_grids.asp
które ułatwiają rozmieszczanie elementów UI aplikacji.
Listy (list views)
Kolejnym bardzo użytecznym elementem są listy (widoki list).
Właściwie bazują one na zwykłych listach HTML:
– uporządkowane (<ol>),
– nieuporządkowane (<ul>),
Aby stworzyć listę jQuery Mobile, wystarczy do takiego elementu listy HTML dodać atrybut data-role=”listview”
Przykład – lista uporządkowana oraz nieuporządkowana:
<div data-role="content"> <h3>Unordered List:</h3> <ul data-role="listview"> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ul> <br /> <h3>Ordered List:</h3> <ol data-role="listview"> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ol> </div>
Pełny przykład dostępny tutaj.
Warto ulepszyć wygląd listy poprzez dodanie zaokrąglonych rogów i marginesów. Można to zrobić używając atrybutu data-inset=”true”:
<div data-role="page" id="pageone"> <div data-role="content"> <h3>List with margin and rounded corners:</h3> <ul data-role="listview" data-inset="true"> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ul> </div> </div>
Rezultat:
Filtrowanie list w jQuery Mobile
Listy w jQuery Mobile wyposażone są w opcje filtrowania, więc programista nie musi implementować tego na własną rękę.
Przykład:
<form class="ui-filterable"> <input id="myFilter" data-type="search"> </form> <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true"> <li><a href="#">Audi</a></li> <li><a href="#">Alfa Romeo</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Chevrolet</a></li> <li><a href="#">Chrysler</a></li> <li><a href="#">Ford</a></li> <li><a href="#">Fiat</a></li> <li><a href="#">Honda</a></li> <li><a href="#">Skoda</a></li> <li><a href="#">Suzuki</a></li> <li><a href="#">Toyota</a></li> </ul>
Dodanie filtrowania do listy ogranicza się do zdefiniowania atrybutów dla listy: data-role=”listview” oraz data-filter=”true”, a także data-input=”#myFilter”, który określa ID pola input, w którym będzie wypisywany tekst.
Możemy do tego pola dodać także placeholder:
<input id="myFilter" data-type="search" placeholder="Search for the car...">
Przykład filtrowania listy:
Pełny przykład dostępny tutaj.
Rozdzielacze list (list dividers)
Są to elementy, które pozwalają lepiej organizować listę poprzez grupowanie jej elementów.
Działanie mogliśmy zaobserwować w poprzednim przykładzie, dzięki atrybutowi data-autodividers=”true”.
Liczniki (Count bubbles)
Używane są one po prostu do wyświetlania liczb związanych z elementem listy, np. ilość wiadomości.
Aby dodać taki licznik, używamy elementu inline, takiego jak span, którego treścią jest liczba, którą chcemy wyświetlić. Poza tym należy zdefiniować klasę „ui-li-count”.
Przykład:
<ul data-role="listview"> <li><a href="#">Inbox<span class="ui-li-count">160</span></a></li> <li><a href="#">Sent<span class="ui-li-count">99</span></a></li> <li><a href="#">Spam<span class="ui-li-count">15</span></a></li> <li><a href="#">Trash<span class="ui-li-count">2</span></a></li> </ul>
Rezultat:
Listy z elementami graficznymi
Do list możemy dodawać ikony spośród udostępnianych przez jQuery Mobile, na przykład:
<ul data-role="listview" data-inset="true"> <li><a href="#">Default</a></li> <li data-icon="plus"><a href="#">data-icon="plus"</a></li> <li data-icon="minus"><a href="#">data-icon="minus"</a></li> <li data-icon="delete"><a href="#">data-icon="delete"</a></li> <li data-icon="false"><a href="#">data-icon="false"</a></li> </ul>
Rezultat:
Możemy dodać także własne, małe ikonki:
<ul data-role="listview"> <li><a href="#"><img src="start.png" alt="1" class="ui-li-icon">Start</a></li> <li><a href="#"><img src="stop.png" alt="0" class="ui-li-icon">Stop</a></li> </ul>
Natomiast idąc krok dalej, można sformatować pozycje listy z miniaturkami dużych obrazków.
Przykład:
<div data-role="content"> <h2>List with thumbnails and text</h2> <ul data-role="listview" data-inset="true" <li> <a href="#"> <img src="html5_e.png" /> <h2>HTML5 - 1st</h2> <p>The first icon of HTML5 ... Lorem Ipsum ... </p> </a> </li> <li> <a href="#"> <img src="html5_c.png" /> <h2>HTML5 - 2nd</h2> <p>Another icon of HTML5 ... Ipsum dolor ... </p> </a> </li> </ul> </div>
Pełny przykład dostępny tutaj.
Listy są dość często używane przy tworzeniu elementów UI aplikacji dla urządzeń mobilnych.
Zdarzenia
Kolejnym ważnym elementem interakcji z użytkownikiem są zdarzenia (events). Wspominaliśmy już o nich w poprzednich artykułach. jQuery Mobile wspomaga pracę z typowymi dla urządzeń mobilnych zdarzeniami.
Po więcej informacji polecam udać się na W3Schools:
http://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp
http://www.w3schools.com/jquerymobile/jquerymobile_events_scroll.asp
http://www.w3schools.com/jquerymobile/jquerymobile_events_orientation.asp
Dodatkowo – jQuery Mobile Events reference:
http://www.w3schools.com/jquerymobile/jquerymobile_ref_events.asp
A na sam koniec obszerny zbiór przykładów jQuery Mobile:
http://www.w3schools.com/jquerymobile/jquerymobile_examples.asp
oraz dodatkowe zasoby:
http://www.w3schools.com/jquerymobile/jquerymobile_ref_css.asp
http://www.w3schools.com/jquerymobile/jquerymobile_ref_data.asp
Podsumowanie
W kilku ostatnich artykułach zrobiliśmy przegląd elementów i możliwości, jakie oferuje framework jQuery Mobile. Dziś poznaliśmy kolejne i podsumowaliśmy tym samym naukę podstaw jQuery Mobile.
Teraz pozostaje nam tylko tworzenie własnych projektów mobilnych. Doskonałe narzędzie do tego celu już mamy.
Dziękuję za uwagę.