Como construir uma página móvel jquery básica para html5 e css3 programação
Há uma abordagem muito popular entre os programadores HTML5 e CSS3 para a construção de sites mobile-friendly com AJAX, e isso é usar um add-on biblioteca para jQuery chamada jQuery mobile
Conteúdo
A biblioteca jQuery funciona tirando 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:
Demonstração móvel JQuery Mobile Demo
- Esta é uma lista comum
- Codificado para parecer
- uma lista móvel
Alguns detalhes virar esta página em uma maravilha móvel:
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.
Incluir a biblioteca jQuery padrão.
Grande parte do código é baseado em jQuery, assim integrar o jQuery biblioteca também. Mais uma vez, você precisa puxar jQuery da principal jQuery local na rede Internet.
Incorporar a biblioteca móvel jQuery.
Video: Animated Login Form Design using HTML 5, CSS 3 & jQuery
Esta é uma biblioteca javascript que estende a biblioteca para adicionar novo comportamento específico-móvel.
Adicionar um data-role =”página” atribuir ao div principal.
Criar um div principal em sua página e fornecer o atributo a ele. Este é um costume data-role atributo adicionado pelo jQuery móvel. jQuery olhares sobre os papéis de dados dos vários elementos e aplica estilo e comportamento alterações a estes elementos automaticamente. Atribuir o seu principal div o papel de dados página. Isso diz ao navegador para tratar toda a div como uma página.
Especifique um tema de dados.
Você pode aplicar um tema de dados a qualquer elemento, mas você quase sempre aplicar um tema à página. jQuery Mobile vem com uma série de temas padrão embutido, chamado de “a” a “e”. Experiência para encontrar o que você gosta, ou você pode construir seu próprio com a versão móvel especial do ThemeRoller.
Adicionar mais divs dentro de sua página.
Video: Image Slider (2/3) HTML 5 CSS 3 and javascript
Adicionar mais alguns divs dentro de sua página div. Geralmente você terá três: cabeçalho, conteúdo e rodapé.
Especifique o div cabeçalho com dados em função =”cabeçalho”.
Ao colocar qualquer de suas informações de cabeçalho dentro de uma div com um papel de dados “cabeçalho”, você está dizendo jQuery para tratar este elemento como um cabeçalho móvel e aplicar os estilos apropriados. O cabeçalho inclui, tipicamente, uma etiqueta.
Normalmente você vai especificar o cabeçalho para ser fixado com o dados de posição-=”fixo” atributo. Isso garante o cabeçalho vai ficar no lugar, se o resto do conteúdo é rolado, o que é um comportamento típico em uma aplicação móvel.
Video: [Tutorial] Criando uma bela página de login (HTML / CSS) a partir de um PSD Parte 1 de 2
Configurar um conteúdo div.
Adicionar uma div com data-role =”content” 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.
Qualquer ligação pode ser convertido em um botão.
A convenção padrão em aplicações web é transformar ligações em botões que têm um alvo maior do que a entrada à base de rato. É fácil converter qualquer link para um botão adicionando o data-role =”button” atributo para a marca de âncora.
Converter listas para listviews móveis.
As listas também têm convenções especiais no mundo móvel. Você pode usar o data-role atribuir a transformar qualquer lista em uma exibição de lista.
Construir um rodapé.
Adicionar mais uma div com data-role definido como "rodapé". Normalmente, o rodapé (como o cabeçalho) é fixo com o -Posição dados atributo.