Criando lista com jQuery Mobile – Parte 01
Um dos componentes mais usados nas aplicações mobile é a lista. Seja para criar um menu para exibir configurações ou o resultado de alguma informação, a lista é uma das melhores alternativas para a exibição em telas com o tamanho reduzido. A lista substitui os conhecidos “Grids” da versão desktop.
Como criar uma lista básica
Como você já sabe, o jQm baseia-se no modelo html 5, utilizando o atributo data-role para diferenciar a visualização de informações na tela. No caso da lista, usamos data-role=”listview”, em uma lista <ul> <li>.
Em um exemplo básico, podemos ter o seguinte código:
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Basic list</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
<li><a href="index.html">BMW</a></li>
<li><a href="index.html">Cadillac</a></li>
<li><a href="index.html">Chrysler</a></li>
<li><a href="index.html">Dodge</a></li>
<li><a href="index.html">Ferrari</a></li>
<li><a href="index.html">Ford</a></li>
<li><a href="index.html">GMC</a></li>
<li><a href="index.html">Honda</a></li>
<li><a href="index.html">Hyundai</a></li>
<li><a href="index.html">Infiniti</a></li>
<li><a href="index.html">Jeep</a></li>
<li><a href="index.html">Kia</a></li>
<li><a href="index.html">Lexus</a></li>
<li><a href="index.html">Mini</a></li>
<li><a href="index.html">Nissan</a></li>
<li><a href="index.html">Porsche</a></li>
<li><a href="index.html">Subaru</a></li>
<li><a href="index.html">Toyota</a></li>
<li><a href="index.html">Volkswagon</a></li>
<li><a href="index.html">Volvo</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
Que iria “desenhar” a seguinte lista:
Listas encadeadas
O jQm consegue de uma forma muito fácil exibir listas encadeadas. Basta usar um <ul> dentro de outro <ul>. No exemplo a seguir, suponha que você deseja mostrar os estados do Brasil de acordo com as regiões:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script type="text/javascript" src="my-jqm-script.js"></script>
</head>
<body>
<div data-role="page" id="primeira" data-theme="a">
<div data-role="header" data-theme="b">
<h1>Estados do Brasil</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Sudeste
<ul>
<li>Minas Gerais</li>
<li>São Paulo</li>
<li>Rio de Janeiro</li>
<li>Espírito Santo</li>
</ul>
</li>
<li>Sul
<ul>
<li>Paraná</li>
<li>Santa Catarina</li>
<li>Rio Grande do Sul</li>
</ul>
</li>
<li>Centro-Oeste
<ul>
<li>Mato Grosso</li>
<li>Goiás</li>
<li>Mato Grosso do Sul</li>
</ul>
</li>
<li>Nordeste
<ul>
<li>Bahia</li>
<li>Sergipe</li>
<li>....</li>
<li>Maranhão</li>
</ul>
</li>
<li>Norte
<ul>
<li>Amazonas</li>
<li>Acre</li>
<li>Pará</li>
<li>Amapá</li>
<li>Roraima</li>
<li>Tocantins</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Pode-se adicionar N listas encadeadas. Apenas tome cuidado para que a lista não fique muito grande, pois todo o conteúdo é carregado inicialmente. No exemplo dos estados, não seria viável adicionar as cidades, estas teriam que ser carregadas por AJAX.
Dividindo listas em tópicos
Outro exemplo bastante usado é a divisão de uma lista em tópicos. Para criar o tópico, usamos o atributo data-role=”list-divider”. O exemplo dos estados pode ser refatorado para:
<!DOCTYPE html>
<ul data-role="listview">
<li data-role="list-divider">Sudeste
<li>Minas Gerais</li>
<li>São Paulo</li>
<li>Rio de Janeiro</li>
<li>Espírito Santo</li>
<li data-role="list-divider">Sul
<li>Paraná</li>
<li>Santa Catarina</li>
<li>Rio Grande do Sul</li>
<li data-role="list-divider">Centro-Oeste
<li>Mato Grosso</li>
<li>Goiás</li>
<li>Mato Grosso do Sul</li>
<li data-role="list-divider">Nordeste
<li>Bahia</li>
<li>Sergipe</li>
<li>....</li>
<li>Maranhão</li>
<li data-role="list-divider">Norte
<li>Amazonas</li>
<li>Acre</li>
<li>Pará</li>
<li>Amapá</li>
<li>Roraima</li>
<li>Tocantins</li>
</ul>
O resultado seria:
Filtrando resultados
Quer fazer um filtro sem nenhum esforço? O jQm faz isso para você, bastando adicionar o atributo data-filter=”true” no <ul>, veja:
<ul data-role="listview" data-filter="true">
<li data-role="list-divider">Sudeste
<li>Minas Gerais</li>
<li>São Paulo</li>
O resultado é uma caixa de filtro na parte superior da lista, onde pode-se realizar o filtro.
Adicionando margem na lista
As listas vistas até agora estavam “coladas” no canto da tela. Para adicionar uma pequena margem na lista, use o atributo data-inset=”true” dentro do <ul>, veja:
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Sudeste
<li>Minas Gerais</li>
<li>São Paulo</li>
<li>Rio de Janeiro</li>
<li>Espírito Santo</li>
<li data-role="list-divider">Sul
<li>Paraná</li>
<li>Santa Catarina</li>
<li>Rio Grande do Sul</li>
<li data-role="list-divider">Centro-Oeste
<li>Mato Grosso</li>
<li>Goiás</li>
<li>Mato Grosso do Sul</li>
<li data-role="list-divider">Nordeste
<li>Bahia</li>
<li>Sergipe</li>
<li>....</li>
<li>Maranhão</li>
<li data-role="list-divider">Norte
<li>Amazonas</li>
<li>Acre</li>
<li>Pará</li>
<li>Amapá</li>
<li>Roraima</li>
<li>Tocantins</li>
</ul>
</div>
A lista com o data-inset fica semelhante a:
No próximo artigo, continuaremos vendo listas, exibindo mais opções para a configuração de cada item. Pode-se adicionar conteúdo a cada item da lista, imagens e ícones. Até lá!
trabalha com desenvolvimento web desde 1998 e atualmente dedica-se a escrever livros sobre programação e desenvolvimento de sistemas, disponíveis no seu site.
