Contenuto elenco jQuery Mobile

Anteprima della lista jQuery Mobile

Per immagini più grandi di 16x16px, aggiungi l'elemento <img> nel link.

jQuery Mobile adatta automaticamente le immagini a 80x80px:

Esempio

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

Prova personalmente

Utilizza HTML standard per riempire liste informative:

Esempio

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome, browser web open source gratuito. Pubblicato nel 2008.</p>
    </a>
  </li>
</ul>

Prova personalmente

Icona della lista jQuery Mobile

Per aggiungere un'icona di 16x16px alla tua lista, aggiungi l'attributo class="ui-li-icon" all'elemento <img>:

Esempio

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

Prova personalmente

Pulsante di divisione

Per creare una lista divisa con una barra di separazione verticale, posizionate due link all'interno dell'elemento <li>.

jQuery Mobile aggiunge automaticamente lo stile dell'icona a freccia blu per il secondo link, il testo del link (se presente) viene visualizzato quando l'utente passa sopra l'icona:

Esempio

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Qualcosa di Testo</a>
  </li>
</ul>

Prova personalmente

Aggiungendo pagine e finestre di dialogo, è possibile rendere le funzioni dei link più potenti:

Esempio

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Scarica il browser</a>
  </li>
</ul>

Prova personalmente

Bolle di conteggio

Le bolle di conteggio vengono utilizzate per visualizzare il numero relativo agli elementi della lista, ad esempio i messaggi nella posta elettronica:

Per aggiungere bolle di conteggio, utilizzare elementi inline, come <span>, impostare l'attributo class "ui-li-count" e aggiungere il numero:

Esempio

<ul data-role="listview">
  <li><a href="#">Posta in arrivo<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Spediti<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Rifiuti<span class="ui-li-count">7</span></a></li>
</ul>

Prova personalmente

Nota:Per visualizzare il numero corretto nella bolla del conteggio, è necessario aggiornare programmaticamente. Ne parleremo nel prossimo capitolo.

Più esempi

Modifica dell'icona di link predefinita degli elementi della lista
Come impostare icone di link diverse per gli elementi della lista (la freccia destra è predefinita).
Elenco pieghevole
Come creare una lista di contenuti nascosti e visibili.
Più formati di contenuto
Come fare un calendario.