jQuery Lista móveis Icons
O ícone padrão para cada item da lista que contém um link é "carat-r" (seta para a direita). Para mudar isso para um outro ícone, use o data-icon atributo no item da lista que você deseja modificar:
Exemplo
<ul data-role="listview">
<li><a href="#">Default is right
arrow</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li
data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li
data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
Tente você mesmo " data-icon="false" irá remover o ícone.
Para uma referência completa de todos os ícones de botão jQuery Mobile, por favor, vá ao nosso jQuery Ícones móveis Referência .
Icons 16x16
Para adicionar um ícone 16x16px padrão à sua lista, adicione um <img> elemento dentro do vínculo com uma classe de "ui-li-ícone":
Exemplo
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>
</ul>
Tente você mesmo " jQuery Lista Móvel Miniaturas
Para imagens maiores do que 16x16px, adicione um <img> elemento dentro de um item da lista como o primeiro elemento filho (sem nome da classe).
jQuery Mobile irá dimensionar automaticamente a imagem para 80x80px :
Exemplo
<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>
Tente você mesmo " Use HTML padrão para preencher a lista com informações:
Exemplo
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free,
open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
Tente você mesmo " dividir Botões
Para criar uma lista de divisão com uma barra de divisão vertical, colocar dois links dentro do <li> elemento.
jQuery Mobile irá automaticamente colocar o segundo link no lado direito da lista, com um direito arrow-icon . E o texto dentro do link (se houver) será mostrada quando um foco do usuário em cima do ícone:
Exemplo
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some
Text</a>
</li>
</ul>
Tente você mesmo " Permite adicionar algumas páginas e diálogos para fazer as ligações mais funcional:
Exemplo
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download"
data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>
<div data-role="page" id="download" data-dialog="true">
Tente você mesmo " Contagem Bubbles
bolhas de contagem são usados para exibir os números associados com os itens da lista, como mensagens em uma caixa de correio:
Para adicionar bolhas contagem, use um elemento inline, tais como <span> , com a classe "ui-li-count" e adicionar um número de telefone:
Exemplo
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count" >25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count" >432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count" >7</span></a></li>
</ul>
Tente você mesmo " Nota: Para mostrar o número correto em uma bolha contagem, ele deve ser atualizado por meio de programação. Isso será explicado em um capítulo posterior.
mais Exemplos
listas pop-up
Como criar uma lista pop-up.
listas recolhíveis
Como criar listas que ocultar e mostrar conteúdo.
Listas pop-up dobráveis
Como criar uma lista pop-up desmontável.
Listas recolhíveis largura total
Usando a data-inset="false" atributo em "collapsibles/collapsible set" para permitir que um listview largura total.
Mais de formatação de conteúdo
Como fazer um calendário.