Crie aplicativos com jQuery Mobile

jQuery Mobile é um plugin do jQuery original e requer que este seja previamente instalado para poder funcionar.
Uma vez ativo, jQuery Mobile faz duas coisas:

Primeiro, ele otimiza funções nativas para melhorar seu desempenho em dispositivos móveis.
Em segundo lugar, ele modifica o HTML e gera um layout com uma série de elementos gráficos predefinidos que aceleram substancialmente a velocidade de produção.

Instale o jQuery Mobile
Embora seja possível e uma técnica muito comum em sites instalar o jQuery Mobile vinculando diretamente a arquivos armazenados na nuvem, é altamente recomendável não aplicar essa técnica para aplicativos PhoneGap. Freqüentemente, seu aplicativo será usado sem nenhuma conexão com a Internet ou com uma conexão intermitente. Se os arquivos jQuery estiverem vinculados a documentos em nuvem, o aplicativo possivelmente se tornará inutilizável.
Para instalar este framework, a primeira coisa que você deve fazer é baixar o jQuery de sua página oficial:

http://docs.jQuery.com/Downloading_jQuery#Current_Release

Assim que o jQuery for baixado, você deve baixar o plugin jQuery Mobile de seu site oficial:

http://jquerymobile.com/download/

Iniciaremos um exemplo que nos permite entender a programação e a estrutura da aplicação.
Vamos criar um arquivo html com o seguinte código

 Aplicativo móvel Jquery 

O jQuery Mobile nos permite criar interfaces amigáveis ​​para dispositivos móveis muito rapidamente e com relativamente pouco esforço.
Funciona reescrevendo o código original do documento e gerando um novo, mais complexo, de acordo com as características e argumentos solicitados.
Um recurso interessante do jQuery Mobile é que, ao contrário de um site, que passa de um documento HTML para outro para exibir informações, as páginas ou telas de um aplicativo são tratadas a partir de um único documento HTML.
As páginas ou telas estão em um único arquivo, o jQuery Mobile as gerencia para mostrar apenas a parte do documento correspondente a cada tela enquanto o restante permanece oculto. Desta forma, o carregamento das páginas é substancialmente acelerado, permitindo também a gestão de eventos e animações entre um ecrã e outro.
jQuery Mobile aproveita ao máximo os novos elementos HTML5 e faz uso intenso de atributos personalizados que são definidos com o prefixo "data-"
Por exemplo data-role, um dos atributos mais usados ​​no jQuery Mobile, permite definir a função no nível de funcionalidade e aparência do elemento que o contém. Ao definir a função de um elemento, esse atributo permite criar páginas, botões, menus e muitos outros elementos.
Ao inserir o atributo data-role em qualquer tag, nós o tornamos um elemento de interface. Não há necessidade de adicionar nenhum código adicional jQuery adicione todos os elementos gráficos, classes e até animações necessárias para o funcionamento daquele elemento em particular.
Por exemplo, para criar uma página, você usa o atributo data-role = ”página” desta forma:

Tela 1
Tela 2

Para retornar

O link de exemplo não apenas permite que você vá para a tela 2, mas o jQuery Mobile incluiu automaticamente uma animação de transição para dar uma aparência semelhante a de um aplicativo nativo.
Vamos levar o link que acabamos de criar um pouco mais e adicionar o atributo data-role = ”button” do atributo jQuery Mobile para que este link se comporte como um botão:
Para retornar à página principal, você pode aplicar a técnica anterior de vincular um link ao id da página principal, ou ainda mais simples, você pode usar o atributo data-rel = ”back” que retorna o aplicativo para a tela imediatamente anterior .Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo