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

Como realizar a transição de páginas com jQuery Mobile – Parte 02

Carregamento automático com Ajax

No artigo anterior, vimos como fazer algumas transições entre
páginas com o jQuery Mobile. Vimos dois tipos de “link”, os que apontam
para <div data-role=”page”> dentro do próprio arquivo html
e os que apontam para arquivos html separados. Vimos que basta fazer
o <a href=”….”> para que o jQm cuidar do resto. Com isso,
conseguimos nos concentrar em criar apenas HTML5 válido, para que o
resultado fique extremamente elegante na tela mobile.

Nesta segunda parte, vamos continuar falando sobre como o jQm
carrega suas páginas. Quando acessamos uma segunda página qualquer,
o jQm encarrega-se de adicionar o botão “back” na barra de
títulos (data-role=’header’) e, caso ela seja pressionada, voltar à
página anterior. O botão voltar do navegador também é
reconfigurado para voltar à página anterior.

Para desabilitar o carregamento automático do jQm, pode-se
utilizar o atributo data-ajax=”false”. Com isso, o login não
aparece, e é realizada uma nova requisição à página alvo.

Traduzindo mensagens

Para alterar as mensagens do jQm, temos que criar um script que
acesse as propriedades do framework. Isso é relativamente simples,
como uma receita de bolo. Primeiro, crie um arquivo com a extensão
“.js”, no meu caso aqui criei: my-jqm-scripts.js.

Depois, adicione o seguinte código no arquivo de script:

$(document).ready(function(){
$.mobile.loadingMessage = "Carregado";
$.mobile.page.prototype.options.backBtnText = "Voltar";
});

Depois referencie o arquivo js no seu arquivo html, da seguinte
forma:

<!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>

O resultado é o botão “back” traduzido:

Como estamos na versão beta 3, pode ser que essa forma de
alterar as mensagens do jQm mude. Então, se não funcionar, dê uma
olhada no Google.

No próximo artigos, veremos como estilizar a sua aplicação com
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

5 Comentários

Mauricio Junior

Tem como mostrar um exemplo funcional com .net? Ou um link de página com exemplo?

Geraldo Bastos

Bom artigo! Eu escrevi um também sobre jQuery Mobile, lá existe um vídeo mostrando uma navegação simples entre páginas. Confira aqui: http://geraldobastos.blogspot.com/2011/02/parte-02-navegacao-simples-entre.html

Parabéns pelo artigo.

Fred

Não funcionou a tradução do botão Back.

Washington

é só alterar o nome do arquivo com a referencia .. tem um “s” a mais.

Qual a sua opinião?