
Dziś kolejny tutorial i dalsza nauka jQuery Mobile poprzez realizację przykładów.
Nauka jQuery Mobile
Zaczniemy od przycisków (buttons) i ikon. Najbardziej podstawowy przykład poniżej:
... <div data-role="main" class="ui-content"> <button class="ui-btn">My button</button> </div> ...
Stworzyliśmy przycisk, nadaliśmy klasę CSS.
W poprzednim artykule była mowa o stronach (pages) i przechodzeniu między nimi. Przechodzenie inicjowane było po kliknięciu w link. Teraz stworzymy przykład rozbudowany o przyciski.
Przykład – przyciski UI oraz przechodzenie miedzy stronami:
... <div data-role="page" id="pageone"> <div data-role="header"> <h1>Buttons demo</h1> </div> <div data-role="main" class="ui-content"> <a href="#pagetwo" class="ui-btn">Go to NEXT page</a> </div> <div data-role="footer"> <h1>Footer - first page</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>Page 2</h1> </div> <div data-role="main" class="ui-content"> <a href="#" class="ui-btn" data-rel="back">Go back</a> </div> <div data-role="footer"> <h1>Footer - second page</h1> </div> </div> ...
Przykład uruchomiony na Opera Mobile Emulator:
Pełny przykład dostępny tutaj.
Grupowanie przycisków
Przyciski mogą być grupowane na różne sposoby.
... <div data-role="page" id="pageone"> <div data-role="header"> <h1>Buttons - groups</h1> </div> <div data-role="main" class="ui-content"> <div data-role="controlgroup" data-type="vertical"> <p><strong>Vertical (default):</strong></p> <a href="#" class="ui-btn">Button 1</a> <a href="#" class="ui-btn">Button 2</a> <a href="#" class="ui-btn">Button 3</a> </div> <div data-role="controlgroup" data-type="horizontal"> <p><strong>Horizontal group:</strong></p> <a href="#" class="ui-btn">Button 1</a> <a href="#" class="ui-btn">Button 2</a> <a href="#" class="ui-btn">Button 3</a> </div> </div> <div data-role="footer"> <h1>Footer</h1> </div> </div> ...
Przykładowy widok:
Pełny przykład dostępny tutaj.
Nauka jQuery Mobile – dostępne ikonki
jQuery Mobile oferuje standardowy zestaw ikon, których możemy w prosty sposób używać. Wystarczy zdefiniować odpowiedni atrybut dla elementu. Jest to bardzo duże udogodnienie w tworzeniu UI.
Przykład – użycie ikon:
... <input type="button" value="Delete" data-icon="delete" /> <a href="#" data-role="button" data-icon="plus">Plus - link</a> <button data-icon="minus">Minus - button element</button> ...
Jak widać mamy 3 różne ikony nadane trzem różnym elementom HTML.
Przyciski mogą składać się z samych ikon, co ilustruje kolejny przykład:
<button data-icon="search" data-iconpos="notext">Search</button> <a href="" data-role="button" data-icon="plus" data-iconpos="notext"></a>
Pełny przykład dostępny tutaj.
Pozycjonowanie ikon
Możemy chcieć umieścić ikonkę nie koniecznie w domyślnym miejscu, ale na przykład po drugiej stronie elementu. Na szczęście w jQuery Mobile można to zrobić bardzo prosto.
Przykład – pozycjonowanie ikon:
... <div data-role="main" class="ui-content"> <p><strong>Test:</strong></p> <a href="#" class="ui-btn ui-icon-search ui-btn-icon-top">Top</a> <a href="#" class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a> <a href="#" class="ui-btn ui-icon-search ui-btn-icon-right">Right</a> <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Left</a> </div> ...
Określenie pozycji następuje przy użyciu klas CSS, które dostępne są w arkuszach stylów dołączonych do jQuery Mobile.
Przykładowo ui-btn to ogólna klasa przycisku, ui-icon-search definiuje ikonkę, natomiast ui-btn-icon-top – pozycję ikonki.
Pełny przykład dostępny tutaj.
Samych ikon dostępnych w jQ Mobile jest wiele, na przykład: plus, minus, delete, arrow-l, arrow-r, arrow-u, arrow-d, check, gear, refresh, forward, back, grid, star, alert, info, home, search, custom.
Pełny opis ikon wraz z przykładami na W3Schools:
http://www.w3schools.com/jquerymobile/jquerymobile_ref_icons.asp
Warto ponadto zajrzeć do dokumentacji jQuery Mobile poświęconej przyciskom:
http://demos.jquerymobile.com/1.2.0/docs/buttons/buttons-types.html
Na chwilę obecną to wszystko na temat przycisków i ikon. Chciałbym teraz jeszcze wspomnieć o efektach przejść.
Transitions – efekty przejść
Same elementy UI to jeszcze nie wszystko. jQuery Mobile dostarcza znakomitych efektów przejść (animacji).
Przykład:
<div data-role="page"> <div data-role="header"> <h1>Page one</h1> </div> <div data-role="content"> <p>Hello, <a href="#second" data-transition="pop"> open second page...</a> </p> <!-- try others: slide, slideup, slidedown, fade --> </div> </div> <div data-role="page" id="second"> <div data-role="header"> <h1>Page two</h1> </div> <div data-role="content"> Hello again! </div> </div>
Pełny przykład dostępny tutaj.
Przejście pomiędzy stronami z jednym z efektów oferowanych przez jQuery Mobile wpływa korzystnie na UX.
W przykładzie użyliśmy efektu pop:
<a href="#second" data-transition="pop">...link...</a>
Do dyspozycji są inne, na przykład: slide, slideup, slidedown, fade, czy też flow.
Pełniejszy spis z przykładami na W3Schools:
http://www.w3schools.com/jquerymobile/jquerymobile_transitions.asp
Przedstawimy jeszcze kilka przykładów bazujących na innych elementach jQuery Mobile.
Inne elementy UI i kolejne przykłady
Mamy tutaj 2 małe przykłady elementów, które mogą wzbogacić UI naszych projektów.
Przełącznik (flip switch):
<div data-role="content"> <form action="" method="post"> <div data-role="fieldcontain"> <label for="myflip">Flip switch</label> <select id="myflip" data-role="slider"> <option>ON</option> <option>OFF</option> </select> </div> </form> </div>
Przykładowo może wyglądać tak:
Jest to efektowny i użyteczny element UI spotykany w aplikacjach mobilnych.
Elementy zwijane
Dzięki data-role=”collapsible” możemy w prosty sposób tworzyć elementy zwijane / rozwijane.
Przykład:
<div data-role="main" class="ui-content"> <div data-role="collapsible" data-collapsed="false"> <h3>Touch here</h3> <p>The content - first...</p> </div> <div data-role="collapsible" data-theme="b"> <h3>Touch here</h3> <p>Hidden content - second...</p> </div> </div>
Pełny przykład dostępny tutaj.
Przykład ten nawiązuje do motywów (themes), o których też warto pamiętać.
W drugim elemencie div zdefiniowaliśmy data-theme=”b”, co oznacza inny style (kolorystyka elementów).
Po więcej przykładów polecam udać się na stronę:
http://www.w3schools.com/jquerymobile/jquerymobile_themes.asp
Tym samym kończymy dzisiejszy przegląd wielu spośród elementów UI oferowanych przez jQuery Mobile.
Podsumowanie
Jak mogliśmy się przekonać, jQuery Mobile oferuje niezwykle duże możliwości tworzenia elementów UI oraz efektów. A wszystko jest dla programisty wygodne w użyciu.
Sama nauka jQuery Mobile i praca nad projektami to dzięki temu przyjemność.
Dziękuję za uwagę.