Introdução ao Jquery Mobile – Parte 5

Olá Pessoal, esta é a quinta parte do pequeno tutorial sobre Jquery Mobile.

Tá ficando cada vez mais completo não é mesmo?

Ao longo de diversos artigos do Manual de jQuery Mobile  vimos expressando as grandes vantagens em usar este framework para criar aplicações, orientadas a dispositivos móveis, com uma poderosa interface gráfica de usuário (GUI). No artigo anterior pudemos ver um exemplo disso: Criar botões com jQuery Mobile. A forma de usar os widgets que vêm predeterminados no framework é uma tarefa muito simples, mas obtemos resultados impactantes, com os quais poderemos surpreender nossos amigos.

Um dos componentes de interface gráfica de usuário más relevante, eficiente e útil em jQuery Mobile são as listas, já que nos podem servir como menus de contextos, ou qualquer outro uso que lhe podamos dar em nossas aplicações web móveis. O limite está em nossa imaginação, pois tudo neste framework se amolda de acordo com nossas necessidades, ou melhor, às características específicas do dispositivo móvel que o carregue.

Chegará o momento em que teremos que mostrar um catálogo de artigos, ou serviços de uma empresa, ou qualquer coisa similar. Esta é uma tarefa que podemos cumprir com os componentes ou widgets preparadas, que criamos com jQuery Mobile.

Seguindo o exemplo do catálogo de produtos, podemos ter cada um dos artigos organizados em nossas listas e ao clicar , estaríamos viajando de forma direta a uma página, que nos mostrará toda a informação do elemento selecionado.

Exemplo ilustrativo com listas

Para este artigo onde estamos trabalhando com listas vamos criar um exemplo bastante simples mas muito ilustrativo das coisas que podemos fazer com tais elementos. Com isto obteremos um horizonte de ideias e ilustrações de coisas úteis para fazer com as listas, que nos brinda jQuery Mobile

Nosso exemplo terá quatro páginas web, incluídas dentro do mesmo documento HTML. Na primeira criaremos de imediato uma lista, que nos servirá como exemplo clássico e ilustrativo deste artigo. Na lista haverá três elementos com textos diferentes, ao clicar sobre um estaremos vendo uma pequena informação sobre aquilo que se tenha selecionado.

A informação de cada um dos textos presentes nos elementos da lista se albergará nas três páginas restantes, embora, em nosso exemplo, não serão produtos mas meios de transporte.

Inicialmente começaremos criando uma lista simples com todas as configurações predeterminadas por jQuery Mobile, já que no curso a iremos configurando para conseguir melhores efeitos visuais. Para obter uma lista simples basta com um código como este:

<ul data-role=”listview” >
<li><a href=”#carro” >Carro</a></li>
<li><a href=”#aviao”>Avião</a></li>
<li><a href=”#aeroplano”>Aeroplano</a></li>
</ul>

Até aqui conseguimos criar uma lista simples, onde seus elementos servirão como link para nos comunicar com outras três páginas web. Cada página está relacionada de forma direta com os elementos da lista, ou seja, que ao clicar sobre os elementos com texto de “Carro”, o navegador nos levará a uma página que contém informação acerca dos carros.

Enriquecer visualmente as listas

Igual que no caso dos botões, podemos fazer certas modificações e ir agregando atributos às listas de forma direta sobre as etiquetas HTML. Esta possibilidade de configurar os próprios widgets no código HTML facilitará muito a vida, à hora de criar nossas aplicações com jQuery Mobile.

Divisões:
O primeiro que vamos fazer com as listas é criar uns divisores, que são outros elementos da lista, mas que atuam de forma diferente. Estes elementos são só para orientar o usuário na lista. Em outras palavras, eles atuam como uma espécie de objetos inabilitados aos eventos que podem ser gerados pelo usuário, e portanto, não reacionaram ao duplo click ou ao teclado etc.

Podem-se agregar ou indexar divisores em qualquer lugar nas listas, algo que é muito frequente, pois embora não respondam a nenhum evento, eles cumprem uma tarefa importante. Trata-se de uma forma visual de manter informado o usuário de que está usando nossa aplicação web.

A continuação, vamos criar divisores em nossa lista. Estes nos servirão para indicar os diferentes tipos de meios de transporte, que em nosso exemplo são transporte terrestre e transporte aéreo, para que nosso usuário saiba por onde vai.

Nota: Para servir de exemplo de uso dos divisores podemos pensar em outra cosa. Imagine que sua lista tivesse produtos comerciais. Então você poderia colocar divisores com textos como: artigos eletrônicos e artigos de alimentação.

A tarefa com os divisores é muito simples e se consegue com um código como o seguinte.

<ul data-role=”listview” >
   <li data-role=”list-divider”>Meios de transporte terrestrses</li>
<li><a href=”#carro” >Carro</a></li>
   <li data-role=”list-divider”>Meios de transporte Aéreos</li>
<li><a href=”#aviao”>Avião</a></li>
<li><a href=”#aeroplano”>Aeroplano</a></li>
</ul>

Como podem perceber, é muito simples. Só há que agregar dois elementos <li> na posição onde desejamos ter nossos divisores, mas a estes elementos devemos atribuir o atributo data-role ao qual damos o valor de ?list-divider?. Com esse único detalhe é suficiente para obter um divisor em nossas listas.

Nota: No código anterior os divisores foram identados à direita, mas isso é simplesmente para que visualmente se possam identificar melhor. Resta dizer que no código HTML estes sangrados não são levados em conta pelos navegadores, embora nos sirvam aos desenvolvedores para ler melhor os códigos que criamos.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Listas com jQuery Mobile</title>
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<scriptsrc="jquery-1.7.1.min.js"></script>
<scriptsrc="jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="inicio">
<div data-role="header"><h1>Listas</h1></div>
   <div data-role="content">
<ul data-role="listview" >
<li><a href="#carro" >Carro</a></li>
<li><a href="#aviao">Avião</a></li>
<li><a href="#aeroplano">Aeroplano</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="a">
   <li data-role="list-divider">Meios de transporte terrestrses</li>
<li><a href="#carro" >Carro</a></li>
   <li data-role="list-divider">Meios de transporte Aereos</li>
<li><a href="#aviao">Aviao</a></li>
<li><a href="#aeroplano">Aeroplano</a></li>
</ul>
   
   </div>
   <div data-role="footer"><h3>Listas</h3>
</div>
</div>

<div data-role="page" id="carro">
   <div data-role="header"><h1>Carros</h1></div>
   <div data-role="content">
    Os carros são um meio de transporte terrestre<br>
   <a href="#inicio"data-role="button" data-theme="b" data-inline="true">Inicio</a>
   </div>
   <div data-role="footer">
   <h3>Os carros</h3>
   </div>
</div>

<div data-role="page" id="aviao">
   <div data-role="header"><h1>Avioes</h1></div>
   <div data-role="content">
    Os avioes sao um meio de transporte aereo<br>
   <a href="#inicio"data-role="button" data-theme="e" data-inline="true">Inicio</a>
   </div>
   <div data-role="footer">
   <h3>Avioes</h3>
   </div>
</div>

<div data-role="page" id="aeroplano">
   <div data-role="header"><h1>Aeroplanos</h1></div>
   <div data-role="content">
    Os aeroplanos são um meio de transporte aereo, menor que os avioes<br>
   <a href="#inicio"data-role="button" data-theme="d" data-inline="true">Inicio</a>
   </div>
   <div data-role="footer">
   <h3>Aeroplanos</h3>
   </div>
</div>
</body>
</html>