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
<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
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).
ResponderExcluirMuito legal Bruno! Vou dar uma olhada nele e criar um post sobre esse framework jqmphp.
ResponderExcluirValeu!