Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Liste di elementi

Come rappresentare liste di elementi "cliccabili" e con separatori
Come rappresentare liste di elementi "cliccabili" e con separatori
Link copiato negli appunti

Le liste di elementi, nelle interfacce mobile, rappresentano lo strumento principale per organizzare la maggior parte dei dati (come cataloghi e articoli) in maniera ordinata e ben fruibile dall'utente. Perciò a questo elemento è riservato molto spazio anche in jQuery Mobile

Il markup di base è quello di una semplice lista non ordinata alla quale è associato un attributo data-role="listview":

<ul data-role="listview">
	<li><a href="link.html">Elemento 1</a></li>
	<li><a href="link2.html">Elemento 2</a></li>
	<!-- altre voci qui -->
</ul>

Una volta avviato il framework, le voci della lista occuperanno di default tutta la larghezza dello schermo e verrà aggiunta una freccia a destra.

Figura 1. Visualizzazione di default della lista
Visualizzazione di default della lista

Nell'esempio precedente ogni voce della lista contiene un link, tuttavia è possibile inserire anche contenuti senza link, nel cui caso la lista verrà visualizzata priva della freccia di navigazione a destra.

Infine, in alternativa al tag ul è possibile utilizzare il tag ol per numerare le righe della lista.

Ecco un esempio di come potrebbe essere resa visivamente la lista degli album inseriti nella nostra applicazione.

Come si nota, è anche possibile inserire markup aggiuntivo all'interno di ogni voce, in modo da personalizzare la formattazione del testo.

Separatori di voci

Se abbiamo liste molto complesse o di archivi e rubriche, è possibile utilizzare dei separatori per aumentare visivamente l'organizzazione dei contenuti. Per realizzare un separatore basterà aggiungere all'elemento in questione un attributo data-role="list-divider" senza aggiungere alcun link al suo interno:

<ul data-role="listview">
	<li><a href="link.html">Elemento 1</a></li>
	<li><a href="link2.html">Elemento 2</a></li>
	<li data-role="list-divider>Separatore</li>
	<li><a href="link.html">Elemento 3</a></li>
	<li><a href="link2.html">Elemento 4</a></li>
	<!-- altre voci... -->
</ul>

Con questa nuova funzionalità potremmo suddividere gli album per genere.

Figura 2. Separatori nelle liste
Separatori nelle liste


Ti consigliamo anche