jQuery Mobile Inhaltsliste
jQuery Mobile List icon
Standardmäßig wird jedes Listenelement enthalten ein Pfeilsymbol "Karat-r" (Pfeil nach rechts). Wenn Sie dieses Symbol ändern, um die Daten-Symbol-Attribut verwenden:
Beispiele
<Li> <a href="#"> Standard ist Pfeil nach rechts </a> </ li>
<Li Daten-Symbol = "plus"> <a href="#"> Daten-icon = "plus" </a> </ li>
<Li Daten-Symbol = "minus"> <a href="#"> Daten-icon = "minus" </a> </ li>
<Li Daten-Symbol = "Löschen"> <a href="#"> Daten-Symbol = "löschen" </a> </ li>
<Li Daten-Symbol = "location"> <a href="#"> Daten-icon = "location" </a> </ li>
<Li Daten-Symbol = "false"> <a href="#"> Daten-icon = "false" </a> </ li>
</ Ul>
Versuchen »
 | Daten-Symbol = "false" wird das Symbol zu entfernen. |
|---|
Eine vollständigere jQuery Mobile Button Icons, bitte besuchen Sie unsere jQuery Mobile Symbol - Referenzhandbuch .
16x16 icon
Wenn Sie in die Liste der Kriterien 16x16px Symbol hinzufügen möchten, können Sie das Element <img> in die Listenelemente und verwenden Sie den "ui-li-Symbol" Kategorie hinzufügen:
Beispiele
<Li> <a href="#"> <img src = "us.png" alt = "USA" class = "ui-li-Symbol"> USA </a> </ li>
</ Ul>
Versuchen »
jQuery Mobile Liste Thumbnail
Ein Bild größer als 16x16px, fügen Sie das Element <img> in den Link.
jQuery Mobile wird automatisch skaliert, um das Bild zu 80x80px:
Beispiele
<li><a href="#"><img src="chrome.png"></a></li>
</ul>
Versuchen »
Verwenden Sie Standard-HTML eine Liste von Informationen hinzuzufügen:
Beispiele
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
</a>
</li>
</ul>
Versuchen »
jQuery Mobile List icon
In der Liste der <img> -Element-Klasse verwendet = "ui-li-Symbol" Add 16x16px Symbol:
Split-Taste
JQuery Mobile in der Liste, ist es manchmal notwendig ist, zwei verschiedene Optionen für den Inhalt der Operation zu machen, dann verbinden sich die Notwendigkeit einer Schaltfläche Optionen Segmentierung. Das Verfahren zur Segmentierung zu erreichen <Li> Element eine <a> Element hinzuzufügen, kann es die Wirkung der Aufteilung der Seite erreichen.
jQuery Mobile wird den zweiten Link blauen Pfeil automatisch eingestellt, wird das Symbol angezeigt wird, wenn der Link-Text (falls vorhanden) in der Benutzer schwebt über das Symbol:
Beispiele
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>
Versuchen »
Fügen Sie einige Seiten und Dialogfelder der Link mehr feature-rich zu machen:
Beispiele
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">下载浏览器</a>
</li>
</ul>
Versuchen »
Blase Digitale
Bubble-Nummern werden verwendet, um die Nummer zugeordnet Listenelement angezeigt werden, wie zum Beispiel eine Mailbox:
So fügen Sie Blase Zahlen, die Inline-Elemente wie <span> verwenden, stellen Sie die Klasse "ui-li-count" Attribut und fügen Sie die Zahlen:
Beispiele
<li><a href="#">收件箱<span class="ui-li-count" >25</span></a></li>
<li><a href="#">发件箱<span class="ui-li-count" >432</span></a></li>
<li><a href="#">垃圾箱<span class="ui-li-count" >7</span></a></li>
</ul>
Versuchen »
Hinweis: Die korrekte Anzeige eines digitalen Blase können Sie die Programmierung ändern müssen. Dies wird in den folgenden Kapiteln erläutert.
Weitere Beispiele
Pop - Liste
Wie eine Liste von Pop zu erstellen
Ändern Sie die Standard - Link - Symbol Listenelemente
Wie die Standard-Link-Symbol Listenelemente zu setzen (Pfeil nach rechts Standard).
Klapp - Pop - Liste
Wie eine zusammenklappbare Liste von Pop zu erstellen.
Liste faltbar
Wie eine Show / Hide-Liste erstellen.
Weitere Formate
Wie einen Kalender zu erstellen.