jQuery Mobile-Listeninhalt

jQuery Mobile Liste Vorschaubilder

Für Bilder größer als 16x16px fügen Sie ein <img>-Element im Link hinzu.

jQuery Mobile passt automatisch die Bilder an bis zu 80x80px an:

Beispiel

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

Probieren Sie es selbst aus

Verwenden Sie standardmäßiges HTML, um Listen mit Informationen zu füllen:

Beispiel

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome ist ein kostenloser Open-Source-Webbrowser. Er wurde 2008 veröffentlicht.</p>
    </a>
  </li>
</ul>

Probieren Sie es selbst aus

jQuery Mobile Liste Symbole

Um Ihrem Liste ein 16x16px großes Symbol hinzuzufügen, fügen Sie der <img>-Element die class="ui-li-icon"-Eigenschaft hinzu:

Beispiel

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

Probieren Sie es selbst aus

Teilungsbutton

Um eine Liste mit vertikalen Trennleisten zu erstellen, platzieren Sie zwei Links im <li>-Element.

jQuery Mobile fügt automatisch dem zweiten Link einen blauen Pfeil-Icon-Stil hinzu, und der Text im Link (falls vorhanden) wird angezeigt, wenn der Benutzer den Pfeil berührt:

Beispiel

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

Probieren Sie es selbst aus

Durch das Hinzufügen von Seiten und Dialogen kann die Funktion von Links gestärkt werden:

Beispiel

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Browser herunterladen</a>
  </li>
</ul>

Probieren Sie es selbst aus

Zählfarbe

Zählfarben werden verwendet, um die Anzahl, die mit einem Listelement verbunden ist, anzuzeigen, z.B. Nachrichten in einer E-Mail:

Um eine Zählfarbe hinzuzufügen, verwenden Sie inline-Elemente, wie z.B. <span>, und setzen Sie die class "ui-li-count"-Eigenschaft und fügen Sie die Zahl hinzu:

Beispiel

<ul data-role="listview">
  <li><a href="#">Posteingang<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Gesendet<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Müll<span class="ui-li-count">7</span></a></li>
</ul>

Probieren Sie es selbst aus

Anmerkung:Um die richtige Nummer in der Zählpuppe anzuzeigen, muss ein programmatischer Update durchgeführt werden. Wir werden dies im nächsten Kapitel erläutern.

Mehr Beispiele

Ändern Sie das Standard-Link-Icon für Listenobjekte
Wie man verschiedene Link-Icons für Listenobjekte einstellt (der Pfeil nach rechts ist der Standard).
Klappbare Liste
Wie man eine Liste zum Verbergen und Anzeigen von Inhalten erstellt.
Mehr Inhalte im Format
Wie man einen Kalender macht.