jQuery Mobile-Listenvista

jQuery Mobile-Listenvista

Die Listenansicht in jQuery Mobile ist ein standardmäßiger HTML-Liste: Aufzählungsliste (<ol>) und Aufzählungsliste (<ul>).

Um eine Liste zu erstellen, fügen Sie dem <ol> oder <ul>-Element das Attribut data-role="listview" hinzu. Um diese Elemente klickbar zu machen, geben Sie in jedem Listelement (li) einen Link an:

Beispiel

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

Probieren Sie es selbst aus

Um Kantenradius und Außenabstand zur Liste hinzuzufügen, verwenden Sie das Attribut data-inset="true":

Beispiel

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

Probieren Sie es selbst aus

Hinweis:Standardmäßig werden die Listelemente in der Liste automatisch in Schaltflächen umgewandelt (ohne data-role="button" erforderlich).

Listentrennzeichen

Listentrennzeichen (List Dividers) werden verwendet, um Elemente zu organisieren und zu kombinieren, um Kategorien/Kapitel zu bilden.

Um Trennzeichen in der Liste zu definieren, fügen Sie dem <li>-Element das Attribut data-role="list-divider" hinzu:

Beispiel

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

Probieren Sie es selbst aus

Wenn Ihre Liste alphabetisch geordnet ist (z.B. Adressbuch), fügt jQuery Mobile automatisch geeignete Trennzeichen hinzu, indem Sie das Attribut data-autodividers="true" auf den <ol> oder <ul>-Elementen setzen:

Beispiel

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

Probieren Sie es selbst aus

Hinweis:Das Attribut data-autodividers="true" erstellt Trennzeichen durch das Großschreiben der ersten Buchstaben der Textelemente der Liste.

Suchfilter

Um eine Suchleiste in der Liste hinzuzufügen, verwenden Sie das Attribut data-filter="true":

Beispiel

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

Probieren Sie es selbst aus

Standardmäßig ist der Text im Suchfeld "Filter items...".

Um den Standardtext zu ändern, verwenden Sie das Attribut data-filter-placeholder:

Beispiel

<ul data-role="listview" data-filter="true" data-filter-placeholder="Suchname">

Probieren Sie es selbst aus

Mehr Beispiele

Schreibgeschützte Liste
Wie man eine Liste ohne Links erstellt (nicht Schaltfläche, nicht klickbar).