Zawartość listy jQuery Mobile

Miniatury listy jQuery Mobile

Dla obrazów większych niż 16x16px, dodaj element <img> do linku.

jQuery Mobile automatycznie dostosuje obraz do 80x80px:

Przykład

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

Spróbuj sam

Użyj standardowego HTML do wypełnienia listy z informacjami:

Przykład

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome darmowy, otwarty źródło przeglądarki internetowej. Wydana w 2008 roku.</p>
    </a>
  </li>
</ul>

Spróbuj sam

Ikony listy jQuery Mobile

Aby dodać do swojej listy ikonę o rozmiarze 16x16px, dodaj atrybut class="ui-li-icon" do elementu <img>:

Przykład

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

Spróbuj sam

Przycisk rozwijany

Aby utworzyć listę rozwijaną z pionową linią rozdzielającą, umieść dwa linki w elemencie <li>.

jQuery Mobile automatycznie doda styl ikony strzałki niebieskiej do drugiego linku, tekst w linku (jeśli istnieje) będzie wyświetlany, gdy użytkownik przewija ikonę:

Przykład

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Niektwy tekst</a>
  </li>
</ul>

Spróbuj sam

Dodając strony i okna dialogowe, można wzmocnić funkcje linków:

Przykład

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Pobierz przeglądarkę</a>
  </li>
</ul>

Spróbuj sam

Bańka licznika

Bańka licznika służy do wyświetlania liczby związanej z elementem listy, np. wiadomości w poczcie:

Aby dodać bańkę licznika, użyj elementu wewnętrznego, np. <span>, ustaw atrybut class "ui-li-count" i dodaj liczbę:

Przykład

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Wysłane<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Śmieci<span class="ui-li-count">7</span></a></li>
</ul>

Spróbuj sam

Komentarz:Aby wyświetlić poprawną liczbę w bańce licznika, konieczna jest aktualizacja programowa. Omówimy to w następnym rozdziale.

Więcej przykładów

Zmiana domyślnych ikon linków elementów listy
Jak ustawić różne ikony linków dla elementów listy (domyślnie używany jest strzałka w prawo).
Listy rozwijane
Jak stworzyć listę ukrytych i wyświetlanych elementów.
Więcej formatów treści
Jak zrobić kalendarz.