tutoriais mais recente desenvolvimento web
 

jQuery Mobile Lista Visualizações



jQuery Lista Móvel Visualizações

exibições de lista no jQuery Mobile são listas HTML padrão; ordenada (<ol>) e não ordenada (<ul>) .

Para criar uma lista, aplicar a data-role="listview" ao <ol> ou <ul> elemento. Para fazer os itens tappable, especificar um link dentro de cada item da lista (<li>) :

Exemplo

<ol data-role="listview" >
  <li><a href="#">List Item</a></li>
</ol>

<ul data-role="listview" >
  <li><a href="#">List Item</a></li>
</ul>
Tente você mesmo "

Para estilizar suas listas com cantos arredondados e alguma margem, use a data-inset="true" atributo:

Exemplo

<ul data-role="listview" data-inset="true" >
Tente você mesmo "

Por padrão, as ligações dentro de um item da lista desliga-se automaticamente em um botão (sem necessidade de ui-class="btn" ou data-role="button" )


divisores lista

divisores lista são utilizados para organizar e agrupar os itens em categorias / secções.

Para especificar uma lista divisor, adicione o data-role="list-divider" atributo a um <li> elemento:

Exemplo

<ul data-role="listview">
  <li data-role="list-divider" >Europe</li>
  <li><a href="#">Norway</a></li>
  <li><a href="#">Germany</a></li>
</ul>
Tente você mesmo "

Se você tem uma lista em ordem alfabética, (por exemplo, um livro de telefone) jQuery Mobile adiciona automaticamente divisores apropriados, definindo a-autodividers de dados = "true" atributo na <ol> ou <ul> elemento:

Exemplo

<ul data-role="listview" data-autodividers="true" >
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>
Tente você mesmo "

A-autodividers de dados = "true" atributo cria divisores com primeiras letras uppercased do texto do item.


Exemplos

mais Exemplos

Somente leitura listas
Como criar listas sem ligações (não será botões e não tappable).

painéis
Como inserir painéis para a sua lista de itens.