jQuery Mobile Liste Icons
Das Standardsymbol für jedes Listenelement einen Link enthält , ist "carat-r" (Pfeil nach rechts). Um dies zu ändern , um ein anderes Symbol, verwenden Sie die data-icon - Attribut auf der Liste Element , das Sie ändern möchten:
Beispiel
<ul data-role="listview">
<li><a href="#">Default is right
arrow</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>
Versuch es selber " data-icon="false" wird das Symbol zu entfernen.
Eine vollständige Referenz aller jQuery Mobile Button Icons, gehen Sie bitte auf unsere jQuery Mobile Icons Referenz .
16x16 Icons
Um eine Standard 16x16px Symbol zu Ihrer Liste hinzufügen, fügen Sie ein <img> Element in der Verbindung mit einer Klasse von "ui-li-Symbol":
Beispiel
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>
</ul>
Versuch es selber " jQuery Mobile Liste Bilder
Für Bilder , die größer als 16x16px, ein Add <img> Element innerhalb eines Listenelement als erstes Kind - Element (ohne Klassennamen).
jQuery Mobile wird das Bild automatisch skalieren zu 80x80px :
Beispiel
<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>
Versuch es selber " Verwenden Sie Standard-HTML-Liste mit Informationen zu füllen:
Beispiel
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free,
open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
Versuch es selber " Split Buttons
Um eine geteilte Liste mit einer vertikalen Trennleiste erstellen, indem Sie zwei Verbindungen innerhalb der <li> Element.
jQuery Mobile wird den zweiten Link auf der rechten Seite der Liste mit der rechten automatisch platzieren arrow-icon . Und der Text innerhalb des Link (falls vorhanden) wird, wenn ein Benutzer schweben über dem Symbol angezeigt werden:
Beispiel
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some
Text</a>
</li>
</ul>
Versuch es selber " Hier können einige Seiten und Dialoge hinzufügen, um die Links, um mehr funktionsfähig zu machen:
Beispiel
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download"
data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>
<div data-role="page" id="download" data-dialog="true">
Versuch es selber " Graf Bubbles
Count Blasen werden verwendet, um Zahlen mit Listenelementen, wie Nachrichten in einem Postfach zugeordnet anzuzeigen:
Zur Zählung Blasen, verwenden Sie ein Inline - Element, wie zum Beispiel hinzufügen <span> , mit Klasse "ui-li-count" und fügen Sie eine Nummer:
Beispiel
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count" >25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count" >432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count" >7</span></a></li>
</ul>
Versuch es selber " Hinweis: Um die richtige Nummer in einer Zählung Blase zeigen, muss es programmatisch aktualisiert werden. Dies wird in einem späteren Kapitel erläutert.
Mehr Beispiele
Popup - Listen
Wie ein Popup-Liste zu erstellen.
Klapp - Listen
Wie Listen zu erstellen, die das Verstecken und Inhalt.
Klapp - Popup - Listen
Wie eine zusammenklappbare Popup-Liste zu erstellen.
Volle Breite zusammenklappbare Listen
Mit Hilfe der data-inset="false" Attribut auf "collapsibles/collapsible set" eine volle Breite Listenansicht zu aktivieren.
Mehr Content - Formatierung
Wie einen Kalender zu machen.