Como construir uma página básica jQuery Mobile para programação HTML5 e CSS3 - dummies

Existe uma abordagem muito popular entre os programadores HTML5 e CSS3 para a criação de sites amigáveis ​​para dispositivos móveis com AJAX, e é usar uma biblioteca adicional para jQuery jQuery Mobile . O Jquery Mobile é uma poderosa combinação de código JavaScript e CSS construído em cima da biblioteca.

A biblioteca do jQuery funciona tomando uma página HTML5 normal e modificando-a de formas que imitam uma aparência nativa. O código parece muito com HTML comum:

Demo móvel

JQuery Mobile Demo
jQuery Mobile site

Esta é uma lista comum
Codificado para se parecer com
uma lista de dispositivos móveis

de > HTML All in One for Dummies Alguns detalhes transformam esta página em uma maravilha móvel:

Inclua o CSS móvel jQuery.

1. Este é um arquivo CSS especial projetado para transformar elementos HTML em suas homólogas móveis. Embora você possa baixá-lo você mesmo, a maioria dos desenvolvedores liga diretamente ao site jQuery.

   Inclua a biblioteca jQuery padrão.

2. Grande parte do código é baseado em jQuery, então integre a biblioteca jQuery também. Mais uma vez, você precisa puxar jQuery do site jQuery principal.

   Incorporar a biblioteca móvel jQuery.

3. Esta é uma biblioteca de JavaScript que estende a biblioteca para adicionar um novo comportamento específico para o celular.

   Adicione um atributo data-role = "page" à div principal.

4. Crie uma div principal na sua página e forneça o atributo a ela. Este é um atributo de função de dados personalizado adicionado pelo dispositivo jQuery. jQuery analisa as funções de dados dos vários elementos e aplica mudanças de estilo e comportamento a esses elementos automaticamente. Atribua sua página de função de dados div principal. Isso diz ao navegador que trata toda a div como uma página.

   Especifique um tema de dados.

5. Você pode aplicar um tema de dados a qualquer elemento, mas você quase sempre aplica um tema à página. O celular jquery vem com uma série de temas padrão incorporados, chamados "a" através de "e. "Experimente encontrar o que você gosta, ou você pode construir o seu próprio com a versão móvel especial do ThemeRoller.

   Adicione mais divs dentro de sua página.

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

   Especifique o cabeçalho div com data-role = "header".

7. Ao colocar qualquer informação do cabeçalho dentro de uma div com uma função de dados "cabeçalho", você está dizendo ao jQuery que trate esse elemento como um cabeçalho móvel e aplique os estilos apropriados. O cabeçalho geralmente inclui uma marca

   .

   Normalmente, você especificará o cabeçalho a ser corrigido com o atributo data-position = "fixed". Isso garante que o cabeçalho permaneça em vigor se o resto do conteúdo estiver rolado, o que é um comportamento típico em uma aplicação móvel.

   Configurar um conteúdo div.

8. Adicione uma div com data-role = "content" para configurar a área de conteúdo principal da sua página. Qualquer um dos elementos do corpo principal do seu site deve entrar neste segmento.

   Qualquer link pode ser convertido em um botão.

9. A convenção padrão em aplicativos da web é transformar links em botões que tenham um alvo maior que a entrada baseada em mouse. É fácil converter qualquer link para um botão, adicionando o atributo data-role = "button" à tag âncora.

   Converte listas para listas de lista móveis.

10. As listas também possuem convenções especiais no mundo móvel. Você pode usar o atributo de função de dados para transformar qualquer lista em um ListView.

    Crie um rodapé.

11. Adicione mais um div com o conjunto de funções de dados para "rodapé". Normalmente, o rodapé (como o cabeçalho) é corrigido com o atributo data-position.