A estrutura "page" (página) do jQuery Mobile é otimizada para suportar tanto páginas sozinhas, quanto uma lista de "subpáginas" internas localizadas dentro de um único arquivo.
O objetivo deste modelo é permitir que desenvolvedores criem sites usando as melhores práticas - onde links ordinários vão "simplesmente funcionar" sem nenhuma configuração especial - enquanto criam uma rica, experiência semelhante a aplicativos nativos que não pode ser atingida com requests HTTP padrões.
Uma página utilizando jQuery Mobile deve iniciar com um doctype HTML5 para utilizar todas as funcionalidades que o framework oferece (Dispositivos mais antigos com browsers que não entendem HTML5 irão ignorar com segurança o doctype e vários atributos personalizados). Dentro do 'head', referências ao jQuery, jQuery Mobile e ao tema CSS são todas requeridas para começar:
<!DOCTYPE html> <html> <head> <title>Título da Página</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> ... </body> </html>
Dentro da tag <body>, cada "página" no dispositivo móvel é identificada com um elemento (geralmente um div) com o atributo data-role="page":
<div data-role="page"> ... </div>
Dentro do container "page", quaisquer tags HTML válidas podem ser utilizadas, mas para páginas típicas em jQuery Mobile, o filho imediato de uma "page" são divs com os data-roles "header", "content" e "footer" (respectivamente: cabeçalho, conteúdo e rodapé).
<div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>
Juntando tudo, esse é o template de página padrão que você deveria usar para começar seus sites:
<!DOCTYPE html> <html> <head> <title>Título da Página</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Cabeçalho da Página</h1> </div><!-- /header --> <div data-role="content"> <p>O conteúdo da página vem aqui.</p> </div><!-- /content --> <div data-role="footer"> <h4>Rodapé da página</h4> </div><!-- /header --> </div><!-- /page --> </body> </html>
O jQuery Mobile automatiza o processo de construção de sites e aplicações com Ajax.
Por padrão, quando você clica em um link que aponta para uma página externa (ex.: produtos.html), o framework irá ler o href do link para formular uma requisição Ajax (Hijax) e mostrar um spinner indicando o carregamento.
Se a requisição Ajax for completa com sucesso, o conteúdo da nova página é adicionado ao DOM, a função mobilize() é chamada, e por fim a nova página é animada para a tela com uma transição de página.
Se a requisição Ajax falhar, o framework irá mostrar uma pequena mensagem de erro sobreposta (estilizada com o tema "e") que desaparece após um breve tempo de forma a não interromper a experiência de navegação. Veja um exemplo de mensagem de erro.
Um mesmo documento HTML pode conter múltimplas "páginas" que são carregadas de forma conjunta com o empilhamento de múltiplas divs com o data-role de "page". Cada bloco de "página" precisa de um ID único (id="foo") que será usadoo para linkar internamento entre as "páginas" (href="#foo"). Quando um link é clicado, o framework irá procurar por uma "página" interna com o ID e irá fazer a transição dela para a tela.
É importante notar que se você está linkando de uma página que foi carregada via Ajax para uma página que contenha múltiplas páginas internas, você precisa adicionar ao link um rel="external". Isto diz ao framework fazer uma recarga completa da página para limpar o hash Ajax da URL. Isto é crítico porque páginas Ajax usam o hash (jogo da velha, #) para registrar o histórico Ajax, enquanto páginas com múltiplas subpáginas internas usam o hash para indicar páginas internas, então poderão haver conflitos.
Por exemplo, o link para uma página contendo múltiplas páginas internas irá se parecer com isso:
<a href="multipage.html" rel="external">Link para página multipla</a>
Aqui está um exemplo de um site com 2 "páginas" feito com dois divs jQuery Mobile navegados com links de uma página para outra. Note que os IDs nas páginas só são necessários para dar suporte a ligação interna entre páginas, e são opcionais se cada página for um documento HTML separado. Aqui está como duas páginas ficam dentro de um elemento body.
<body> <!-- Começo da primeira página --> <div data-role="page" id="foo"> <div data-role="header"> <h1>Foo</h1> </div><!-- /header --> <div data-role="content"> <p>Eu venho primeiro no código então eu sou exibida como página.</p> <p>Veja a página interna chamada <a href="#bar">bar</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Rodapé</h4> </div><!-- /header --> </div><!-- /page --> <!-- Começo da segunda página --> <div data-role="page" id="bar"> <div data-role="header"> <h1>Bar</h1> </div><!-- /header --> <div data-role="content"> <p>Como eu venho depois no código, sou considerada uma página interna.</p> <p><a href="#foo">Voltar para foo</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Rodapé</h4> </div><!-- /header --> </div><!-- /page --> </body>Visualizar o template de páginas múltiplas
ATENÇÃO: Como estamos usando o hash (#) para manter o histórico de navegação para todas as "páginas" Ajax, não é possível fazer uma ligação para uma âncora em uma página (index.html#foo) em uma página em jQuery Mobile, porque o framework irá procurar por uma "página" com o ID de #foo ao invés do comportamento padrão de rolar para o conteúdo com aquele ID.
Aprenda mais sobre os detalhes técnicos do modelo de navegação e Ajax, hashes e histórico no jQuery mobile.