jQuery Mobile elenco dei contenuti
icona di jQuery Lista cellulari
Per impostazione predefinita, ogni elemento della lista conterrà una freccia "carat-r" (freccia a destra). Se si desidera modificare questa icona è possibile utilizzare l'attributo data-icon:
Esempi
<Li> <a href="#"> default è freccia destra </a> </ li>
<Li dati-icon = "plus"> <a href="#"> data-icon = "plus" </a> </ li>
<Li dati-icon = "meno"> <a href="#"> data-icon = "meno" </a> </ li>
<Li dati-icon = "delete"> <a href="#"> data-icon = "cancellare" </a> </ li>
<Li dati-icon = "location"> <a href="#"> data-icon = "location" </a> </ li>
<Li dati-icon = "false"> <a href="#"> dati-icon = "false" </a> </ li>
</ Ul>
Prova »
 | Dati-icon = "false" rimuoverà l'icona. |
|---|
Una più completa jQuery Mobile icone dei pulsanti, si prega di visitare il nostro jQuery Mobile Manuale icona di riferimento .
icona 16x16
Se si desidera aggiungere alla tua lista di criteri 16x16px icona, è possibile aggiungere l'elemento <img> nelle voci di elenco e utilizzare la categoria "ui-li-icona":
Esempi
<Li> <a href="#"> <img src = "us.png" alt = "USA" class = "ui-li-icona"> Stati Uniti d'America </a> </ li>
</ Ul>
Prova »
jQuery Mobile nell'elenco delle miniature
Un'immagine più grande di 16x16px, aggiungere l'elemento <img> nel link.
jQuery Mobile ridimensiona automaticamente l'immagine a 80x80px:
Utilizza lo standard HTML per aggiungere un elenco di informazioni:
Esempi
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
</a>
</li>
</ul>
Prova »
icona di jQuery Lista cellulari
Nella lista dei <img> elemento usa class = "ui-li-icona" Aggiungi 16x16px icona:
pulsante Dividi
JQuery mobile nella lista, a volte è necessario effettuare due diverse opzioni per il contenuto dell'operazione, quindi, la necessità di collegare opzioni tasto segmentazione. Il metodo di suddivisione per raggiungere <li> per aggiungere un elemento <a>, può ottenere l'effetto di dividere la pagina.
jQuery Mobile imposterà automaticamente l'icona della freccia blu secondo collegamento, viene visualizzata l'icona quando il testo del link (se presente) l'utente passa sopra l'icona:
Esempi
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>
Prova »
Aggiungere alcune pagine e finestre di dialogo per rendere il collegamento più ricco di funzionalità:
Esempi
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">下载浏览器</a>
</li>
</ul>
Prova »
Bubble Digital
numeri Bubble vengono utilizzati per visualizzare il numero associato elemento della lista, come ad esempio una casella di posta:
Per aggiungere numeri bolla, utilizzando gli elementi inline come <span>, impostare l'attributo di classe "ui-li-count" e aggiungere i numeri:
Esempi
<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>
Prova »
Nota: La corretta visualizzazione di una bolla digitale, è necessario modificare la programmazione. Questo sarà spiegato nei capitoli successivi.
Altri esempi
lista Pop
Come creare una lista del pop
Modificare le voci di elenco icona di collegamento di default
Come impostare le voci di elenco collegamento predefinita (default icona freccia a destra).
lista pop pieghevole
Come creare un elenco comprimibile del pop.
lista pieghevole
Come creare uno spettacolo / nascondere la lista.
Altri formati
Come creare un calendario.