Construir um site para celular com o jQuery Mobile

jQuery mobile é, um sistema de interface de usuário baseada em HTML5 otimizado-touch.Ele é construído sobre a plataforma jQuery e jQuery UI, e é ideal para o desenvolvimento móvel rápida.O quadro jQuery Mobile utiliza atributos especiais para ajudar a definir e estilo seus elementos, sem ter que escrever classe as suas normas de si mesmo.

1. 1
   Navegue até a página inicial do jQuery mobilee, em seguida, clique na guia "download" no menu de navegação principal.

   Anúncio

   esta etapa foi útil?Sim |Não |Preciso de ajuda
2. 2
   Role para baixo na página de download até ver um Copiar e colar trechos de arquivos CDN-hospedados seção .

   copie as linhas de código em sua área de transferência.Estes três arquivos de referência são tudo o que você precisa para implementar o quadro.

   instagram viewer

   Anúncio

   esta etapa foi útil?Sim |Não |Preciso de ajuda
3. 3
   Abra seu software de desenvolvimento preferido e criar uma nova documento HTML.

   Se você não tem software de desenvolvimento, abra o aplicativo bloco de notas em seu computador.

   esta etapa foi útil?Sim |Não |Preciso de ajuda
4. 4
   Adicione as referências ao seu documento HTML.

   dentro de sua cabeça etiquetas , cole os links de arquivos CDN-hospedados.

   esta etapa foi útil?Sim |Não |Preciso de ajuda
5. 5
   Crie sua primeira "página".

   Com o framework jQuery Mobile, você criar várias páginas dentro do mesmo documento HTML.Dentro das tags corpo , criar um recipiente div.Adicione o atributo em função de dados, e atribuir-lhe um valor de página .Por fim, adicione o atributo ID , e atribuir-lhe um valor de casa .

   esta etapa foi útil?Sim |Não |Preciso de ajuda
6. 6
   Adicione o cabeçalho , conteúdo e rodapé recipientes div .

   Dentro da sua página de container div, criar mais três tags div.Usando o em função dos dados de atributo , atribuir valores de cabeçalho , conteúdo e rodapé respectivamente.Esta é a estrutura básica de uma página jQuery móvel.

   esta etapa foi útil?Sim |Não |Preciso de ajuda
7. 7
   Adicionar cabeçalho e rodapé títulos .

   Usando o h1 título tag, criar cabeçalho títulos para o seu cabeçalho e rodapé tags.

   esta etapa foi útil?Sim |Não |Preciso de ajuda
8. 8
   Criar uma segunda página.

   exterior do recipiente div que tem seu atributo -papel conjunto de dados para a página, crie um novo recipiente div.Adicione o em função dos dados de atributo , em seguida, configurá-lo para a página.Adicione o atributo ID , em seguida, configurá-lo para a página 2. Finalmente, adicione recipientes div para o cabeçalho, conteúdo e rodapé, assim que a estrutura se assemelha a home page.

   esta etapa foi útil?Sim |Não |Preciso de ajuda
9. 9
   Criar um página do menu.

   A página do menu que vai ser criado da mesma forma como as duas primeiras páginas, mas sem um rodapé.Criar um recipiente div e defina seu atributo em função de dados para a página.Adicione o atributo ID , e dar-lhe um valor de main_nav.

   esta etapa foi útil?Sim |Não |Preciso de ajuda
10. 10
    Criar o estrutura do menu de navegação.

    Dentro do conteúdo do recipiente div , criar uma lista desordenada.Adicione o atributo em função de dados e defina seu valor como listview.Adicione o atributo -inserção de dados, e defina seu valor para true.Dentro das tags ul para a lista desordenada, adicione duas marcas de item de lista( tags li).

    esta etapa foi útil?Sim |Não |Preciso de ajuda
11. 11
    Criar o links do menu.

    Dentro das primeiras marcas de item de lista, criar uma marca de âncora.Adicione o atributo href para a marca de âncora.Use o símbolo hashtag para atingir um atributo ID e digite "casa".Este tem como alvo o "home" container div.Siga este mesmo processo para a segunda lista item, mas desta vez tipo hashtag "page2" para segmentar a segunda página.

    esta etapa foi útil?Sim |Não |Preciso de ajuda
12. 12
    Adicionar links do menu para outras páginas .

    Agora que o seu menu é criado, você precisa definir tags de âncora no seu "home" e "página 2" páginas para aceder à mesma.Rolar para cima e encontrar a seção cabeçalho de sua home page.Adicionar uma marca de âncora no interior do recipiente de cabeçalho, pouco antes da tag h1 .Usando o mesmo processo de vinculação, como você fez com o menu, defina o atributo href a hashtag "main_nav".Adicionar o papel dos dados de atributo , e dar-lhe um valor de botão.Adicionar o ícone de dados de atributo , e dar-lhe um valor de bares.Por fim, adicione o atributo -iconpos de dados, e dar-lhe um valor de notext.Isso cria um botão à esquerda do seu título do cabeçalho.Repita este passo para a página page2.

    esta etapa foi útil?Sim |Não |Preciso de ajuda
    Anúncio

• Crie quantas páginas dentro do mesmo documento HTML como você gosta.jQuery Mobile usa um sistema de navegação AJAX que automaticamente entra em ação quando você criar várias páginas dentro do mesmo documento.
• Adicionar o transição de dados atributo a âncoras para uma transição visualmente apaziguar entre as páginas.As transições disponíveis são fade, pop, flip, por sua vez, fluxo, slidefade, slide, tela deslizante e slideDown.
• Use o -theme dados atribuir ao estilo quase todos os elementos em seu projeto.Por padrão, o jQuery Mobile vem com cinco amostras de cores para você usar.O sistema theming usa cartas como valores.Consequentemente, a -theme dados atributo aceita valores de a, b, c, d, e quando você baixá-lo.Confira o jQuery Mobile ThemeRoller para criar um tema personalizado, com até 26 amostras de cores diferentes!
• Use o -position dados atributo para criar cabeçalhos e rodapés "pegajosas" ou fixas para o seu site.Adicionar este atributo para um recipiente div que tem sua em função de dados do conjunto para cabeçalho ou rodapé, eo valor -position dados para fixo.
• Confira o Kit jQuery Mobile Cor para começar a desenvolver com 26 diferentes amostras temáticos.

• Certifique-se de usar comentários HTML para separar suas páginas jQuery Mobile.Isto poupa-lhe uma tonelada de tempo na estrada, como um único documento HTML com várias "páginas" fica inchado muito rapidamente.

• jQuery Mobile Cor Kit
• jQuery Mobile
• jQuery Mobile ThemeRoller
• Se você tiver problemas com qualquer uma dessas etapas, pergunte a umquestão para obter mais ajuda, ou postar na seção de comentários abaixo.