JQueryMobile
HTML5, JavaScript e CSS5 para
multiplataforma
Agenda
• Listas
Formatação de Conteúdo
LISTAS
ESTILIZAÇÃO BÁSICA
•
•
•
•
Elementos ul e ol;
Não contempla dl;
Trabalha basicamente sobre a apresentação;
Apenas um data-role listview na tag ul ou ol;
ESTILIZAÇÃO BÁSICA
• Elementos ul e ol;
• Não contempla dl;
• Trabalha basicamente sobre a apresentação;
ESTILIZAÇÃO BÁSICA
ESTILIZAÇÃO BÁSICA
...
<div data-role="content">
<ul data-role="listview">
<li>... </li>
</ul> <br>
<ul>
<li>...</li>
</ul> <br>
<ol data-role="listview">
<li>...</li>
</ol> <br>
<ol>
<li>...</li>
</ol>
</div>
</div>
...
MÚLTIPLAS LISTAS
• Listas renderizadas com JQM em uma mesma
tela causam problemas;
• Solução:
• data-inset=true
MÚLTIPLAS LISTAS
MÚLTIPLAS LISTAS
SEPARADORES
• Destaque de um item;
• Um item marcado com a tag li;
• Pode estar em uma mesta ListView ou em
conjuntos;
• <li data-role="list-divider">RS</li>
SEPARADORES
LISTAS ANINHADAS
• Framework trabalha pesado na renderização;
• Constrói outra interface para escolha na lista
aninhada;
• Sem marcação especial, apenas listas dentro
de listas;
• Para adicionar botão back na segunda tela:
• $(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.addBackBtn
= true })
LISTAS ANINHADAS
<head>
<script src="jquery-1.6.4.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.addBackBtn = true
})
</script>
</head>
<body>
<ul data-role="listview">
<li>Rio Grande do Sul
<ul>
<li> ... </li>
</ul>
</li>
<li>São Paulo
<ul>
<li> ...</li>
</ul>
</li>
</ul>
</body>
LISTAS ANINHADAS
NUMERAÇÃO
•
•
•
•
Listas com contagem de itens;
Marcação span;
Renderização produzida pelo JQM;
Para melhor renderização, o span e o texto
devem estar marcados como hiperlink com a
tag a;
NUMERAÇÃO
NUMERAÇÃO
...
<div data-role="content">
<ul data-role="listview">
<li><a href="#">RS<span class="ui-li-count">87</span></a></li>
<li><a href="#">SC<span class="ui-li-count">77</span></a></li>
<li><a href="#">PR<span class="ui-li-count">25</span></a></li>
</ul>
</div>
...
ÍCONES EM LISTAS
• Personalização do ícone a esquerda;
• Ícone padrão para todos os li que servirá
como link;
• Thumbnail;
PERSONALIZAÇÃO ÍCONE
• Uso do li no exemplo anterior:
• <li><a href="#">Rio Grande do Sul <span
class="ui-li-count">87</span></a></li>
• Agora:
• <li><a href="#"><img src=“a.jpg” class=“ui-liicon”/>Rio Grande do Sul <span class="ui-licount">87</span></a></li>
PERSONALIZAÇÃO ÍCONE
ÍCONE LINK
ÍCONE LINK
• Em uma lista coloca-se dois links;
• Na construção do ul ou ol coloca-se o atributo
data-split-icon=“icone”
<ul data-role="listview" data-inset="true" data-spliticon="gear">
<li>
<a href="#">Grêmio</a>
<a href="#">Site</a>
</li>
...
BUSCAS EM LISTAS
• Implementa uma busca completa nos itens da
lista;
• Busca compreende parte interna dos textos;
• Na construção do listview, basta adicionar o
atributo data-filter=“true”
BUSCAS EM LISTAS
Download
