Visualização de Lista do jQuery Mobile

Visualização de Lista do jQuery Mobile

As vistas de lista do jQuery Mobile são listas HTML padrão: listas ordenadas (<ol>) e listas não ordenadas (<ul>).

Para criar uma lista, adicione a propriedade data-role="listview" ao elemento <ol> ou <ul>. Para tornar esses itens clicáveis, especifique um link em cada item da lista (<li>):

Exemplo

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

Experimente por Si Mesmo

Para adicionar arredondamentos e margens à lista, use a propriedade data-inset="true":

Exemplo

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

Experimente por Si Mesmo

Dica:Por padrão, os itens da lista são automaticamente convertidos em botões (não é necessário data-role="button").

Separadores de lista

Os separadores de lista (List Dividers) são usados para organizar e combinar itens em categorias/setores.

Para definir os separadores da lista, adicione a propriedade data-role="list-divider" ao elemento <li>:

Exemplo

<ul data-role="listview">
 <li data-role="list-divider">Europa</li>
  <li><a href="#">França</a></li>
  <li><a href="#">Alemanha</a></li>
</ul>

Experimente por Si Mesmo

Se sua lista estiver em ordem alfabética (por exemplo, o catálogo de endereços), o jQuery Mobile adiciona automaticamente os separadores apropriados, configurando a propriedade data-autodividers="true" no elemento <ol> ou <ul>:

Exemplo

<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>

Experimente por Si Mesmo

Dica:A propriedade data-autodividers="true" cria separadores usando a primeira letra maiúscula do texto dos itens da lista.

Filtro de pesquisa

Se desejar adicionar uma caixa de pesquisa na lista, use a propriedade data-filter="true":

Exemplo

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

Experimente por Si Mesmo

Por padrão, o texto na caixa de pesquisa é "Filtrar itens...".

Para modificar o texto padrão, use a propriedade data-filter-placeholder:

Exemplo

<ul data-role="listview" data-filter="true" data-filter-placeholder="Procurar Nome">

Experimente por Si Mesmo

Mais Exemplos

Lista de Leitura
Como criar uma lista sem links (não é botão, não pode ser clicado).