Widok listy jQuery Mobile

Widok listy jQuery Mobile

Widoki list w jQuery Mobile są standardowymi listami HTML: listami uporządkowanymi (<ol>) i liście nieuporządkowane (<ul>).

Aby utworzyć listę, dodaj atrybut data-role="listview" do elementów <ol> lub <ul>. Aby uczynić te elementy klikalne, określ link w każdym elemencie listy (<li>):

Przykład

<ol data-role="listview">
  <li><a href="#">Punkt listy</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">Punkt listy</a></li>
</ul>

Spróbuj sam

Jeśli chcesz dodać zaokrąglone rogi i marginesy do listy, użyj atrybutu data-inset="true":

Przykład

<ul data-role="listview" data-inset="true">

Spróbuj sam

Wskazówka:Domyślnie, elementy listy są automatycznie przekształcane w przyciski (nie wymaga data-role="button").

Separator listy

Separator listy (List Dividers) służą do organizacji i grupowania elementów w kategorie/oddziały.

Jeśli chcesz określić separator listy, dodaj atrybut data-role="list-divider" do elementu <li>:

Przykład

<ul data-role="listview">
 <li data-role="list-divider">Europa</li>
  <li><a href="#">Francja</a></li>
  <li><a href="#">Niemcy</a></li>
</ul>

Spróbuj sam

Jeśli Twoja lista jest uporządkowana alfabetycznie (np. adresy), jQuery Mobile automatycznie dodaje odpowiednie separatorzy, ustawiając atrybut data-autodividers="true" na elementach <ol> lub <ul>:

Przykład

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adam</a></li>
  <li><a href="#">Angela</a></li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

Spróbuj sam

Wskazówka:Atrybut data-autodividers="true" tworzy separatorzy, konwertując pierwsze litery tekstów elementów listy na wielkie litery.

Filtrera wyszukiwania

Jeśli chcesz dodać pole wyszukiwania do listy, użyj atrybutu data-filter="true":

Przykład

<ul data-role="listview" data-filter="true"</ul>

Spróbuj sam

Domyślnie, tekst w polu wyszukiwania brzmi "Filtruj elementy..."。

Aby zmodyfikować domyślny tekst, użyj atrybutu data-filter-placeholder:

Przykład

<ul data-role="listview" data-filter="true" data-filter-placeholder="Wyszukaj nazwę">

Spróbuj sam

Więcej przykładów

Lista tylko do odczytu
Jak utworzyć listę bez linków (nie przycisk, nie można kliknąć).