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.
Nenhum comentário:
Postar um comentário