quarta-feira, 2 de fevereiro de 2011

Parte 02 Navegação Simples entre Páginas Usando jQuery Mobile

No post anterior mostrei uma estrutura simples para montar uma página de site WAP usando o jQuery Mobile. Agora irei mostrar como realizar uma navegação entre páginas usando o mesmo framework.

Vejo o código abaixo:



<html>
<head>
<title>Parte 02 jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.js"></script>
</head>

<body>
<div data-role="page" id="pg01">
<div data-role="header">
<h1>Cabeçalho da página 01
</div>
<div data-role="content">
<p>Conteúdo da página 01</p>
<p>Clique <a href="pg02">aqui</a> para ver a página 02</p>
</div>
<div data-role="footer">
<h1>Rodapé da página 01</h1>
</div>
</div>

<div data-role="page" id="pg02">
<div data-role="header">
<h1>Cabeçalho da página 02</h1>
</div>
<div data-role="content">
<p>Conteúdo da página 02</p>
<p>Clique <a href="pg01">aqui</a> para ver a página 01</p>
</div>
<div data-role="footer">
<h1>Rodapé da página 02</h1>
</div>
</div>

</body>
</html>


Como você pode perceber a única coisa que fiz foi repetir aquela estrutura apresentada no post Conhecendo o jQuery Mobile . A diferença foi um id que coloquei para cada div com a propriedade data-role=”Page”. A navegação é a mesma como em HTML, usei a tag <a> </a> e pronto. O resto é feito pelo próprio jQueryMobile.

Abaixo um vídeo mostrando como ficou:






Veja aqui:
Parte 01 de jQueryMobile.

Nenhum comentário:

Postar um comentário