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

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

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

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

Traduzindo mensagens

Relacionadas

Postagens Relacionadas

Programador GB