jQuery Mobile: O que ele pode fazer por você?

Descubra como o framework jQuery para dispositivos móveis pode ajudar a construir uma ótima aparência, apps para todo tipo de aparelho-web com facilidade. Temos muitos exemplos de código e demos incluídos.

Por Programação Pular para comentários
jQuery Mobile: O que ele pode fazer por você?

Descubra como o framework jQuery para dispositivos móveis pode ajudar a construir uma ótima aparência, apps para todo tipo de aparelho-web com facilidade. Temos muitos exemplos de código e demos incluídos.

jQuery tem sido uma biblioteca JavaScript bastante popular para a criação de websites altamente interativos e aplicações web. No entanto, ele foi projetado principalmente para navegadores desktop, ele não tem muitos recursos projetados especificamente para a construção de aplicativos móveis para web.

jQuery mobile é um novo projeto que aborda esse justamente este déficit. É um quadro construído em cima do jQuery que fornece uma gama de elementos da interface do usuário e recursos para você usar em seus aplicativos móveis.
A situação é bem sofisticada no momento da escrita na verdade, a primeira versão alpha foi liberada somente no mês passado , mas já é possível fazer algumas coisas com ela.

Neste artigo vamos olhar para alguns dos principais recursos e benefícios de Mobile jQuery, e mostrar alguns exemplos de como este novo quadro pode ajudar você a construir aplicativos móveis de alta qualidade em pouco tempo.

O que podemos fazer com jQuery ?


  • jQuery mobile torna fácil o desenvolvimento das interfaces de usuário para aplicações web móvel .
  • A configuração da interface de marcação é orientada , o que significa que você pode muito bem criar sua interface de aplicativo básica inteiramente em HTML, sem precisar escrever uma única linha de JavaScript. (Claro, você ainda precisa escrever JavaScript se sua aplicação for fazer algo de útil!)
  • Ele fornece uma série de novos eventos personalizados para deixá-lo realizar ações específicas, como toque, toque e segure, furto, e mudar a orientação (ou seja, girando o dispositivo).
  • Implementa a melhoria de forma progressiva para garantir que sua interface de app funciona em praticamente qualquer dispositivo web-enabled .


A estrutura da página móvel jQuery


A maioria das páginas de jQuery para aplicativos web móvel irá seguir este modelo básico:
 
 
   
  Page Title 
  
  
  
 
 

Page Title

Page content goes here.

Page Footer



Para usar jQuery para dispositivos móveis, primeiro você precisa incluir 3 coisas na sua página:
  • jQuery Celular arquivo CSS ( jquery.mobile-1.0a1.min.css )
  • A biblioteca jQuery ( jquery-1.4.3.min.js )
  • jQuery biblioteca móvel ( jquery.mobile-1.0a1.min.js )

Na página acima, já temos ligado diretamente a estes arquivos no CDN jQuery, mas se você preferir, pode baixar os arquivos e hospedá-los em seu próprio servidor.
Como você pode ver, o conteúdo da página em si é envolto em uma div com dados de role- atributos de "página". Isso permite que o jQuery móvel saiba onde o conteúdo está na marcação.

Dentro da "página" div , existem outros "header" , "conteúdo" e "footer" div s.Todos eles são opcionais, embora você provavelmente vai querer incluir pelo menos o"conteúdo" div:


Isso permite que você crie uma barra de ferramentas na parte superior da página, usando para coisas como o título da página e os botões.(Normalmente existem pelo menos um botão "Voltar" no qual o usuário pode tocar para retornar à página anterior.) Ao acrescentar dados de posição = "fixo" para o cabeçalho, você pode ter certeza que o cabeçalho ficará sempre no topo da tela.



Contém o conteúdo principal da página, como texto, imagens, botões, listas, formulários e assim por diante.



Cria uma barra de ferramentas na parte inferior da página, que é bastante útil para coisas como botões de função principal. Ao adicionar os dados de posição = "fixo" para o rodapé, você pode ter certeza que sempre fica na parte inferior da tela.


Páginas dentro de páginas


 
 
   
  jQuery Mobile: Pages within Pages 
  
  
  
 
 
 

 

About This App

This app rocks! Go home


Veja uma demonstração

Como você pode notar, a página acima contém duas "páginas": Home (com um ID de"home" ) e Sobre (com um ID de "sobre" ). A página inicial possui links para a página Sobre o uso de # cerca , enquanto os links Sobre a página de volta para a página inicial usando # casa . O jQuery Mobile automaticamente intercepta estas ligações de modo que cada div aparece como uma nova "página" no navegador do celular.


Ajax utilizado para navegação


A fim de tornar a experiência do usuário tão simples quanto possível em dispositivos móveis, o Mobile jQuery usa Ajax para carregar páginas linkadas por padrão. Então, ao invés do browser seguir o link e abrir uma nova página, o jQuery intercepta a ligação móvel, solicita a página via Ajax, e injeta o conteúdo da nova página para o DOM da página existente. Ele também usa hashes URL para garantir que cada página ainda receba o seu próprio URL, único bookmarkable.

O resultado disso é que o usuário é mantido sempre dentro da mesma página principal. O conteúdo das páginas novas simplesmente aparecem dentro dessa página principal. Isso resulta em uma experiência mais suave do que a abordagem tradicional de abrir uma página nova, o que normalmente resulta em uma tela em branco e alguns segundos de polegar girando. Além do mais, uma vez que as novas páginas são inseridas como nova data = papel = "page" div s para a página principal, a página principal efetivamente caches o conteúdo buscado, tornando-o muito mais rápido para exibir as páginas buscadas em uma próxima vez.

Enquanto tudo isso soa incrivelmente complexo ( muitas maneiras, é!), Para a maior disso tudo você não precisa saber os detalhes de como ele funciona. Ele apenas faz.


Transições de página


http://www.oficinadanet.com.br//imagens/coluna/3244//page-transitions-jquery.jpg


Você pode aplicar um número muito grande de efeitos diferenciados de transição para uma nova págin. Para fazer isso, basta adicionar uma transição de dados e atributos para o link. Os Valores possíveis são:
  • slide - Deslize da direita para a esquerda (da esquerda para a direita, se tocar no botão Voltar). Este é o padrão.
  • slideup - Deslize de baixo para cima (de cima para baixo, se tocar no botão Voltar).
  • slideDown - Deslizar de cima para baixo (de baixo para cima, se tocar no botão Voltar).
  • pop - Expandir a nova página (contrato-la se tocar no botão Voltar). Ótimo para diálogos e popups.
  • desvanecer - Desaparecer a nova página (realizar se tocar no botão Voltar).
  • aleta - Virar a página da velha e da nova página na, como lançar um cartão.

Por exemplo, alterando uma linha no anterior "Páginas dentro de páginas" por exemplo, podemos fazer a página "Sobre" entrar e sair:

About this app

   

VER DEMONSTRAÇÃO


Diálogos


Pela adição de dados rel = "diálogo" com um link, você pode fazeR a página vinculada aparecer como uma caixa de diálogo, com cantos arredondados, margens e um fundo escuro. Também é uma boa idéia para adicionar uma transição, como tela deslizante , pop ou virar de modo que parece que você está abrindo um diálogo.

Vamos modificar o nosso link "Sobre" a partir do exemplo acima para que a página vinculada parece um diálogo:

About this app

   


Botões


http://www.oficinadanet.com.br//imagens/coluna/3244//buttons.jpg

Botões são uma parte essencial de qualquer aplicativo baseado no toque. Eles são preferíveis aos links, porque eles fornecem um alvo maior quando a intenção é tocar (importante se você tem dedos gordos como eu!). Para transformar um link em um botão em Mobile jQuery, basta adicionar dados role-= "button" para a marca:

 
...
 
  

This app rocks!

Go home

Ver Demonstração

Você pode facilmente adicionar vários links para os botões usando o ícone de dados e atributos, para criar uma linha entre botões e grupos horizontalmente ou verticalmente.

Conteúdo de formatação


Para tornar-se tão flexível quanto possível, o Mobile jQuery deixa mais n de conteúdo HTML . Ele adiciona um bit de preenchimento para tornar o conteúdo mais legível, mas isso é tudo.
Há também um par de estilos de conveniência para tornar a vida um pouco mais fácil: grids de layout e blocos de conteúdo desmontável.

Grids de layout: permitem organizar o conteúdo das colunas. Há uma grade de duas colunas, e também uma versão em 3 colunas.

Blocos de conteúdo dobráveis ou "acordeons": são blocos de conteúdo com um cabeçalho que, quando clicado, pode expandir e contrair.

Aqui está um exemplo de um bloco de conteúdo desmontável:
 
 
   
  Collapsible Content Demo 
  
  
  
 
 
 

Home

About this app

This app rocks!


Ver Demonstração

Toque otimizado em elementos do formulário


http://www.oficinadanet.com.br//imagens/coluna/3244//form-elements.jpg

O jQuery Celular pode substituir automaticamente o padrão de controles de formulário HTML, como campos de texto, caixas e listas de seleção, com controles personalizados que funcionam melhor com uma interface sensível ao toque, e que pode ser denominado de 'forma mais flexível'.

Por exemplo, caixas de seleção são feitas bem maiores poise elas são mais fáceis de tocar, enquanto batenm em um menu de seleção aparece uma lista de botões grandes para as opções na lista.

O jQuery Mobile também registra rótulos e campos de formulário com base na largura de exibição do dispositivo. Se o display está em torno de 480 pixels de largura, em seguida, os rótulos são colocados acima dos campos para economizar espaço horizontal. Para exposições mais amplas, jQuery exibe etiquetas ao lado de campos.

A estrutura suporta novos elementos de HTML5, como forma de pesquisa (para caixas de pesquisa) e gama (para sliders). Além disso, você pode criar agradáveis ​​"on / off" switches usando um flip- selecione lista com um atributo de dados da função = "slider" , e colocando duas opções na lista.

Outro recurso interessante é o agrupamento de botões de rádio e caixas de seleção. Se você agrupar um conjunto de botões de rádio ou checkboxes em um fieldset com um elemento de dados role-= "grupo controle" como atributo, jQuery Mobile automaticamente implementa estilos aos campos de modo que observem como eles estão agrupados, sem intervalos entre cada campo e arredondando os cantos nos campos superior e inferior.

Aqui está uma demonstração rápida de alguns desses campos do formulário em Mobile jQuery:
 
 
   
  jQuery Mobile Form Demo 
  
  
  
 
 
 

Ice Cream Order Form

Which flavour(s) would you like?

Ver demonstração

As exibições de listas: Listas sobre esteróides


Exibições de lista são um recurso muito poderoso do Mobile jQuery. Elas permitem que você trabelhe um padrão de estilo não-ordenado ou de listas ordenadas em uma variedade de formas úteis. Para ativar uma lista regular em uma exibição de lista, adicionar dados role-= "listview" para o ul ou ol tag. Aqui estão algumas das coisas que você pode criar usando exibições de lista:
  • Uma lista simples de itens de texto , com uma bela caixa em torno de cada item.
  • Uma lista de links, Coloque um uma tag em um item da lista, e o jQuery adiciona automaticamente um '>' ícone da seta para o lado direito de cada item da lista.
  • Listas aninhadas, Se você criar o ninho de outro ul da lista dentro de uma li , o jQuery automaticamente cria uma segunda "página para a lista incorporada, ligando a partir do original. Isto é muito útil para a criação de árvores de opções de menu, configurações e assim por diante.
  • Dividir listas de botões. Ao colocar doi links dentro de uma li , você pode criar um item da lista com uma barra de divisão vertical no lado direito do item. O usuário pode então tocar em qualquer lado esquerdo ou direito do item da lista para conseguir coisas diferentes (como a visualização ou compra).
  • Contagem de bolhas. Se você incluir um elemento com uma classe de contraria em um item da lista, em seguida, o jQuery cria uma pequena "bolha" no ícone do lado direito do item de lista contendo o conteúdo do elemento. Isso é ótimo para coisas como contagens de mensagens em listas de correio.
  • Pesquisa de filtragem. Se você adicionar o atributo data-filtro = "true" para um ul ou ol então a lista fica disponível para pesquisa. "Filtrar resultados ..." caixa de texto aparecem acima da lista, permitindo ao usuário diminuir as opções. Perfeito para grandes listas.
  • Divisores de lista para as listas de divisão em seções. Basta adicionar dados role-= "lista divisor" para qualquer item da lista.
  • Miniaturas e ícones. Coloque uma img elemento no início de um item da lista, o jQuery e vai usar a imagem como uma miniatura na lista de escala, para 80 x 80 pixels. Adicionar uma classe de ui-li-icon para a img, o elemento poderá escalá-lo para um ícone de 16 x 16 pixels.


Aqui está uma página como exemplo que mostra algumas das exibições de lista disponíveis para Mobile jQuery:
 
 
   
  jQuery Mobile Lists Demo 
  
  
  
 
 
 

Lists Demo

A list view

  • Cat
  • Dog
  • Mouse
  • Squirrel

A list of links

Nested lists

A split button list with filter

A list with count bubbles


Ver Demonstração

Theming


O cinza, preto e azul Widgets arredondado produzidso pelo jQuery geram uma impressão muito agradável, mas a vida seria monótona se todos nós tivemos que usar o mesmo estilo para os nossos aplicativos móveis! Para este fim, jQuery Mobile permite-lhe criar temas personalizados que governam coisas como:
  • Família de fontes
  • Sombras
  • Canto valores de raio de botões e caixas de
  • Conjuntos de ícones


Além disso, cada tema pode conter até 26 amostras de cores diferentes (rotulado de 'a' a 'z'), que controlam a cor de primeiro plano, cor de fundo, gradiente . (O tema jQuery padrão vem com 5 amostras.) Normalmente, para fazer um elemento de página usar uma amostra particular, você usa o tema de dados- atributos. Por exemplo:
 
 
   
  Page Title 
  
  
  
 
 
 

 


Ver Demonstração

Eventos


Tornar mais fácil a construção de interfaces de usuário, jQuery móvel adiciona alguns eventos celulares específicos que você pode usar para detectar ações executadas em dispositivos móveis.

Por exemplo, você pode usar taphold para detectar se o usuário bateu e segurou o dedo em um elemento, e passe para detectar se o usuário swiped horizontalmente da esquerda para a direita (ou direita para a esquerda) através do elemento:
 
 
 
jQuery Mobile Events 



 
   

 
 
 

jQuery Mobile Events

Try:

  • Tapping and holding
  • Swiping


Conclusão


Neste artigo nós exploramos a nova biblioteca jQuery Mobile, e vimos como ela pode lhe poupar muito tempo e esforço na construção de aplicações web. Embora seja atualmente apenas em alfa, e rodada de forma um pouco áspera nas bordas, é perfeitamente possível começar a jogar com ele e criação de aplicativos.

Com informações: http://www.elated.com

Compartilhe com seus amigos:
Mais sobre: mobile, jquery, Ajax, aplicativos
Gregory Laborde
Gregory Laborde Estudante da Licenciatura em Computação Pela Universidade Federal Rural de Pernambuco.Técnico em Tecnologia da Informação. Entusiasta do Software Livre e Palestrante.
FACEBOOK // TWITTER: @gregoryylaborde
Quer conversar com o(a) Gregory, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.