Página do jQuery Mobile

Entrar em jQuery Mobile

Dica:Embora o jQuery Mobile seja compatível com todos os dispositivos móveis, ele ainda pode ter problemas de compatibilidade em computadores de mesa (devido ao suporte limitado ao CSS3).

Portanto, neste tutorial, recomendamos que você use o navegador Google Chrome para obter a melhor experiência de leitura.

Exemplo

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Bem-vindo ao meu site</h1>
  </div>
  <div data-role="content">
    <p>Eu sou um desenvolvedor móvel!</p>
  </div>
  <div data-role="footer">
    <h1>Texto do rodapé</h1>
  </div>
</div>
</body>

Experimente pessoalmente

Exemplo de explicação:

  • data-role="page" é a página exibida no navegador
  • data-role="header" cria a barra de ferramentas superior da página (usada frequentemente para títulos e botões de busca)
  • data-role="content" define o conteúdo da página, como texto, imagens, formulários e botões, etc.
  • data-role="footer" cria a barra de ferramentas inferior da página

Nesses contêineres, você pode adicionar qualquer elemento HTML - parágrafos, imagens, títulos, listas, etc.

Dica:As propriedades data-* do HTML5 são usadas para criar um aspecto interativo amigável ao toque para dispositivos móveis usando jQuery Mobile.

Adicionar páginas ao jQuery Mobile

No jQuery Mobile, você pode criar várias páginas em um único arquivo HTML.

Use IDs únicos para separar cada página e use o atributo href para conectá-las:

Exemplo

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Ir para a página dois</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Ir para a página um</a>
  </div>
</div>

Experimente pessoalmente

Notas:Aplicações web com grande quantidade de conteúdo afetam o tempo de carregamento (por exemplo, texto, links, imagens e scripts, etc.). Se você não deseja usar arquivos externos nas páginas de links internos, use arquivos externos:

<a href="externalfile.html">Ir para página externa</a>

Usar a página como diálogo

O diálogo é um tipo de janela de exibição de informações ou solicitação de entrada.

Para criar um diálogo ao clicar (tocar) no link do usuário, adicione data-rel="dialog" ao link:

Exemplo

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Ir para a página dois</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Ir para a página um</a>
  </div>
</div>

Experimente pessoalmente