Crie uma página
Mesmo que jQuery Mobile funciona em todos os dispositivos móveis, pode ter alguns problemas de compatibilidade em computadores desktop (devido ao suporte CSS3 limitada).
Para este tutorial, recomendamos que você use o navegador Google Chrome para uma melhor experiência de leitura.
Abaixo, nós criamos uma página jQuery Mobile simples, padrão:
Exemplo
<body>
<div data-role="page" >
<div
data-role="header" >
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content" >
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer" >
<h1>Footer
Text</h1>
</div>
</div>
</body> Tente você mesmo " Exemplo explicou:
- O data-role="page" é a página exibida no navegador
- O data-role="header" cria uma barra de ferramentas na parte superior da página (muitas vezes usado para título ou de pesquisa botões)
- O data-role="main" define o conteúdo da página, como texto, imagens, botões, formas, etc.
- O "ui-content" classe adiciona o preenchimento extra e margem dentro do conteúdo da página
- O data-role="footer" cria uma barra de ferramentas na parte inferior da página
- Dentro destes recipientes, você pode adicionar elementos HTML - parágrafos, imagens, títulos, listas, etc.
Os HTML5 data-* atributos são usados em todo o jQuery Mobile para criar um "touch-friendly" olhar e atraente para dispositivos móveis.
Adicionando Páginas em jQuery Mobile
Em jQuery Mobile, você pode criar várias páginas em um único arquivo HTML.
Separar cada página com um id único e usar o href atributo a ligação entre eles:
Exemplo
<div data-role="page" id="pageone" >
<div data-role="main" class="ui-content">
<a href="#pagetwo" >Go to
Page Two</a>
</div>
</div>
<div data-role="page"
id="pagetwo" >
<div
data-role="main" class="ui-content">
<a href="#pageone" >Go to Page
One</a>
</div>
</div> Tente você mesmo " Dica: O tempo de carregamento será afetado por aplicações web com um monte de conteúdo (ou seja, texto, links, imagens, scripts etc). Use arquivos externos, se você não deseja vincular páginas internamente:
<a href="externalfile.html">Go To External Page</a>
O uso de páginas como diálogos
Uma caixa de diálogo é um tipo de janela usada para exibir informações especiais ou entrada de pedido.
Para criar uma caixa de diálogo que se abre quando um usuário toca em um link, adicionar data-dialog="true" para a página que você deseja exibir como uma caixa de diálogo:
Exemplo
<div data-role="page" id="pageone">
<div
data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page"
data-dialog="true" id="pagetwo">
<div
data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div> Tente você mesmo "