jQuery Mobile Listeninhalt
jQuery Mobile Listensymbole
Standardmäßig enthält jedes Listenelement ein Pfeilsymbol "carat-r" (Pfeil nach rechts). Um dieses Symbol zu ändern, können Sie das Attribut data-icon verwenden:
Beispiel
<li><a href="#">Standard ist rechter Pfeil</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
Selbst ausprobieren »
 |
data-icon="false" entfernt das Symbol. |
|---|
Eine vollständigere Sammlung von jQuery Mobile Button-Symbolen finden Sie in unseremjQuery Mobile Icons-Referenzhandbuch。
16x16-Symbole
Wenn Sie Ihrer Liste standardmäßige 16x16px-Symbole hinzufügen möchten, können Sie ein <img>-Element in das Listenelement einfügen und die Klasse "ui-li-icon" verwenden:
Beispiel
<li><a href="../index.html"><img src="us.png.html" alt="USA" class="ui-li-icon">USA</a></li>
</ul>
Selbst ausprobieren »
jQuery Mobile Listen-Miniaturansichten
Für Bilder, die größer als 16x16px sind, fügen Sie ein <img>-Element in den Link ein.
jQuery Mobile skaliert die Bilder automatisch auf 80x80px:
Beispiel
<li><a href="../index.html"><img src="chrome.png.html"></a></li>
</ul>
Selbst ausprobieren »
Verwenden Sie Standard-HTML, um Listeninformationen hinzuzufügen:
Beispiel
<li>
<a href="../index.html">
<img src="chrome.png.html">
<h2>Google Chrome</h2>
<p>Google Chrome ist ein kostenloser, quelloffener Webbrowser. Veröffentlicht im Jahr 2008.</p>
</a>
</li>
</ul>
Selbst ausprobieren »
jQuery Mobile Listensymbole
Verwenden Sie class="ui-li-icon" für das <img>-Element der Liste, um 16x16px-Symbole hinzuzufügen:
Beispiel
Selbst ausprobieren »
Geteilte Schaltflächen
In jQuery Mobile-Listen müssen Sie manchmal zwei verschiedene Vorgänge am Inhalt einer Option ausführen. In diesem Fall müssen Sie die Link-Schaltfläche in der Option aufteilen. Um die Aufteilung zu erreichen, fügen Sie ein weiteres <a>-Element innerhalb des <li>-Elements hinzu, und der Split-Effekt kann auf der Seite umgesetzt werden.
jQuery Mobile legt den zweiten Link automatisch als blaues Pfeilsymbol fest. Der Linktext des Symbols (falls vorhanden) wird angezeigt, wenn der Benutzer mit der Maus über das Symbol fährt:
Beispiel
<li>
<a href="../index.html"><img src="chrome.png.html"></a>
<a href="../index.html">Etwas Text</a>
</li>
</ul>
Selbst ausprobieren »
Fügen Sie einige Seiten und Dialoge hinzu, um die Link-Funktionalität reichhaltiger zu machen:
Beispiel
<li>
<a href="../index.html"><img src="chrome.png.html"></a>
<a href="../index.html" data-rel="dialog">Browser herunterladen</a>
</li>
</ul>
Selbst ausprobieren »
Zählblasen
Zählblasen werden verwendet, um Zahlen anzuzeigen, die sich auf Listenelemente beziehen, wie z. B. die E-Mails in einem Postfach:
Um Zählblasen hinzuzufügen, verwenden Sie ein Inline-Element wie <span>, setzen Sie das Attribut class "ui-li-count" und fügen Sie die Zahl hinzu:
Beispiel
<li><a href="../index.html">Posteingang<spanclass="ui-li-count">25</span></a></li>
<li><a href="../index.html">Postausgang<spanclass="ui-li-count">432</span></a></li>
<li><a href="../index.html">Papierkorb<spanclass="ui-li-count">7</span></a></li>
</ul>
Selbst ausprobieren »
Hinweis:Um eine Zählblase korrekt anzuzeigen, muss die Programmiermethode geändert werden. Dies wird in späteren Kapiteln erklärt.
Weitere Beispiele
Wie man eine Popup-Liste erstellt
Wie man das Standard-Link-Symbol von Listenelementen festlegt (Standard ist ein Rechtspfeil).
Wie man eine einklappbare Popup-Liste erstellt.
Wie man eine Liste erstellt, die ein- oder ausgeblendet werden kann.
Wie man einen Kalender erstellt.