terça-feira, 1 de fevereiro de 2011

Conhecendo o jQuery Mobile

O jQuery Mobile é um framework de interface voltada para usuários de dispositivos móveis com base no jQuery. Encontra-se agora na versão 1.0 Alpha 2.0. Ele tem suporte as plataformas: iOS; Symbian S60; Symbian UIQ; Symbian Platform; Blackberry OS; Android, Windows Mobile; webOS; bada, Maemo e MeeGo.

Existe uma tabela muito legal mostrando o suporte do framework, clique aqui para ver.

Vamos para o código:



<head>
<title>Tutorial 01 jQuery Mobile</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>


Note que inseri o css e dois javascripts, um do jQuery padrão e ou o outro do tipo mobile.

Nas minhas pesquisas, percebi que a página mobile deve ter a seguinte estrutura dentro da tag
<body></body>

<body>
<div data-role="page">
<div data-role="header">
<h1>Cabeçalho</h1>
</div>
<div data-role="content">
<p>Conteúdo.</p>
</div>
<div data-role="footer">
<h4>Rodapé</h4>
</div>
</div>
</body>

A primeira div utiliza a propriedade data-role=”page” indicando que ali é o início de uma página. Logo em seguida encontramos data-role=”header”, onde seria o cabeçalho da página. Depois aparece o data-role=”content” aqui fica o conteúdo da página do site. E para finalizar, aparece o data-role=”footer”

Veja o resultado na imagem abaixo:













Assim finalizo esse post de introdução.

Estou começando os estudos do jQuery Mobile e no que eu for descobrindo irei divulgando aqui no blog.

Abaixo alguns links úteis:
jQuery Mobile 
Demos 
Download 



2 comentários:

  1. Muito legal esse framework. Para quem trabalha com PHP do lado do servidor o desenvolvimento com jQuery Mobile pode ser acelerado com o uso do jqmPhp (http://www.jqmphp.com).

    ResponderExcluir
  2. Muito legal Bruno! Vou dar uma olhada nele e criar um post sobre esse framework jqmphp.

    Valeu!

    ResponderExcluir