Listen mit jQuery Mobile

Die typische Liste in HTML besteht aus den HTML-Befehlen <ul>, <ol> für die Art der Liste und <li> für jeden einzelnen Listenpunkt.

In jQuery Mobile kommt bei den Listen noch das Attribut data-role="listview" bei der Art der Liste dazu.

Beispiel für Listen unter jQuery Mobile

<ul data-role="listview">
  <li><a href="#">Listenpunkt A</a></li>
  <li><a href="#">Listenpunkt B</a></li>
</ul>
<ol data-role="listview">
  <li><a href="#">Listenpunkt mit automatischer Nr.</a></li>
  <li><a href="#">Listenpunkt mit automatischer Nr.</a></li>
</ol>

Wenn die Listen mit runden Ecken angezeigt warden sollen, wir das Attribut data-inset="true" bei ul bzw. ol eingefügt.

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

Liegt eine alphabetisch sortierte Liste vor, deren Einträge sonnvoller weiße mit Trennung durch den Großbuchstaben erfolgen soll, kann dies durch das Attribut data-autodividers="true" bei ul bzw. ol.

Dies macht beispielsweise bei Adresslisten und Telefonlisten bei den Namen Sinn. Die Trennbuchstaben werden automatisch in Großbuchstaben angezeigt.

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Anette</a></li>
  <li><a href="#">Axel</a></li>
  <li><a href="#">Bernd</a></li>
  <li><a href="#">Elke</a></li>
  <li><a href="#">Emil</a></li>
  ...
</ul>

Möchte man selber Trenner innerhalb der Liste einbauen, funktioniert das durch das Einfügen eines <li> mit der Erweiterung data-role="list-divider" am gewünschten Platz.

<ul data-role="listview">
  <li data-role="list-divider">gelb</li>
  <li><a href="#">Banane</a></li>
  <li><a href="#">Zitrone</a></li>
</ul>

Icons für Listen unter jQuery Mobile

Die Listenpunkte können auch anstelle des Icons des Größerzeichens mit einem selber gewählten Icon angezeigt werden. Dazu wird das LI-Element mit dem Attribut data-icon="plus" erweitert.

Die Namen der zur Verfügung stehenden Icons haben wir in einem vorherigen Kapitel bereits kennen gelernt. Im Beispiel eine kleine Aufwahl:

<ul data-role="listview"> 
  <li><a href="#">Ohne Angabe, Standard</a></li>
  <li data-icon="plus"><a href="#">Pluszeichen </a></li>
  <li data-icon="minus"><a href="#">Minuszeichen</a></li>
  <li data-icon="location"><a href="#">Icon für Standort</a></li> 
  <li data-icon="delete"><a href="#">Icon Löschen</a></li>
  <li data-icon="false"><a href="#">ohne Icon!</a></li>
</ul>

Eigene Grafiken als Icons

Möchte man eigene Grafiken als Icon integrieren wird das in HTML übliche Element für Bilder genutzt. Der HTML-Befehl <img wird mit dem Attribut class="ui-li-icon" erweitert.

Typischerweise nutzt man die Größe von 16 auf 16 Pixel.

<ul data-role="listview">
  <li><a href="#"><img src="flaggea.png" alt="Flagge A" class="ui-li-icon">Land A</a></li>
</ul>

Für größere Icons über 16 auf 16 Pixel wird einfach das Bild eingebaut - dieses wird aber von jQuery Mobile automatisch auf 80 x 80 Pixel skaliert!

<ul data-role="listview">
  <li><a href="#"><img src="flaggea-gross.png" alt="Flagge A"></a></li>
</ul>

Innerhalb jeden LI-Elements können weitere HTML-Anweisungen genutzt werden.