Tutorial jQuery Mobile – strony, role, przejścia i inne elementy podstawowe

jQuery mobile

Poziom średnio-zaawansowany

Po wprowadzeniu do wspaniałej biblioteki jQuery Mobile, postaram się stworzyć małe samouczki zawierające kluczowe informacje potrzebne do pracy z tym rozwiązaniem.

Tutorial jQuery Mobile

Napiszemy małą, przykładową stronę w oparciu o HTML5 i jQuery Mobile, omawiając przy okazji elementy.

Role czyli data-role=”xyz”

Dzięki atrybutom HTML5 możemy zdefiniować role, jakie odgrywają poszczególne elementy. Jest to także informacja dla jQuery Mobile, o tym jak potraktować element. Może to być na przykład nadanie wyglądu odpowiednio do zdefiniowanego typu roli.

Przykładem może być

<div data-role="page"> ... </div>

czy też

<div data-role="content"> ... </div>

Oprócz stylów dla wyglądu elementów, jQuery Mobile daje nam obsługę programową.

Przykład – lista pozycji z filtrem:

...
<ul data-role="listview" data-inset="true" data-filter="true">
  <li><a href="#">Audi</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">VW</a></li>
  <li><a href="#">Skoda</a></li>
</ul>
...

W tym przypadku dostajemy od jQuery Mobile prezent w postaci obsługi funkcjonalności filtrowania.

Tutorial jQuery Mobile - framework w akcji

Tutorial jQuery Mobile – framework w akcji

Nie musimy tego programować własnoręcznie, mogąc skupić się na efekcie końcowym. Zdefiniowaliśmy data-filter=”true” i mogliśmy tworzyć dalej, framework zajął się resztą.

Co do samych ról komponentów UI dostępnych w jQuery Mobile, poniżej znajduje się lista:

Role komponentów UI wspierane przez jQuery Mobile

Role komponentów UI wspierane przez jQuery Mobile

Natomiast kompletny przykład naszej strony demo dostępny jest tutaj.

W jego zawartości znajduje się kolejny przykład elementu, mianowicie pole typu range (slider).

<form>
  <label for="slider-0">Slider input test:</label>
  <input type="range" name="slider" id="slider-0" value="25" 
    min="0" max="100" />
</form>

I ponownie, definiujemy wartości atrybutów, natomiast biblioteka wykonuje najcięższą pracę, a efekt końcowy wygląda znakomicie na urządzeniu mobilnym. Między innymi dlatego właśnie tak pozytywnie odnoszę się do tego frameworka.

jQuery Mobile wspiera różne typy elementów wejściowych formularza. Pole typu range pozwala wybierać wartości lub zakresy wartości (np. implementacja wyboru zakresu cen).

Więcej o tym elemencie oraz bardziej zaawansowane przykłady jego konfiguracji znajdziemy na stronie:

https://api.jquerymobile.com/rangeslider/

Natomiast informacje o innych typach elementów formularzy wspieranych przez jQuery Mobile dostępne są w dokumentacji:

http://demos.jquerymobile.com/1.2.0/docs/forms/docs-forms.html

Możliwości są imponujące.


Strony i przejścia w jQuery Mobile

Chciałbym jednak najpierw wspomnieć o najbardziej podstawowej rzeczy. Pracując z jQuery często sprawdzamy stan gotowości dokumentu poprzez $(document).ready(). W jQuery Mobile nie używamy tej metody.

W to miejsce powinniśmy użyć:

$(document).bind("pageinit", function() {
    alert("I'm mobile ready!");
});

Zajmijmy się teraz tematem stron. W przypadku jQuery Mobile, strony (pages, ekrany) są elementem podstawowym. Pojedyncza strona grupuje swoją zawartość w jedną logiczną całość.

Na przykład:

<div data-role="page">
    
    <div data-role="header">
        <h1>My Title</h1>
    </div>
    
    <div data-role="content">
    ...
...

Implementując kolejne strony tworzymy typowe dla aplikacji mobilnych widoki, między którymi możemy przechodzić.

Poniższy przykład ilustruje użycie stron w jQuery Mobile, oraz przechodzenie między nimi w najprostszy sposób.

Przykład:

...
<div data-role="page" id="home">
  <div data-role="header">
    <h1>Home</h1>
  </div>

  <div data-role="content">
    <p><a href="#about">About us</a></p>
  </div>
</div>

<div data-role="page" id="about">
  <div data-role="header">
    <h1>About us page</h1>
  </div>

  <div data-role="content">
    <p>We love mobile development! </p>
    <p><a href="#home">Go home</a></p>
  </div>
</div>
...

Każda strona grupuje swoją zawartość, a przechodzenie między nimi umożliwiają linki, w których parametrem href jest ID danej strony.

Warto zwrócić uwagę na nagłówki w podane w elementach z rolą „header”, na przykład:

<div data-role="header">
  <h1>About us page</h1>
</div>

Tytuł aktualnej strony stanowi także wyświetlany tytuł aplikacji.

Kompletny przykład dostępny tutaj.

Na koniec tradycyjnie zasoby dla dociekliwych:

– książka online z obszernym opisem jQuery Mobile:

http://the-jquerymobile-tutorial.org/

– jQuery Mobile na W3Schools:

http://www.w3schools.com/jquerymobile/default.asp

Podsumowanie

To koniec na dziś, ale jest jeszcze wiele tematów do poruszenia w kolejnych tutorialach jQuery Mobile.

Biblioteka ta dobrze się rozwija, ewoluuje i niektóre elementy czy metody mogą zostać z czasem uznane za przestarzałe i wycofane. Dlatego warto jest śledzić jej rozwój, jeżeli jesteśmy zainteresowani tworzeniem dla urządzeń mobilnych.

Dziękuję za uwagę.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook0Tweet about this on TwitterShare on Google+2Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.