Nauka jQuery Mobile – dialogi, panele, listy. Podsumowanie. - javascript-html5-tutorial.pl

javascript-html5-tutorial.pl

Nauka jQuery Mobile – dialogi, panele, listy. Podsumowanie.

Marzec 29th, 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ę.

Dominik Wlazłowski

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem. Bloger 🙂 Anty-lewak 🙂 Pasjonat programowania, nowych technologii, a także sportu i motoryzacji.