29 marca, 2014 
Dominik-W 
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ę.
Opublikowano w 
Tags: 
