Seções iMasters
Android + iPhone & iPad + JQuery + Mobile

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

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:

Em apoio à evangelização do WordPress, os cursos da Apiki são gratuitos para que você possa se especializar na plataforma que mais cresce no mundo. Vagas limitadas, Inscreva-se agora.

Comente também

21 Comentários

Flavio Ferreira

Massa !! Parabéns pelo post :D muito util esses recursos :D

Fiz uma pagina de Testes no Chrome funciona bem e no mozilla também, será que vai demorar pro IE funcionar ? rsrs

Página que montei: http://www.bwnweb.com.br/mobile.php

    Daniel Schmitz

    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…

Mauricio Junior

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 ?

Rogerio Costa da Silva

Legal Daniel, parabens pelos artigos, muito interessantes !!!

Erick Tauil

Parabéns pelo artigo Daniel ! Bacana Flavio, a sua página que montou utilizando o JQuery Mobile, ficou muito bom o visual…

Abs,

Erick Tauil

felipe

Essa série m viciou hehhe, fiquei bem interessado em aprender mais.

Thulio

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,

Fernando Sucoski

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.

    Daniel Schmitz

    Olá, pode ser um bug mesmo, porque o jQm está na versão beta! No chorme/webkit funciona ? Qual o erro??

    Fernando Sucoski

    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.

Wellington

o baguio é loko mesmo!!!!

Thailana

Ola Daniel,

Conhece algum plugin que tenha os mesmo efeitos de transição entre paginas e que funcione corretamente no ie?

Obrigada ^^

    Daniel Schmitz

    No IE não. Enquanto o IE não implementar HTML 5 com webkit não vai aparecer direito… Se eu estou errado me corrijam pessoal….

    Daniel Pace Schmitz

    Saiu o alpha 4 agora e está funcionando mais ou menos …. Talvez na versão final fique legal !

paulo henrique leao

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 ?

Qual a sua opinião?