Nauka jQuery Mobile

javascript-html5-tutorial.pl

Nauka jQuery Mobile – UI, przyciski, ikony, efekty przejść

Marzec 16th, 2014

Dominik-W

Dziś kolejny tutorial i dalsza nauka jQuery Mobile poprzez realizację przykładów.

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ę.

Dominik Wlazłowski

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.