jQuery mobile

Heraldo Gonçalves Lima Junior
Eudis Oliveira Teixeira

1

Porquê desenvolver um site mobile?
• Os seus clientes já estão mobile! E você?

• Até 2013 estima-se que os usuários vão usar mais os
dispositivos móveis do que o PC para acessar a internet.

• Procura por dispositivos móveis cresceram 400% desde
2010.

• Em 2015 vai haver um aparelho móvel para cada pessoa
na terra.
Fontes: Gartner, 2010; Google Internal Data, 2011; Cisco, 2011

2

Como desenvolver um site mobile?
• Os usuários esperam que a sua experiência mobile seja tão boa
como a do PC.

• 60% dos usuários esperam que o site carregue em 3 segundos
ou menos.

• 71% dos usuários esperam que o site mobile carregue tão
rápido quanto o do PC.

• 78% vai voltar ao site duas vezes ou menos se este não carregar
inicialmente.

Fontes: Compuware, "What Users Want from Mobile," 2011

3

O jQuery Mobile
• Um sistema de interface unificada, baseada
em HTML5. Para usuários de todas as
plataformas populares de dispositivos móveis,
construído sobre as sólidas fundações jQuery
e jQuery UI. Tem um design flexível,
facilmente personalizável.

• “Escrever menos, fazer mais“
4

Principais características
• Construído no núcleo jQuery com uma sintaxe familiar e consistente, fácil aprendizagem e
aproveita códigos e padrões do jQuery UI.

• Compatível com todos as plataformas

• Tamanho leve

• Baseado em HTML5 e CSS3

• Poderoso Ajax-powered sistema de navegação para permitir transições de página animadas.

• Acessibilidade, recursos como WAI-ARIA também são incluídos para assegurar que as páginas
funcionam para leitores de tela (por exemplo, o VoiceOver no iOS) e outras tecnologias
assistidas.

5

Principais plataformas compatíveis

6

Patrocinadores do projeto

7

Instalando o jQuery Mobile
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>

[Bloco de códigos html JQM]

</body>
</html>

8

Páginas – Anatomia de uma página
• <meta name="viewport" content="width=device-width, initial-scale=1">

• especifica como o navegador deve exibir o nível de zoom da página e suas
dimensões. Se isso não for definido, muitos navegadores móveis irão
utilizar uma largura de página em torno de 900px. Ao definir os atributos
de viewport para content="width=device-width, initial-scale=1" , a
largura será definida para a largura de pixels da tela do dispositivo.

• Essas configurações não desativam a capacidade do usuário para fazer
zoom das páginas, o que é bom do ponto de vista da acessibilidade.

9

Páginas – Estrutura Multi-page
• Um único documento HTML pode conter várias "páginas" que
são carregados em conjunto pelo empilhamento de várias divs
com um data-role="page“.

• Cada "página" bloco precisa de uma identificação única ( id =
“contato" ), que será usado para ligar internamente as
“páginas” ( href = "# contato" ).

10

<div data-role="page" id=“pagina1">
<p/> Ir para a página 2<p/> <a href="#pagina2"> Página 2 </a>
</div>

<div data-role="page" id=“pagina2">
<p/> Voltar a página 1/> <a href="#pagina1"> Página 1 </a>
</div>

*Desvantagem: O título da página é sempre o da primeira página.

11

• data-title = “Página 1“

• Colocando este atributo em cada div com o atributo data-
role="page" fará com que cada página tenha o seu título
específico.

• Ex: <div data-role="page" data-title=“Página 2” id="pagina2" >

12

Temas de páginas
• O atributo data-theme pode ser aplicado para os recipientes
cabeçalho, rodapé, conteúdo ou a div que compreende a página
toda, que possui o atributo data-role=“page”, para garantir que a cor
de fundo será aplicada à página completa. Quando isso é feito, todos
os widgets na página também irão herdar o tema especificado no
recipiente da página. No entanto, os cabeçalhos e rodapés serão
padrão para o tema "a". Se você quer ter uma página com, por
exemplo, apenas o tema "b" para todos os seus elementos, incluindo
o seu cabeçalho e rodapé, você terá que especificar data-
theme="b" para a div da página bem como para o cabeçalho e
rodapé.

13

Temas de páginas

Tema Padrão

Tema A

14

Temas de páginas

Tema B

Tema C

15

Temas de páginas

Tema D

Tema E

16

Botões
• Botões são atribuídos a links html. Podem ser apenas botões de links ou inputs de formulários.

• No conteúdo de uma página, você pode estilizar qualquer link âncora como um botão, adicionando
o atributo data-role="button“ .

• <a href="index.html" data-role="button">Link button</a>

• Elementos de formulários dos tipos input: reset, button, image, etc. serão convetidos
automaticamente em botões.
– Input type="button”
– Input type="submit“
– Input type="reset“
– Input type="image”

17

Botões - Ícones
• Um ícone pode ser adicionado a um botão adicionando o atributo data-icon na
âncora especificando o ícone a exibir. Por exemplo:
• <a href="index.html" data-role="button" data-icon="delete">Delete</a>

• Para alterar o posicionamento do ícones se adiciona o atributo data-iconpos
ao link, com os valores left, right, top ou bottom, para definir se o ícone ficará
acima, abaixo ou a direita. Por padrão o ícone fica a esquerda do título.

18

Botões em Linha
• Por padrão os botões no corpo do documento são determinados para
preencherem toda a largura da tela:

• No entanto, se você quiser um botão mais compacto, que seja tão grande
quanto o texto e ícone dentro, adicione o atributo data-inline="true" para o
botão:

• Se você tem vários botões e quer que eles fiquem lado a lado na mesma linha,
adicione o atributo data-inline="true" para cada botão.

19

Barras de Ferramentas
Barras de ferramentas padrão:
 Cabeçalho
 Rodapé

• As barras de ferramentas utilizam o posicionamento “inline” por padrão.

• O modo de posicionamento “fixed” faz com que as barras de ferramentas
fiquem sempre fixas nas suas posições na tela. Para adicionar este
comportamento à página, adicione o atributo data-position=“fixed”.

20

Barras de Ferramentas - Cabeçalho
• O cabeçalho é uma barra de ferramentas na parte superior da página, que
normalmente contém o texto do título da página e botões opcionais
posicionados à esquerda e/ou à direita do título para a navegação ou ações.

• O texto do título é normalmente um elemento H1 título, mas é possível usar
qualquer nível de título (H1-H6) para permitir a flexibilidade semântica.

<div data-role="header">
<h1>Page Title</h1>
</div>

21

Cabeçalho – Adicionando botões
<div data-role="header" data-position="inline">
<a href="index.html" data-icon="delete"> Cancelar </a>
<h1> Editar Contato </h1>
<a href="index.html" data-icon="check"> salvar </a>
</div>

22

Cabeçalho – Configurando botões
Mudando a cor dos botões:

<div data-role="header" data-position="inline">
<a href="index.html" data-icon="delete"> Cancelar </a>
<h1> Editar Contato </h1>
<a href="index.html" data-icon="check" data-theme="b"> salvar </a>
</div>

23

Cabeçalho – Posição dos botões
• A posição do botão também pode ser controlada pela adição de classes para as
âncoras do botão, em vez de confiar na ordem de origem. Isto é especialmente
útil se você quer apenas um botão no canto direito por exemplo. Para
especificar a posição do botão, adicione a classe de ui-btn-left ou ui-btn-
right à âncora.

<div data-role="header" data-position="inline“>
<h1>Page Title</h1>
<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>

24

Corpo
• Todo o conteúdo da página fica dentro da div com o atributo data-
role=“content“.

<div data-role=“content">
Conteúdo da página
</div>

25

Rodapé
• O rodapé tem a mesma estrutura básica do cabeçalho, só que usa o atributo
data-role com o valor de footer.

<div data-role="footer">
<h4>Footer content</h4>
</div>

26

Rodapé – Adicionando botões
• Para incluir o preenchimento na barra, de forma mais organizada, adicione a class = "ui-
bar" ao rodapé.

<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="delete"> Remover </a>
<a href="index.html" data-role="button" data-icon="plus"> Adicionar </a>
<a href="index.html" data-role="button" data-icon="arrow-u"> Up </a>
<a href="index.html" data-role="button" data-icon="arrow-d"> de Down </a>
</ div>

Isto cria uma barra de ferramentas com ícones organizados em fileira:

27

Rodapé – Adicionando botões
• Para agrupar um conjunto de botões, enrole os links em uma div com os atributos data-
role="controlgroup“ e data-type="horizontal".

• <div data-role="controlgroup" data-type="horizontal">

• Isto cria um conjunto agrupado de botões:

28

Navbar (Barras de Navegação)
• O jQuery Mobile tem um widget de barra de navegação básico que é útil para fornecer
até 5 botões com ícones opcionais, normalmente dentro de um cabeçalho ou rodapé.

• A barra de navegação é codificada como uma lista de links desordenados envoltos por
uma div que possui o atributo data-role="navbar". Para definir um dos links para o
estado ativo (selecionado), adicione a classe class="ui-btn-active" para o link. Neste
exemplo, temos uma barra de navegação de dois botões no rodapé com o item “One“
definido como ativo:

<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div>
29

Navbar (Barras de Navegação)
• Adicionando um terceiro item, automaticamente cada botão ocupará 1/3 da largura da janela do navegador:

• Adicionando um quarto, cada botão ocupe 1/4 da largura da janela do navegador:

• Se a barra de navegação possuir até 5 itens, eles se organizarão igualmente em uma única linha, como nos
exemplos anteriores. Se forem mais de cinco itens, a navbar vai quebrar em mais de uma linha:

30

Ícones em Navbars
• Ícones podem ser adicionados aos itens da navbar adicionando o atributo data-icon especificando um
determinado ícone ao link. Por padrão, os ícones são adicionados acima do texto ( data-iconpos="top" ).

• A posição do ícone é definida no recipiente navbar em, e não em links individuais. Por exemplo, para colocar os
ícones abaixo dos títulos, adicione o atributo data-iconpos=“bottom” ao recipiente navbar.

• A posição de ícone pode ser definido como data-iconpos=“left” :

• Ou a posição de ícone pode ser configurada para data-iconpos=“right” :

Todas essas instruções também se aplicam a botões de
links ou elemento de formulários, não a penas a navbars.
31

Navbars em Cabeçalhos e Rodapés
• Se você quiser adicionar uma barra de navegação no topo da página ou no rodapé, basta adicionar o recipiente
navbar dentro do bloco de cabeçalho ou rodapé.

<div data-role=“header">
<div data-role="navbar">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div>

32

Conteúdo Dobrável
• Para criar um bloco de conteúdo dobrável, adicione o atributo data-role="collapsible" a uma div. O atributo
data-content-theme permite que você defina um tema para o conteúdo desta div.

• Dentro desta div, adicione um elemento de cabeçalho (H1-H6), este elemento será exibido com um botão
clicável e possuirá um ícone "+" a esquerda para indicar que é expansível.

• Após o cabeçalho, adicionar qualquer marcação HTML que você quer que seja desmontável. O quadro vai
quebrar essa marcação em um recipiente que será escondido/mostrado quando o título é clicado.

<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Header swatch A</h3>
<p>I'm the collapsible content with a themed content block set to "A".</p>
</div>

33

Conteúdos Dobráveis(Acordeões)
• Conjuntos de conteúdos dobráveis começam com a mesma marcação exata dos collapsibles individuais . Ao
adicionar uma div pai com o atributo data-role="collapsible-set" em torno de várias collapsibles, todas passarão
a ser visualmente agrupadas e se comportarão como um acordeão, onde apenas uma seção pode ser aberta de
cada vez.

<div data-role="collapsible-set“ data-theme="c" data-content-theme="d">
<div data-role="collapsible”>
<h3>Section 1</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
</div>

34

Listas
• É exibida como uma simples lista ordenada contendo itens ligados com o atributo data-role="listview".O jQuery
Mobile irá aplicar todos os estilos necessários para transformar a lista em uma exibição de lista móvel amigável
com indicador de seta para a direita e que preenche toda a largura da janela do navegador. Veja todos os
atributos de lista disponíveis na documentação do jQuery Mobile.

<ul data-role="listview" data-theme="g">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>

35

Links – Links com Ajax(padrão)
• Para permitir transições de página animados, todos os links que apontam
para uma página externa (ex. products.html) será carregado via Ajax.

• Se a solicitação Ajax é bem sucedido, o conteúdo da nova página é
adicionado ao DOM(modelo de objeto de documento), todos os widgets
móveis são auto-inicializado, então a nova página é colocada em exibição
com uma transição de página.

• Se o pedido Ajax falhar, o quadro irá visualizar uma mensagem de erro
pequena, que desaparece após um breve período
de tempo para que isso não quebre o fluxo de
navegação.

36

Links – Links com Ajax(padrão)
• *Obs.: Não se pode ligar links a páginas de estrutura Multi-page
utilizando Ajax, porque ao abrir um documento desse tipo só a primeira
página é carregada com o recurso, e não o conjunto completo de páginas
internas. Nestes casos, você deve ligar sem Ajax, para uma atualização de
página inteira para evitar possíveis erros.

• Alguns navegadores apresentam incompatibilidade ao utilizar o Ajax.

37

Links – Sem Ajax
• Links que apontam para outros domínios ou que têm
rel = "external", data-ajax = "false" ou target não serão
carregados com o Ajax. Em vez disso, estes links causam uma
atualização de página inteira, sem transição animada.

• Ambos os atributos ( rel = "external" e data-ajax = "false" )
têm o mesmo efeito, mas um significado semântico
diferente: rel = "external" deve ser usado quando o link
aponta para outro site ou domínio, enquanto data-ajax =
"false" é útil para apontar uma página dentro do seu próprio
domínio sem ser carregado via Ajax.

38

Links – Sem Ajax
• Ex: <a href=“www.ifsertao-pe.edu.br" rel="external"> ou
<a href="contato.html“ data-ajax=“false”>

*Obs.: Ao construir uma aplicação jQuery Mobile, onde o
sistema de navegação global Ajax está desativado ou
frequentemente desativado em links individuais, recomenda-
se desabilitar a a função nas configurações padrões do jQuery
mobile, para evitar o comportamento de navegação
inconsistente em alguns navegadores.

39

Links – Botão voltar
• Se você usar o atributo data-rel = “back" em uma âncora,
cliques sobre essa âncora vão imitar o botão voltar, voltando
uma entrada do histórico, ignorando o href da âncora padrão.

• Certifique-se de ainda fornecer um valor significativo que
realmente aponta para a URL da página de referência para que
o recurso funcione para que não haja incompatibilidade com
nenhum navegador.

40

Transição de páginas
• O jQuery Mobile inclui um conjunto de seis efeitos baseados
em CSS de transição que podem ser aplicadas a qualquer link
da página ou envio de formulário com navegação Ajax :

Slide Obs.: A transição flip não é processadoa
corretamente na maioria das versões do
Slideup Android. Recomenda-se usar esta transição
com moderação.
Slidedown
Pop
Fade
Flip

41

Transição de páginas
• Por padrão, se aplica a transição slide da direita para a
esquerda.Para definir um efeito de transição personalizada,
adicione o atributo data-transition para o link.

• <a href="index.html" data-transition="pop"> pop</a>

• Quando o botão Voltar for pressionado, o quadro aplicará
automaticamente a versão inversa da transição que foi usada
para mostrar a página. Para especificar que a versão inversa de
uma transição deve ser usada, adicione o atributo data-
direction="reverse” para um link.

42

Diálogos
• Qualquer página pode ser apresentada como um diálogo
modal, adicionando o atributo data-rel="dialog" para o link da
página. Quando o atributo de "diálogo" é aplicado, a estrutura
adiciona estilos para adicionar cantos arredondados, margens
em torno da página e um fundo escuro para fazer o "diálogo"
parecer ser suspensa, acima da página.

• <a href=“contato.html" data-rel="dialog“>Abrir contato</a>

43

Diálogos - Transições
• Por padrão, a caixa de diálogo será aberta com uma transição
'pop'. Como todas as páginas, você pode especificar qualquer
transição de página que você quer na caixa de diálogo,
adicionando o atributo data-transition para o link.

• <a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

44

Diálogos - Temas
• Diálogos podem ser decorados com temas diferentes, como
qualquer página, adicionando o atributo data-theme para o
cabeçalho, conteúdo, ou rodapé.

45

Formulários
• Todos os formulários devem ser envoltos por uma tag form
que tem uma ação e método que irá lidar com a forma de
processamento dos dados no servidor.

• <form action="form.php" method="post"> ... </Form>

Entradas de texto
<input type="text" name="nome" id="basic" value="" />

Podem ser do tipo text, password, etc. De acordo com os tipos do
HTML 5

46

Formulários
Textarea
<textarea name="textarea" id="textarea-a"> .......</ Textarea>

Barra de Pesquisa
<input type="search" name="search" id="searc-basic" value=""/>

Slide
<input type="range" name="slider" id="slider-0" value="25" min="0"
max="100" step="5"/>

47

Formulários
Interruptor
<select name="slider" id="flip-a" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>

Radio vertical
<fieldset data-role="controlgroup">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1"> Cat </ label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-
2"> Dog </ label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-
3"> Hamster </ label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" /></fieldset>

48

Formulários

Radio horizontal
Basta colocar o <fieldset data-role="controlgroup" data-type="horizontal" >

• <div data-role="fieldcontain"> - Organiza os elementos do formulário de
forma mais compacta.
49

Formulários
Checkboxes
<input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom"/>
<label for="checkbox-0">I agree</label>

Menus de Seleção
<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>

50

Referências
• jQuery Mobile Documentation – Disponível em: http://jquerymobile.com/. Acesso em 12 Out
de 2012.

• Porquê desenvolver um site mobile? – Disponível em:
http://www.gestordeconteudos.com/Mobile/Porqu%C3%AAdesenvolverumsitemobile/tabid/4
109/Default.aspx . Acesso em 10 out de 2012.

• Falando de jQuery Mobile – Disponível em:
http://imasters.com.br/artigo/19767/jquery/falando-de-jquery-mobile Acesso em 12 Out de
2012.

51

Obrigado pela atenção!
Contato:

• Heraldo Gonçalves
– Heraldo.info@gmail.com
– Facebook.com/heraldo.info

• Eudis Teixeira
– Eudisnet@gmail.com

52

jQuery mobile

Mais conteúdo relacionado

Destaque (20)

Semelhante a jQuery mobile (20)

Mais de Heraldo Gonçalves Lima Junior (7)

Último (13)

jQuery mobile