jQuery Mobile lista de conteúdo
ícone jQuery Lista Móvel
Por padrão, cada item da lista conterá um ícone de seta "carat-r" (seta para a direita). Se você quer mudar este ícone pode usar o atributo-icon dados:
Exemplos
<Li> <a href="#"> padrão é seta para a direita </a> </ li>
<Li-icon data = "plus"> <a href="#">-icon data = "plus" </a> </ li>
<Data-icon Li = "menos"> <a href="#">-icon data = "menos" </a> </ li>
<Li-icon data = "delete"> <a href="#"> data-icon = "delete" </a> </ li>
<Li data-icon = "location"> <a href="#">-icon data = "location" </a> </ li>
<Data-icon Li = "false"> <a href="#"> dados-icon = "false" </a> </ li>
</ Ul>
tente »
 | -Icon dados = "false" irá remover o ícone. |
|---|
A mais completos botão ícones jQuery Mobile, visite o nosso jQuery Mobile Manual do ícone de referência .
ícone 16x16
Se você deseja adicionar à sua lista de ícone critérios 16x16px, você pode adicionar o elemento <img> em os itens da lista e usar a categoria "ui-li-ícone":
Exemplos
<Li> <a href="#"> <img src = "us.png" alt = "EUA" class = "ui-li-ícone"> EUA </a> </ li>
</ Ul>
tente »
lista de miniaturas jQuery Mobile
Uma imagem maior do que 16x16px, adicione o elemento <img> no link.
jQuery Mobile vai dimensiona automaticamente a imagem para 80x80px:
Use HTML padrão para adicionar uma lista de informações:
Exemplos
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
</a>
</li>
</ul>
tente »
ícone jQuery Lista Móvel
Na lista de <img> elemento usa class = "ui-li-ícone" Adicionar 16x16px ícone:
botão de divisão
JQuery Mobile na lista, às vezes é necessário fazer duas opções diferentes para o conteúdo da operação, então, a necessidade de opções ligar segmentação botão. O método de segmentação é conseguir <li> elemento para adicionar um elemento <a>, pode conseguir o efeito de dividir o principal.
jQuery Mobile definirá automaticamente o ícone de seta azul segunda ligação, o ícone é apresentado quando o texto do link (se houver), em que o usuário passa o mouse sobre o ícone:
Exemplos
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>
tente »
Adicionar algumas páginas e caixas de diálogo para fazer a ligação mais rico em recursos:
Exemplos
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">下载浏览器</a>
</li>
</ul>
tente »
bolha digital
números de bolha são usados para exibir o número associado item da lista, tal como uma caixa de correio:
Para adicionar números de bolha, usando os elementos em linha como <span>, defina o atributo de classe "ui-li-count" e adicionar os números:
Exemplos
<li><a href="#">收件箱<span class="ui-li-count" >25</span></a></li>
<li><a href="#">发件箱<span class="ui-li-count" >432</span></a></li>
<li><a href="#">垃圾箱<span class="ui-li-count" >7</span></a></li>
</ul>
tente »
Nota: A exibição correta de uma bolha digital, você deve modificar a programação. Isso será explicado em capítulos posteriores.
mais exemplos
lista pop
Como criar uma lista de pop
Alterar os itens da lista Ícone de vínculo padrão
Como definir os itens ícone de link padrão de lista (padrão seta para a direita).
lista pop dobrável
Como criar uma lista expansível de pop.
dobrável lista
Como criar um show / ocultar a lista.
mais formatos
Como criar um calendário.
