Há uma abordagem muito popular entre os programadores HTML5 e CSS3 para a construção de sites otimizados para dispositivos móveis com o AJAX, e isso é usar um add-on biblioteca para jQuery chamada jQuery mobile. JQuery Mobile é uma poderosa combinação de javascript e CSS construído em cima da biblioteca.

A biblioteca jQuery trabalha levando uma página HTML5 normal e modificá-lo de maneiras que emulam um look and feel nativo. O código se parece muito com HTML normal:

  
JQuery Mobile Demo
website jQuery Mobile
Esta é uma lista comum
Codificado para parecer
uma lista para celular
a partir de HTML All in One for Dummies

Alguns detalhes virar esta página em uma maravilha móvel:

1. Incluir o CSS móvel jQuery.

   Este é um arquivo CSS especial projetado para transformar elementos HTML em suas contrapartes móveis. Embora você pode baixá-lo a si mesmo, a maioria dos desenvolvedores ligar direto para o jQuery local.

2. Incluir a biblioteca jQuery padrão.

   Grande parte do código é baseado em jQuery, assim integrar o jQuery biblioteca bem. Mais uma vez, você precisa puxar jQuery da principal jQuery site.

3. Incorporar a biblioteca móvel jQuery.

   Esta é uma biblioteca javascript que se estende a biblioteca para adicionar novo comportamento específico para celular.

4. Adicionar um data-role = # 148 páginas # 148- atribuir ao div principal.

   Criar uma div principal na sua página e fornecer o atributo a ele. Este é um costume data-role atributo adicionado pelo jQuery móvel. jQuery olha para os papéis de dados dos vários elementos e aplica estilo e comportamento alterações a estes elementos automaticamente. Atribuir a sua principal div o papel de dados página. Isso diz ao navegador para tratar toda a div como uma página.

5. Especifique um tema dados.

   Você pode aplicar um tema dados para qualquer elemento, mas você quase sempre aplicar um tema à página. jQuery Mobile vem com uma série de temas padrão embutido, chamado # 147 a # 148- através # 147-e. # 148- Experiência para encontrar o que você gosta, ou você pode construir o seu próprio com a versão móvel especial do ThemeRoller.

6. Adicionar mais divs dentro de sua página.

   Adicionar mais algumas divs dentro de sua página div. Geralmente você terá três: cabeçalho, conteúdo e rodapé.

7. Especificar a div de cabeçalho com data-role = # 148-header # 148-.

   Ao colocar qualquer de suas informações de cabeçalho dentro de uma div com um # 147-header # 148- papel de dados, você está dizendo jQuery para tratar este elemento como um cabeçalho móvel e aplicar os estilos adequados. O cabeçalho inclui tipicamente uma tag.

   Normalmente você vai especificar o cabeçalho para ser fixado com o data-position = # # 148-fixo 148- atributo. Isso garante o cabeçalho vai ficar no lugar, se o resto do conteúdo é rolado, o que é um comportamento típico em um aplicativo móvel.

8. Configurar um conteúdo div.

   Adicionar uma div com data-role = # 148-content # 148- para configurar a área de conteúdo principal da página. Qualquer um dos principais elementos do corpo de seu site deve ir neste segmento.

9. Qualquer ligação pode ser convertido a um botão.

   A convenção padrão em aplicações web é transformar links em botões que têm um alvo maior do que a entrada baseado no mouse. É fácil converter qualquer link para um botão adicionando o data-role = # 148-button # 148- atributo para a marca de âncora.

10. Converta listas para listviews móveis.

    As listas também têm convenções especiais no mundo móvel. Você pode usar o data-role atributo para transformar qualquer lista em uma exibição de lista.

11. Construir um rodapé.

    Adicionar mais uma div com data-role definido como # 147-footer # 148-. Normalmente, o rodapé (como o cabeçalho) é fixado com o -Posição dados atributo.