Post on 05-Sep-2018
PROGRAMAÇÃO PARADISPOSITIVOS MÓVEIS- INTRODUÇÃO A JQUERY MOBILEProf. Angelo Augusto Frozza, M.Sc.http://about.me/TilFrozza
ROTEIRO
Introdução
Principais características Página dentro de página Transições de página Caixas de diálogo Botões Elementos de formulário Listas Temas Eventos
JQUERY MOBILE
Para utilizar o JQuery Mobile você precisa incluir três coisas no seu HTML:
Script do JQuery http://code.jquery.com/jquery-1.5.min.js
Script do JQuery Mobile Onde estão os métodos específicos para mobile http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js
CSS da interface do usuário (UI) para JQuery Mobile http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css
JQUERY MOBILE
Primeiro exemplo (index.html)
<!DOCTYPE html> <html>
<head> <title>Primeira Página</title> <script type="text/javascript" src="http://code.jquery.com/jquery-
1.5.min.js"></script> <script type="text/javascript"
src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> <link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> </head> <body>
<div data-role="page"> <div data-role="header">
<h1>Primeira página</h1> </div> <div data-role="content">
<p>Essa é sua primeira página para dispositivos móveis</p> </div>
</div> </body>
</html>
JQUERY MOBILE
A partir do HTML 5 pode-se colocar metadados nas tagsusando o data-*
Então a essência do JQuery Mobile é basicamenteutilizar o atributo data-* para as diferentesfuncionalidades e aparências.
Alguns atributos data-* que podem ser utilizados nas diferentes tags: data-role data-theme data-icon data-transition
JQUERY MOBILE
Exemplo de uso do data-*
<li class="comentario"
data-nome="Tecnologia em Sistemas para Internet"
data-cidade="Camboriú"
data-estado="SC"
data-pais="Brasil"
data-lang="pt-br">
<b>Programação para DM</b>
<span>Muito boa essa aula!</span>
</li>
JQUERY MOBILE
Exemplo de uso do data-*
.comentario [data-pais=Brasil] {color: yellow;background-color:green;
}.comentario [data-pais=Japao] {
color: red;background-color:white;
}...
JQUERY MOBILE
Como pode-se ver, o conteúdo da página em si é envoltoem uma div com atributo data-role="page". Isso permite que o jQuery Mobile saiba onde o conteúdo está
na marcação.
Dentro da div "page", existem outros div data-role "header" , "content" e "footer" Todos eles são opcionais, embora provavelmente seja incluido
pelo menos o div "content".
JQUERY MOBILE
<div data-role="header">
Essa div permite criar uma barra de ferramentas naparte superior da página, usada para coisas como otítulo da página e os botões. Normalmente existe 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 ocabeçalho, pode-se ter certeza que o cabeçalho ficarásempre no topo da tela.
JQUERY MOBILE
<div data-role="content">
Contém o conteúdo principal da página, como texto,imagens, botões, listas, formulários e assim por diante.
JQUERY MOBILE
<div data-role="footer">
Cria uma barra de ferramentas na parte inferior dapágina, que é bastante útil para coisas como botões defunção principal. Ao adicionar os dados de posição = "fixo" para o rodapé,
pode-se ter certeza que sempre fica na parte inferior da tela.
JQUERY MOBILE
Página dentro de página
Uma página HTML pode conter duas ou mais div “page“, cada uma com um id diferente
<div data-role="page" id="home">
...
</div>
<div data-role="page" id="about">
... </div>
JQUERY MOBILE
Página dentro de página
A página inicial possui link a página about, enquanto que a segunda página tem um link para a página home.
JQuery Mobile automaticamente intercepta essas ligações de modo que cada div apareça como uma nóva página:
<div data-role="page" id="home"><div data-role="content">
<p><a href="#about">"Sobre" deste app...</a>
</p> </div>
</div>
<div data-role="page" id="about"><div data-role="content">
<p>Isto funciona! <a href="#home">Início</a>
</p> </div>
</div>
JQUERY MOBILE
Transições de página
JQuery Mobile permite aplicar diferentes efeitos de transição para uma nova página.
Para tanto, basta adicionar em cada link um atributo data-transition
<a href="#about" data-transition="flip">About</a>
Os valores possíveis estão na documentação da jQuery Mobilehttp://view.jquerymobile.com/1.3.0/docs/widgets/transitions/
JQUERY MOBILE
Caixas de diálogo
Pode-se transformar uma página em Caixa de diálogo ao adicionar na tag de link o atributo data-rel="dialog“.A caixa de dialogo aparecerá com cantos arredondados,
margens e um fundo escuro. Também pode-se adicionar uma transição, de forma a
demonstrar que está abrindo uma caixa de diálogo.
<a href="#about" data-rel="dialog" data-transition="slideup">Sobre…</a>
JQUERY MOBILE
Botões
Botões são uma parte essencial de qualquer aplicativo baseado no toque.
Eles são preferíveis aos links porque fornecem um alvo maior quando a intenção é tocar. Lembre-se do conceito do “Dedo gordo”
Para transformar um link em um botão, basta adicionar o atributo data-role="button" na tag do link:
<a href="#about" data-role="button" data-transition="slideup">Sobre…</a>
JQUERY MOBILE
Elementos de formulário
O jQuery Mobile substitui automaticamente o padrão de controles em formulários HTML P.ex. campos de texto, caixas e listas de seleção; Controles personalizados que funcionam melhor com uma interface
sensível ao toque e mais flexível; Caixas de seleção são feitas bem maiores pois elas são mais fáceis
de tocar;
JQUERY MOBILE
Elementos de formulário
O jQuery Mobile também registra rótulos e campos de formulário com base na largura de exibição do dispositivo. P.ex. se o display tem 480 pixels de largura, os rótulos são colocados
acima dos campos para economizar espaço horizontal; Em telas mais amplas, os rótulos são exibidos ao lado dos campos.
JQUERY MOBILE
Elementos de formulário
Outro recurso interessante é o agrupamento de botões do tipo radio e checkbox em um fieldset, com atributo data-role="controlgroup"; jQuery Mobile automaticamente implemenenta estilos aos campos,
observando o modo como eles estão agrupados, sem intervalos entre cada campo e arredondando os cantos nos campos superior e inferior.
JQUERY MOBILE
Elementos de formulário
Exemplo:
Aula004-Exemplo04-Formularios.html
JQUERY MOBILE
Listas
Exibições de lista são um recurso muito poderoso do jQueryMobile;
Elas permitem trabalhar 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, adiciona-se o atributo data-role="listview" nas tags ul ou ol;
A seguir são mostradas algumas das coisas que se pode criar usando exibições de lista...
Aula004-Exemplo05-Listas.html
JQUERY MOBILE
Listas
Uma lista simples de itens de texto, com uma caixa em torno de cada item;
Uma lista de links - coloca-se uma tag link em um item da lista e o jQuery adiciona automaticamente um ícone de seta ('>' ) do lado direito de cada item da lista.
JQUERY MOBILE
Listas
Listas aninhadas - para aninhar uma tag ul dentro de uma tag 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;
Listas de botões divididos - Ao colocar dois links dentro de uma tag li, pode-se 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);
JQUERY MOBILE
Listas
Bolhas de contagem - ao incluir um elemento com uma classe de contagem em um item da lista, o jQuery cria um pequeno ícone de "bolha" no lado direito do item de lista contendo o conteúdo do elemento. Isso é ótimo para coisas como contagens de mensagens em listas de
correio;
Filtragem de pesquisa - ao adicionar o atributo data-filter="true" para uma tag ul ou ol, então a lista fica disponível para pesquisa. Uma caixa de texto "Filtrar resultados ..." aparece acima da lista,
permitindo ao usuário diminuir as opções; Perfeito para grandes listas;
JQUERY MOBILE
Listas
Divisores de lista para as listas com divisão em seções. Basta adicionar o atributo data-role="list-divider" para qualquer item
da lista;
Miniaturas e ícones – ao colocar um elemento img no início de um item da lista, o jQuery vai usar a imagem como uma miniatura da lista em escala de 80 x 80 pixels. Ao adicionar uma classe ui-li-icon para a img, o ícone terá escala de
16 x 16 pixels.
JQUERY MOBILE
Listas
Veja mais detalhes em:
Criando lista com jQuery Mobile – Parte 01http://imasters.com.br/artigo/20192/jquery/criando-lista-com-jquery-mobile-parte-01/
Criando lista com jQuery Mobile – Parte 02http://imasters.com.br/artigo/20272/mobile/criando-lista-com-jquery-mobile-parte-02/
JQUERY MOBILE
Temas
O estilo de cores cinza, preto e azul com Widgetsarredondados produzido pelo jQuery Mobile permitem uma experiência muito agradável
Porém, a vida seria monótona se todos tivessem que usar o mesmo estilo em todos os aplicativos móveis!
JQUERY MOBILE
Temas
Por isso, jQuery Mobile permite criar temas que personalizam coisas como, por exemplo: Família de fontes Sombras Valores de raio de botões e caixas de canto Conjuntos de ícones
JQUERY MOBILE
Temas
Cada tema pode conter até 26 amostras de cores diferentes (rotuladas de 'a' a 'z'), que controlam a cor de primeiro plano, cor de fundo, gradiente. O tema padrão vem com 5 amostras.
Normalmente, para fazer um elemento de página usar uma amostra particular, usa-se o atributo data-theme:
Aula004-Exemplo06-Temas.html
JQUERY MOBILE
Eventos
Pode-se dizer que são os eventos que tornam a linguagem JavaScript útil.
Um script depende da ocorrência de um evento para realizar a ação nele prevista.
Toda vez que ocorre interação com um documento web, um evento é disparado. P.ex. O toque em um link ou o arraste da tela caracterizam a
ocorrência de um evento.
JQUERY MOBILE
Eventos
Tornam mais fácil a construção de interfaces de usuário;
jQuery Mobile adiciona alguns eventos específicos usados para detectar ações executadas em DM; P.ex: Pode-se usar o evento taphold para detectar se o usuário tocou
e segurou o dedo em um elemento (1 segundo); O evento swipe ocorre quando o usuário toca um elemento,
arrastando-o horizontalmente para a esquerda ou direita por uma distância no mínimo igual a 30px.
Aula004-Exemplo07-Eventos.html
REFERÊNCIAS
Consulte:
SILVA, M. S. jQuery Mobile: desenvolva aplicações web para dispositivos móveis com HTML 5, CSS3, Ajax, jQuery e jQueryUI. São Paulo: Novatec, 2012.
Também pode consultar o material complementar no link:http://www.ifc-camboriu.edu.br/~frozza/2013.1/pdm.html