jQuery Lista cellulari Icone
L'icona di default per ogni elemento della lista contenente un link è "carat-r" (freccia a destra). Per cambiare questo per un'altra icona, utilizzare il data-icon attributo la voce di elenco che si desidera modificare:
Esempio
<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>
Prova tu stesso " data-icon="false" rimuoverà l'icona.
Per un riferimento completo di tutte le icone dei pulsanti jQuery Mobile, si prega di visitare il nostro jQuery Mobile icone di riferimento .
16x16 Icone
Per aggiungere un'icona 16x16px standard per la vostra lista, aggiungere un <img> elemento all'interno del legame con una classe di "ui-li-icona":
Esempio
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>
</ul>
Prova tu stesso " jQuery Lista mobile Miniature
Per le immagini più grandi di 16x16px, aggiungere un <img> elemento all'interno di un elemento della lista come primo elemento figlio (senza nome della classe).
jQuery Mobile scalerà automaticamente l'immagine a 80x80px :
Esempio
<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>
Prova tu stesso " Utilizzare HTML standard per riempire la lista con le informazioni:
Esempio
<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>
Prova tu stesso " Pulsanti Split
Per creare un elenco diviso con una barra di divisione verticale, posizionare due collegamenti all'interno del <li> elemento.
jQuery Mobile metterà automaticamente il secondo link sul lato destro della lista con un destro arrow-icon . E il testo all'interno del link (se presente) verrà visualizzato quando un passaggio del mouse sopra l'icona utente:
Esempio
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some
Text</a>
</li>
</ul>
Prova tu stesso " Consente di aggiungere alcune pagine e finestre di dialogo per rendere i collegamenti più funzionale:
Esempio
<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">
Prova tu stesso " conte Bolle
bolle Count vengono utilizzati per visualizzare i numeri associati a voci di elenco, come ad esempio i messaggi in una mailbox:
Per aggiungere bolle di conteggio, utilizzare un elemento inline, come ad esempio <span> , con classe "ui-li-count" e aggiungere un numero:
Esempio
<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>
Prova tu stesso " Nota: Per visualizzare il numero corretto in una bolla conteggio, esso deve essere aggiornato a livello di codice. Questo verrà spiegato in un capitolo successivo.
Altri esempi
liste Popup
Come creare un elenco a comparsa.
Gli elenchi comprimibili
Come creare elenchi che nascondono e mostrano il contenuto.
Liste popup comprimibili
Come creare un elenco a comparsa comprimibile.
Larghezza elenchi comprimibili
Utilizzando la data-inset="false" attributo "collapsibles/collapsible set" per abilitare una larghezza listview completo.
Più formattazione dei contenuti
Come fare un calendario.