/Desenvolvimento

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

Daniel Schmitz
em Ajax

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:

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

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. http://www.danielschmitz.com.br

5 comentários Comente também

Dê Sua Opinião

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


4 + quatro =

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