jQuery Mobilna Lista ikon
Domyślna ikona dla każdego elementu listy zawierającej link to "carat-r" (strzałka w prawo). Aby zmienić na inną ikonę, należy użyć data-icon atrybut elementu listy, którą chcesz zmodyfikować:
Przykład
<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>
Spróbuj sam " data-icon="false" usunie ikonę.
Aby uzyskać pełny opis wszystkich ikon przycisków jQuery telefonów, przejdź do naszej jQuery Ikony Telefony Reference .
16x16 Ikony
Aby dodać standardową ikonę 16x16px do swojej listy, dodać <img> elementu wewnątrz powiązania z klasą "UI-li-ikoną":
Przykład
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>
</ul>
Spróbuj sam " Miniatury Lista jQuery komórkowy
Dla obrazów większych niż 16x16px dodaj <img> elementu wewnątrz elementu listy jako pierwszego elementu podrzędnego (bez nazwy klasy).
jQuery Mobile automatycznie przeskalować obraz do 80x80px :
Przykład
<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>
Spróbuj sam " Użyj standardowego kodu HTML, aby wypełnić listę z informacjami:
Przykład
<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>
Spróbuj sam " dzielona Przyciski
Aby utworzyć listę split z pionowym pasku rozdzielacza, należy umieścić dwa linki wewnątrz <li> elementu.
jQuery Mobile automatycznie umieścić drugi człon po prawej stronie listy z prawej arrow-icon . A tekst wewnątrz łącznika (jeśli w ogóle) będą wyświetlane, gdy użytkownik unoszą nad ikoną:
Przykład
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some
Text</a>
</li>
</ul>
Spróbuj sam " Dodajmy kilka stron i okien dialogowych, aby uczynić bardziej funkcjonalne linki:
Przykład
<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">
Spróbuj sam " hrabia Bubbles
Pęcherzyki count służą do wyświetlania liczb związanych z elementów listy, takie jak wiadomości w skrzynce pocztowej:
Aby dodać pęcherzyki count, należy użyć elementu inline, takich jak <span> , z klasą "ui-li-count" i dodać numer:
Przykład
<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>
Spróbuj sam " Uwaga: Aby wyświetlić odpowiednią liczbę w bańce hrabiego, musi być aktualizowany programowo. Zostanie to wyjaśnione w dalszych rozdziałach.
Więcej przykładów
wykazy popup
Jak utworzyć listę popup.
wykazy składane
Jak tworzyć listy ukrywania i wyświetlania zawartości.
Wykazy składane popup
Jak utworzyć listę składaną podręczne.
Pełna szerokość wykazy składane
Korzystanie z data-inset="false" atrybut "collapsibles/collapsible set" , aby umożliwić pełną szerokość ListView.
Więcej formatowanie treści
Jak zrobić kalendarz.