Vista elenco jQuery Mobile

Vista elenco jQuery Mobile

La vista elenco di jQuery Mobile è una lista HTML standard: elenco ordinato (<ol>) e elenco non ordinato (<ul>).

Per creare una lista, aggiungi l'attributo data-role="listview" agli elementi <ol> o <ul>. Per rendere cliccabili questi elementi, specifica un link in ogni elemento della lista (<li>):

Esempio

<ol data-role="listview">
  <li><a href="#">Elemento della lista</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">Elemento della lista</a></li>
</ul>

Prova personalmente

Per aggiungere angoli arrotondati e margini esterni alla lista, utilizzare l'attributo data-inset="true":

Esempio

<ul data-role="listview" data-inset="true">

Prova personalmente

Suggerimento:Per default, gli elementi della lista vengono automaticamente convertiti in pulsanti (senza bisogno di data-role="button").

Separatori di lista

I separatori di lista (List Dividers) servono a organizzare e combinare gli elementi in categorie/set.

Per definire i separatori della lista, aggiungi l'attributo data-role="list-divider" all'elemento <li>:

Esempio

<ul data-role="listview">
 <li data-role="list-divider">Europa</li>
  <li><a href="#">Francia</a></li>
  <li><a href="#">Germania</a></li>
</ul>

Prova personalmente

Se la tua lista è in ordine alfabetico (ad esempio, il tuo elenco di contatti), jQuery Mobile aggiunge automaticamente i separatori appropriati, impostando l'attributo data-autodividers="true" sugli elementi <ol> o <ul>:

Esempio

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adam</a></li>
  <li><a href="#">Angela</a></li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

Prova personalmente

Suggerimento:L'attributo data-autodividers="true" crea separatori trascrivendo in maiuscolo le prime lettere dei testi degli elementi della lista.

Filtro di ricerca

Se si desidera aggiungere una casella di ricerca nella lista, utilizzare l'attributo data-filter="true":

Esempio

<ul data-role="listview" data-filter="true"</ul>

Prova personalmente

Per default, il testo nella casella di ricerca è "Filtrare gli elementi...".

Per modificare il testo predefinito, utilizzare l'attributo data-filter-placeholder: }}

Esempio

<ul data-role="listview" data-filter="true" data-filter-placeholder="Cerca nome">

Prova personalmente

Più esempi

Lista sola lettura
Come creare una lista senza link (non un pulsante, non cliccabile).