Como realizar a transição entre páginas utilizando o jQuery Mobile

Daniel Schmitz em Android iPhone & iPad

O jQuery Mobile é um framework totalmente adaptado ao mundo mobile. Ou
seja, as animações entre a transição de páginas e o carregamento
automático via ajax são totalmente nativos, não havendo necessidade de
implementar “na mão” uma tela “carregando” e acessar a outra página por
ajax. O jQM faz isso para você.

Leia o artigo anterior para entender um pouco mais dos princípios do jQuery Mobile.

Antes de começar!

Toda requisição ajax necessita de um servidor web para ser bem sucedida. Ou seja, a partir de agora, é necessário usar um servidor web como o WAMP Server, ou o Apache, ou o IIS. Para facilitar o nosso trabalho, iremos usar o WAMP Server, que pode ser obtido neste endereço.

Após baixar e instalar o WAMP, crie a pasta “jqm” em c:wampwww e acesse no seu navegador: http://localhost/jqm/ Certifique-se de que o WAMP Server está iniciado. Se ficar com dúvidas sobre o Wamp Server, leia o item “Preparando o servidor WEB” desse artigo.

Como a transição funciona

Agora que já temos o nosso servidor web, crie dois arquivos:

  • c:/wamp/www/jqm/index.html
  • c:/wamp/www/jqm/index2.html

No arquivo index.html, colocamos o seguinte:

<!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>
</head>
<body>

<div data-role="page" id="primeira">

<div data-role="header">
<h1>Hello World</h1>
</div>

<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">MENU</li>
<li><a href="#segunda">Item 1</a></li>
<li><a href="index2.html">Item 2</a></li>
<li><a href="#segunda">Item 3</a></li>
<li><a href="#segunda">Item 4</a></li>
<li><a href="#segunda">Item 5</a></li>
</ul>
</div>

</div>

<div data-role="page" id="segunda">

<div data-role="header">
<h1>Segunda página</h1>
</div>

<div data-role="content">
<p><a href="#primeira" data-rel="back">Primeira página</a></p>
</div>

</div>

</body>
</html>

E, no arquivo index2.html, colocamos o seguinte:

<!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>
</head>
<body>

<div data-role="page" id="segunda">

<div data-role="header">
<h1>Segunda Página</h1>
</div>

<div data-role="content">
<p>Esta é a segunda página!!!!</p>
</div>

</div>

</body>
</html>

Agora vamos analisar cada arquivo. O index1.html contém tudo que aprendemos no primeiro artigo. Ele possui as chamadas para o jQuery e jQuery Mobile e cria duas páginas, sendo que a primeira contém uma lista, que forma um menu no navegador. Essa lista contém dois tipos de links:

<li><a href="#segunda">Item 1</a></li> 
<li><a href="index2.html">Item 2</a></li>

O primeiro tipo de link (“#segunda”) aponta para uma mesma div no index.html. Já o segundo link aponta normalmente (sem a tralha) para uma outra página web.

Ao acessar http://localhost/jqm/index.html, surge o menu; ao clicar no item 2, surge uma caixa de loading, e o arquivo index2.html é carregado via ajax. Se você não vir o loading, é que está no localhost da sua máquina, e é muito rápido.  Assim que o carregamento termina, é realizada uma transição e apresentada a segunda página. Tecnicamente, o jQM carregou o HTML de index2.html e incluiu dinamicamente em index.html.

Efeitos com transições

A transição entre páginas é feita facilmente com o atributo data-transition. Existem 6 tipos de transições:

  • slide
  • slideup
  • slidedown
  • pop
  • fade
  • flip

A forma de uso é a seguinte:

<li><a href="index2.html" data-transition="slideup">Item 2</a></li> 

“Brinque” com as outras transições, todas funcionam muito bem devido ao jQtouch.

Criando uma caixa de diálogo (popup)

Seguindo o padrão data driven, para criarmos uma tela que se comporta como uma caixa de diálogo (popup), basta usarmos data-rel=”dialog” e data-transition=”pop” no link <a href…, veja:

<li><a href="#segunda" data-rel="dialog" data-transition="pop">Item 3</a></li> 

Bom, por enquanto paramos aqui. Mas não perca os próximos artigos. Vamos continuar falando sobre transição de páginas e também sobre ferramentas e temas.

Até lá!

Mensagem do anunciante:

Você já está pronto para testar sua App Android? A Intel fez uma parceria para você testar gratuitamente sua App nos principais dispositivos com processador Intell®. Saiba mais aqui!

Daniel Schmitz em Android iPhone & iPad

Comentários

Dê Sua Opinião

O seu endereço de email não será publicado Campos obrigatórios são marcados *

    1. Olá Flávio, depende da M$ neh, implementar “direito” o html 5 com webkit neh? Mas lembre-se que o jQM está designado para mobile, para celulares e tablets em geral, então não espere algum código extra do jQm para ter compatibilidade com o IE…

  1. Daniel,
    Muito bom o seu artigo, bem explicativo e de fácil entendimento.

    Tenho duas dúvidas:
    1- Funciona se a propriedade for colocada no botão para redirecionar a página 2.html?
    2- Teria como pegar e deixar off as imagens e css e javascripts ?

      1. Muito bom o post. Parabéns. Gostaria de saber quais arquivos eu baixo no site e como faço as referências para ser utilizado off-line o css e o js?

  2. Parabéns pelo artigo daniel, muito bom!
    tenho uma dúvida, existe alguma forma de fazer um request(get ou post) sem colocar o #segunda na barra de endereço?

    Abs,

    1. Bom, se você estiver falando do exemplo de popup, você pode apontar para uma página html também. Será apresentando o loading e depois disso o popup…

  3. Olá Daniel, no teste em uma página simples como indica o exemplo deu tudo certo, mas, quando acrescento um form gera erro ao acessar a pagina com celulares que utilizam android. Alguma sugestão?

    Grato.

    1. Grato por responder… Funciona perfeitamente em Firefox, Chrome, Safari. Quando acesso por um celular com android o browser fecha, tira a tag form vai blz porem distorce o layout, no iphone foi uma maravilha, nao testei em outros SO, se tiver uma dica de emuladores, vale tbem.

  4. Bom dia, gostei muito do texto. Tenho uma dúvida. Como esta aplicação irá rodar nos equipamentos mobile ? O código fonte fica exposto ? ou tem alguma forma de proteger ?

leia mais
Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: