Você sabe o que é jQuery Mobile?

O jQuery Mobile é um framework fácil de aprender, que usa HTML simples e possui bom recursos para o início do desenvolvimento Mobile. Destaca-se pela quantidade de dispositivos suportados, como android, iOS, Blackberry, Windows Phone, Palm, entre outros.


A estrutura inclui um sistema de navegação Ajax que traz transições de páginas animadas e um conjunto central de widgets de interface do usuário: páginas, diálogos, barras de ferramentas, ListViews, botões com ícones, elementos de formulário, acordeões collapsibles e muito mais.


A diferença fundamental do jQuery Mobile para a grande variedade de plataformas móveis que estamos acostumados, é que nenhum navegador ou dispositivo é deixado para trás.

O jQuery Mobile possui um simples sistema de marcação baseado na aplicação de temas. Para desenvolvedores mais avançados, há uma API rica de opções de configuração global, eventos e métodos para aplicar o script, gerar páginas dinâmicas, e até mesmo construir aplicativos nativos com ferramentas como PhoneGap.

Todas as páginas em jQuery Mobile são construídas sobre uma base de limpa de HTML, para garantir a compatibilidade com praticamente qualquer dispositivo habilitado para web. Nos dispositivos que interpretam CSS e JavaScript o jQuery Móvel aplica técnicas de aprimoramento progressistas discretamente transformar a página em uma experiência rica e interativa, que aproveita o poder da jQuery e CSS. Recursos de acessibilidade, tais como WAI-ARIA são integrados em toda a estrutura para fornecer suporte para os leitores de tela e outras tecnologias assistivas.





Faça seu próprio aplicativo com o jQueryMobile

O jQuery Mobile é um framework fácil de aprender, que usa HTML simples e possui bom recursos para o início do desenvolvimento Mobile. Destaca-se pela quantidade de dispositivos suportados, como android, iOS, Blackberry, Windows Phone, Palm, entre outros.

A estrutura inclui um sistema de navegação Ajax que traz transições de páginas animadas e um conjunto central de widgets de interface do usuário: páginas, diálogos, barras de ferramentas, ListViews, botões com ícones, elementos de formulário, acordeões collapsibles e muito mais.
A diferença fundamental do jQuery Mobile para a grande variedade de plataformas móveis que estamos acostumados, é que nenhum navegador ou dispositivo é deixado para trás.
O jQuery Mobile possui um simples sistema de marcação baseado na aplicação de temas. Para desenvolvedores mais avançados, há uma API rica de opções de configuração global, eventos e métodos para aplicar o script, gerar páginas dinâmicas, e até mesmo construir aplicativos nativos com ferramentas como PhoneGap.
Todas as páginas em jQuery Mobile são construídas sobre uma base de limpa de HTML, para garantir a compatibilidade com praticamente qualquer dispositivo habilitado para web. Nos dispositivos que interpretam CSS e JavaScript o jQuery Móvel aplica técnicas de aprimoramento progressistas discretamente transformar a página em uma experiência rica e interativa, que aproveita o poder da jQuery e CSS. Recursos de acessibilidade, tais como WAI-ARIA são integrados em toda a estrutura para fornecer suporte para os leitores de tela e outras tecnologias assistivas.




Instalando jQuery Mobile
O jQM segue o princípio básico de instalação de frameworks JavaScript. Para usar o jQM, criamos uma página HTML e adicionamos, na tag <HEAD> do documento, os arquivos javaScript/css necessários para o frameowrk funcionar.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/ jquery.mobile-1.0a3.min.css"/>
<script type="text/javascript"  src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript"  src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
[Bloco de códigos html JQM]
</body>
</html>
Neste código html base, veja que estamos incluindo os arquivos css/js diretamente do repositório jquery. Esta é a forma mais simples de testar o JQM. Deve-se apenas observar a versão dos arquivos incluídos. Se você tiver experiência com jQuery, pode simplesmente baixar a última versão do JQM em http://jquerymobile.com e usar no seu projeto, sem a necessidade de apontar para um arquivo do repositório jQuery.

Criando a primeira página Mobile

O jQueryMobile usa o já conhecido HTML para criar suas páginas. A única diferença é que ele usa HTML 5 com recursos extras chamados de "data driven" - em resumo, usa constantemente o atributo "data". Vamos a um simples exemplo, e como não poderia ser diferente, iremos criar o Hello World, veja:
<div data-role="page">
<div data-role="header">
<h1>Hello World</h1>
</div>
<div data-role="content">
<p>Aqui entra o conteúdo</p>
</div>
</div>
Este pedaço de código HTML deve ser inserido entre a tag <body> do nosso modelo. Ao salvar e exibir esta página no navegador (com webkit: iOS, iPhone, Chrome, Firefox, Opera, exceto IE), temos a seguinte renderização:

A mágica acontece porque estamos usando o atributo data-role para informar qual a função daquele div. No div pricipal, definimos o data-role como page, e no div interno ao page, criamos mais duas divs, que é o header e o content.

Criando duas páginas mobile com transição

Estendendo um pouco o conceito sobre o JQM, vamos agora criar duas páginas mobile elinkar uma a outra. Uma característica importante que devemos observar é que duas páginas mobile não necessitam obrigatoriamente de dois arquivos HTML. Vamos fazer as páginas no mesmo arquivo html. O código é o seguinte:
<div data-role="page" id="primeira">
<div data-role="header">
<h1>Hello World</h1>
</div>
<div data-role="content">
<p>Aqui entra o conteúdo</p>
<p>Acesse a segunda página: <a href="#segunda">aqui</a></p>
</div>
</div>
<div data-role="page" id="segunda">
<div data-role="header">
<h1>Segunda página</h1>
</div>
<div data-role="content">
<p><a href="#primeira" data-rel="back">Primeira página</a></p>
</div>
</div>
Veja que agora criamos dois divs, cada um com seu data-role. Veja também que criamos um id para cada div, com o propósito de linkar cada uma das páginas. Na primeira página, em content, fazemos um link com o uso do href e apontando diretamente para #segunda. Ou seja, o link aponta para o id da outra div. 
Veja agora no navegador que, quando acessamos o link, surge uma transição para a segunda página. Nesta segunda página, veja que o botão back é automaticamente criado. Ao acessá-lo, a página volta para a #primeira.
Veja que no link da segunda página para a primeira, usamos o data-rel para indicar que estamos voltando uma página. Experimente retirá-lo e verificar o seu comportamento.

Criando um simples menu

Agora vamos criar um simples menu de itens. Para isso, usamos o já conhecido <ul> <li> e claro mais alguns atributos data, veja:
<div data-role="page" id="primeira">
<div data-role="header">
<h1>Hello World</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">MENU</li>
<li><a href="#segunda">Item 1</a></li>
<li><a href="#segunda">Item 2</a></li>
<li><a href="#segunda">Item 3</a></li>
<li><a href="#segunda">Item 4</a></li>
<li><a href="#segunda">Item 5</a></li>
</ul>
</div>
</div>
<div data-role="page" id="segunda">
<div data-role="header">
<h1>Segunda página</h1>
</div>
<div data-role="content">
<p><a href="#primeira" data-rel="back">Primeira página</a></p>
</div>
</div>
Agora, na primeira página, criamos um <ul> cujo o data-role é listview. O atributo data-insetfaz com que o menu não fique "grudado" em toda a página. Retire-o para ver a diferença. Depois criamos os itens de menu com o uso do <li>. Este código produz o seguinte resultado:

Estude e use sua criatividade e aprimore seus aplicativos.
Na página oficial do jQueryMobile você encontrará mais explicações.

Postagens populares