Aplicações móveis com j query mobile

AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile

Rondinelli Mesquita
rondinellimesquitas@gmail.com
Aplicações Móveis com

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

É um framework para construção de interfaces
gráﬁcas baseado em HTML5 e CSS3, otimizado
para dispositivos touch como tablets e
smartphones. Possui “layout responsive” capaz
de se adaptar aos diversos tamanhos de tela.
O que é JQuery Mobile?
Introdução Estrutura Interface Navegação Aplicativo

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita


Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

JQuery
<script>
// com javascript
var box1 = document.getElementById("box1");
box1.style.border = "1px solid blue";

//com jquery
var box2 = $("#box2");
box2.css("border","1px solid blue");

//ou
$box2 = $("#box2");
$box2.css("border","1px solid blue");

//ou ainda
$("#box2”).css("border","1px solid blue");
</script>

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

JQuery
É um framework baseado em javascript que
torna mais fácil escrever código javascript.
JQuery Mobile
É um framework também baseado em javascript
que usa o JQuery, porém é voltado para
construção de interfaces gráﬁcas para a web.
Não é uma alternativa para o JQuery!
JQuery vs JQuery Mobile

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Características
•  Write less, do more
•  Cross-platform
•  Flexível
•  Baseado em temas
•  Simples
•  Plugins
•  Orientado à marcação

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Exemplos

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Interface

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Interface
Dialog
Popup

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Interface
Table reflow Table column-toggle

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Interface
NavBar
Accordion

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Interface
Grid

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Plataformas suportadas
Suporte

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Sponsors


Codiﬁcando…

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

•  Montar a estrutura do projeto
o  Linkar os arquivos css
o  Linkar os arquivos js
Vamos ao que interessa

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<!– Folhas de Estilo-->
<link rel="stylesheet" href=”jquery.mobile.structure-1.3.1.css"/>
<link rel="stylesheet" href=“jquery.mobile.theme-1.3.1.css"/>

<!– Biblioteca JQuery -->
<script src=“jquery-1.9.1.min.js"></script>

<!– Script -->
<script src=“jquery.mobile-1.3.1.js"></script>
Montando a Estrutura do Projeto

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<body>
<a data-role="button" data-theme=”c">Botão</a>
</body>

Botão
Resultado:

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

•  Elementos são declarados usando tags com
atributos data-role
•  Cada arquivo deve conter pelo menos um
data-role=“page”
•  Atributo data-* para adicionar
comportamentos ao elemento (onde * é o
tipo do comportamento)
Elementos

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Alguns atributos
data-role Declaração de elemento
data-theme Define o tema do elemento
data-icon Define o ícone para o elemento
data-inline Define se o elemento será block ou inline
data-iconpos Define a posição do ícone em relação ao texto
data-ajax Ativa ou desativa as requisições ajax
data-corners Ativa bordas arrendondadas do elemento
data-shadow Ativa as sombras do elemento
data-rel Define o relacionamento do elemento atual para
outro elemento
data-transition Define a transição do elemento atual para outro
elemento

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Alguns atributos
data-dismissible Popups: faz com que o mesmo não
possa ser fechado
data-overlay-theme Dialog: define o tema de background
data-column-btn-text Tabela: define texto do botão para
escolha das colunas a serem exibidas
data-column-btn-theme Tabela: define o tema do botão para
escolha das colunas a serem exibidas
data-column-popup-theme Tabela: define o tema do popup para
escolha de colunas a serem exibidas
data-priority th de tabela: define a prioridade da
coluna caso a janela seja
redimensionada
data-content-theme Accordion e Collapsible: defiine o tema
do contéudo

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Transições: data-transition
fade
pop
ﬂip
turn
ﬂow
slidefade
slide
slideup
slidedown
none

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Ícones: data-icon
plus forward
minus back
delete grid
arrow-l star
arrow-r alert
arrow-u info
arrow-d home
check search
gear bars
refresh edit

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

data-theme e data-iconpos
data-theme=“a”

data-iconpos=“top”

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<!– Página Padrão do Jquery Mobile-->

<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Cabeçalho</h1>
</div>
<div data-role="content" data-theme="c">
<!– Conteúdo -->
</div>
<div data-role="footer" data-theme="b">
<h1>Rodapé</h1>
</div>
</div>
Marcação básica

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Marcação básica

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<!– Página Padrão do Jquery Mobile-->

<div data-role="page">
<h1>Cabeçalho</h1>
</div>
<p>Um botão logo abaixo</p>
<a data-role="button">Botão</a>
</div>
<h1>Rodapé</h1>
</div>
</div>
Página com botão

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Página com botão


Dialog

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Como funciona
•  Um botão dispara uma chamada para uma
página
•  O framework constrói a página html dentro
do Dialog
Dialog

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Dialog

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<!– dialog.html -->

<a href="dialog-content.html" data-role="button"
data-rel="dialog" data-transition="fade">
Dialog
</a>
Dialog

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<!– dialog-content.html -->


<p>Deseja excluir o registro? </p>
<a data-role="button" data-inline="true" data-theme="b">Sim</a>
<a data-role="button" data-inline="true" data-rel="back">Não</a>
Dialog


Popup

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Como funciona
•  Um botão dispara uma chamada para o
popup
•  O framework simplesmente exibe o popup
que está oculto
Popup

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Popup

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita


<a href="#login" data-role="button" data-rel="popup" data-
transition="fade">Login</a>

<div id="login" data-role="popup" data-theme="a" data-dismissible="false">

<div style="padding: 10px 20px">
<h3>login</h3>
<form>
<inputtype="text"id="username"placeholder="nomedeusuário”/>
<input type="password" id="password" placeholder="senha”/>

<input type="submit" value="Login" data-theme="b"/>
</form>
</div>
</div>
Popup

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<a href="#tooltip" class="tip" data-role="button" data-icon="info"
data-theme="e" data-iconpos="notext"></a>

<div id="tooltip" data-role="popup" data-theme="e">
<p>Informação</p>
</div>
Controlando via javascript

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<script>
$(".tip").on("taphold",function(event){

event.preventDefault();
console.log("clicou e segurou!");

$("#tooltip").popup("open");

$("#tooltip").popup({
overlayTheme: "a",
shadow: true,
corners: false
});

});
</script>
Controlando via javascript


Tabelas

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Tabelas
Table reflow Table column-toggle

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

data-mode=“reﬂow”
A tabela passa a ser “responsive” se adaptando
a tela do dispositivo
data-mode=“columntoggle”
Permite selecionar as colunas que serão
exibidas na tabela ou priorizando algumas
colunas
Tabelas

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<table data-role="table" data-mode="reflow" class="ui-responsive
table-stripe" style="display: table !important">
<thead>
<tr>
<th>Código</th>
<th>Nome</th>
<th>Email</th>
<th>Telefone</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Peter</td>
<td>peter@email.com</td>
<td>99999999</td>
</tr>
</tbody>

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita


Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<table data-role="table" data-mode="columntoggle" class="ui-responsive
table-stroke” data-column-btn-text="colunas" data-column-btn-theme="b"
data-column-popup-theme="a" style="display: table !important">
<thead>
<tr>
<th data-priority="2">Código</th>
<th data-priority="1">Nome</th>
<th data-priority="1">Email</th>
<th data-priority="2">Telefone</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Peter</td>
<td>peter@email.com</td>
<td>99999999</td>
</tr>
</tbody>


Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita



Accordion

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Accordion

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<div data-role="collapsible-set" data-content-theme="d">
<div data-role="collapsible" data-theme="b">
<h1>Planetas</h1>
<ul data-role="listview">
<li><a>Terra</a></li>
<li>Marte</li>
<li>Saturno</li>
<li>Mercúrio</li>
</ul>
</div>
</div>
Accordion


Grid

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Permite construir layout baseados em colunas
responsivas.
Grid

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita


<div class="ui-grid-a">
<div class="ui-block-a">
<a data-role="button”>Botão</a>
</div>
<div class="ui-block-b">
</div>
</div>
Grid

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita


<div class="ui-grid-b">
</div>
</div>
<div class="ui-block-c">
</div>
</div>
Grid

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita


<div class="ui-grid-a ui-responsive">
</div>
</div>
</div>

Grid responsive

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

@media all and (max-width: 560px) {
.ui-block-a,
.ui-block-b,
.ui-block-c,
.ui-block-d,
.ui-block-e {
width: 100%;
float: none;
}
}
A mágica

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Nosso próprio breakpoint
Adicionando a classe my-breakpoint no
container dos elementos

<div class="ui-grid-a my-breakpoint">
</div>
</div>
</div>

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Nosso próprio breakpoint
Reescrevendo o CSS
@media all and (max-width: 560px) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float: none;
}

}


Eventos

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

É uma mensagem de software informando que
alguma coisa aconteceu.
•  Evento de mouse
•  Evento de teclado
Eventos

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Eventos
tap Evento de toque
tap-hold Evento “toca e segura”
swipe Evento de arraste sobre o elemento
pagecreate Ocorre quando uma página é criada
pageshow Ocorre quando uma página é exibida (depois da
animação ajax)
pagehide Ocorre quando uma página é ocultada (depois da
animação ajax)
pageinit Ocorre quando uma página é inicializada
(independente se o acesso foi direto ou via ajax)
pageload Ocorre quando a página é carregada e inserida no
DOM

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Eventos
pageloadfailed Ocorre quando há falha na requisição de uma
página
orientationchange Ocorre quando a orientação do dispositivo muda
scrollstart Ocorre quando a rolagem é iniciada
scrollstop Ocorre quando a rolagem é ﬁnalizada
vmousemove Simula o movimento do mouse
vmouseover Simula quando o cursor do mouse está sobre um
elemento
vmouseout Simula quando o cursor do mouse sai de um
elemento
vmousedown Simula quando o botão do mouse é clicado
vmouseup Simula quando o botão do mouse é solto
vclick Simula o click do botão

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<script>
$(".box").on("swipe",function(e){

console.log("arrastou!");
$(this).addClass("green");

});
</script>

Swipe

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<script>
$(window).on("scrollstart",function(e){

console.log("Inicio do scroll");
console.log($(document).offset().top);

});

$(window).on("scrollstop",function(e){

console.log("Fim do scroll");

});
</script>

Scroll

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<script>
$("#page1").on("pageload",function(){
console.log("Página 1 carregada");
});

$("#page1").on("pageshow",function(){
console.log("Página 1 exibida");
});

$(document).on("pageloadfailed",function(event, data){
console.log("Erro ao carragar a página");
});
</script>

Page


Navegação

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Como funciona
O JQuery Mobile utiliza Ajax para realizar as
requisições ao invés de HTTP
1.  Realiza a requisição a procura do conteúdo
2.  Insere o conteúdo na página mas deixa-o oculto
(display:none)
3.  Realiza a transição entre as páginas usando
animações
4.  Remove a página antiga
Navegação

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Ajax desativado
Ajax “escuta” todos os links exceto quando:
•  O elemento possui atributo data-ajax=”false”
•  O elemento possui atributo target
•  O elemento possui atributo data-rel=“external”
•  O elemento aponta para um domínio externo ao site
Navegação

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<div data-role="page" id="page1">
<h1>Página 1</h1>
</div>
<a data-role="button" href="#page2">página 2</a>
</div>
<h1>Rodapé</h1>
</div>
</div>

<h1>Página 2</h1>
</div>
<a data-role="button" href="#page1">página 1</a>
</div>
<h1>Rodapé</h1>
</div>
</div>
Multi-páginas

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita


<h1>Página 1</h1>
</div>
<a data-role="button" href=“page2.html">página 2</a>
</div>
<h1>Rodapé</h1>
</div>
</div>
Páginas separadas – Página 1

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita


<h1>Página 2</h1>
</div>
<a data-role="button" href=“page1.html">página 1</a>
</div>
<h1>Rodapé</h1>
</div>
</div>
Páginas separadas – Página 2

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita


<div data-role="navbar" data-theme="a">

<ul>
<li><a data-icon="home" data-theme="a">Contatos</a></li>
<li><a data-icon="grid" data-theme="a">Grupos</a></li>
<li><a data-icon="gear" data-theme="a">Configurações</a></li>
</ul>

</div>
Barra de navegação

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Barra de navegação


Aplicativo: Agenda

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Aplicação
•  Login
•  Tela de contatos
•  Tela de novo contato
Aquivos necessários
•  js e css do JQuery Mobile
•  Biblioteca JQuery
•  Script storageHTML5.js para armazenamento
local com html5
Aplicação: Agenda

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Aplicação: Agenda

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<form id="formLogin" data-ajax="false">

<div id="info"></div>

<input type="text" id="username" placeholder="nome de usuário”/>
<input type="password" id="password" placeholder="senha”/>

<input type="submit" value="Login" data-theme="b"/>

</form>
Login
html tela de login

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<script>
$("#formLogin").submit(function(){
var username = $("#username").val();
var password = $("#password").val();

if(username == "username" && password == "123"){
window.location = "contacts.html";
}else{
$("#info").text("Dados incorretos!");
}
return false;
});
</script>
Login
javascript tela de login

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Resultado
Login

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita


<div data-role="header" data-theme="a">
<a href="index.html" data-role="button" data-icon="home" data-iconpos="notext"
data-ajax="false"></a>
<h1>Agenda</h1>
<a href="login.html" data-role="button" data-icon="delete" data-
iconpos="notext" data-ajax="false"></a>

<ul>
<li><a href="contacts.html" data-icon="home" data-
theme="a" class="ui-btn-active" data-ajax="false">Contatos</a></li>

<li><a href="groups.html" data-icon="grid" data-theme="a"
data-ajax="false">Grupos</a></li>
<li><a href="settings.html" data-icon="gear" data-
theme="a" data-ajax="false">Configurações</a></li>
</ul>
</div>
</div>
Contatos

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita


<div data-role="content" data-theme="c" id="contactContent">
<ul data-role="listview" id="contactList">

</ul>
</div>
Contatos

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<!– Footer -->
<ul>
<li><a href="new-contact.html" data-icon="plus" data-
theme="a" class="ui-btn-active" data-ajax="false">Novo</a></li>
<li id="deleteAll"><a data-icon="delete" data-
theme="a">Apagar tudo</a></li>
</ul>
</div>
</div>
Contatos

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Resultado
Contatos

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<form id="newContactForm" data-ajax="false">
<input type="text" name="nome" id="nome”/>
<input type="text" name="nome" id="telefone”/>
<select name="grupo" id="grupo" data-native-menu="false”>
<option value="Amigos">Amigos</option>
<option value="Família">Família</option>
<option value="Trabalho">Trabalho</option>
<option value="Faculdade">Faculdade</option>
</select>
<button type="submit" data-theme="a">Salvar</button>
</form>
Novo Contato

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

Resultado
Novo Contato

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

<ul data-role="listview" id="groupList" data-inset="false">
<li>
<a class="labelGroup">Amigos</a>
<span class="ui-li-count">28</span>
</li>
</ul>
</div>
Grupos

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

JQuery e JQuery Mobile
•  http://jquery.com/
•  http://jquerymobile.com/
•  http://api.jquerymobile.com/
•  http://jquerymobile.com/themeroller/
•  http://dev.jtsage.com/jQM-DateBox/
Prototipagem
•  http://pencil.evolus.vn/
•  http://cacoo.com
Ferramentas CSS3
•  http://css3generator.com/
•  http://www.colorzilla.com/gradient-editor/
Links

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

bit.ly/sistemasdeinfo
rondymesquita
rondinellimesquitas@gmail.com
Finalizando…

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

DOYLE, Matt. Master mobile web apps with jquery mobile. 3. ed. New
South Walles: Elated Communications, 2012.
CAMDEN, Raymon; MATTHEWS, Andy. Jquery mobile web development
essentials. 1. ed. Birmingham: Packt Publishing, 2012.
THE JQUERY FOUNDATION. JQuery Mobile. Disponível em <http://
jquerymobile.com> . Acesso em 15 de abril de 2013.
THE JQUERY FOUNDATION. JQuery. Disponível em <http://jquery.com> .
Acesso em 15 de abril de 2013.
THE JQUERY FOUNDATION. Api JQuery Mobile. Disponível em <http://
api.jquerymobile.com/> . Acesso em 15 de abril de 2013
Referências

Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita

IBM. Introdução ao jquery mobile. Disponível em <http://www.ibm.com/
developerworks/br/library/wa-jquerymobileupdate/> . Acesso em 15 de
abril de 2013.
TAVARES, Alan. Estrutura de navegação de jquery mobile. Disponível em
<http://alantavares.com.br/estrutura-navegacao-jquery-mobile/>. Acesso
em 15 de abril de 2013
DEVGROW. Mobile web development part 2: creating a simple app
using jquery mobile. Disponível em <http://devgrow.com/mobile-web-
dev-using-jquery-mobile/> Acesso em 14 de maio de 2013.
Referências

Aplicações móveis com j query mobile

Recommandé

Recommandé

Contenu connexe

Similaire à Aplicações móveis com j query mobile

Similaire à Aplicações móveis com j query mobile (20)

Aplicações móveis com j query mobile