Conteúdo da Lista do jQuery Mobile

Miniaturas de lista do jQuery Mobile

Para imagens maiores que 16x16px, adicione o elemento <img> no link.

jQuery Mobile ajusta automaticamente as imagens para 80x80px:

Exemplo

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

Experimente você mesmo

Use HTML padrão para preencher listas com informações:

Exemplo

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Navegador web gratuito e de código aberto Google Chrome. Lançado em 2008.</p>
    </a>
  </li>
</ul>

Experimente você mesmo

Ícones de lista do jQuery Mobile

Para adicionar ícones de 16x16px à sua lista, adicione a propriedade class="ui-li-icon" ao elemento <img>:

Exemplo

<li><a href="#"><img src="us.png" alt="EUA" class="ui-li-icon">EUA</a></li>

Experimente você mesmo

Botão de divisão

Para criar uma lista dividida com uma barra lateral vertical, coloque dois links dentro do elemento <li>.

jQuery Mobile adiciona automaticamente o estilo de ícone de seta azul para o segundo link, o texto do link (se houver) será exibido quando o usuário passar sobre o ícone:

Exemplo

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Algum Texto</a>
  </li>
</ul>

Experimente você mesmo

Ao adicionar páginas e diálogos, você pode tornar os links mais funcionais:

Exemplo

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Baixar navegador</a>
  </li>
</ul>

Experimente você mesmo

Bolhas de contagem

As bolhas de contagem são usadas para exibir números relacionados a itens da lista, por exemplo, mensagens em uma caixa de e-mail:

Para adicionar bolhas de contagem, use elementos inline, como <span>, defina a propriedade class "ui-li-count" e adicione o número:

Exemplo

<ul data-role="listview">
  <li><a href="#">Caixa de Entrada<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Enviado<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Lixo<span class="ui-li-count">7</span></a></li>
</ul>

Experimente você mesmo

Notas:Para exibir o número correto no泡泡计数，é necessário atualizar programaticamente. Vamos explicar isso no próximo capítulo.

Mais exemplos

Alterar o ícone de link padrão do item da lista
Como definir diferentes ícones de link para itens da lista (seta para direita é a padrão).
Lista Expandível
Como criar uma lista oculta e exibida.
Mais formatos de conteúdo
Como fazer um calendário.