aplicações móveis com j query mobile
Post on 28-Nov-2014
2.238 Views
Preview:
DESCRIPTION
TRANSCRIPT
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áficas 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
O que é JQuery Mobile? Introdução Estrutura Interface Navegação Aplicativo
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>
Introdução Estrutura Interface Navegação Aplicativo
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áficas para a web. Não é uma alternativa para o JQuery!
JQuery vs JQuery Mobile Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
O que é JQuery Mobile? Introdução Estrutura Interface Navegação Aplicativo
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
O que é JQuery Mobile? Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Exemplos Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Interface Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Interface
Dialog Popup
Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Interface
Table reflow Table column-toggle
Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Interface
NavBar
Accordion
Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Interface
Grid
Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Plataformas suportadas
Suporte Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Sponsors Introdução Estrutura Interface Navegação Aplicativo
AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile
Codificando…
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 Introdução Estrutura Interface Navegação Aplicativo
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
Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<body><a data-role="button" data-theme=”c">Botão</a>
</body>
Botão
Resultado:
Introdução Estrutura Interface Navegação Aplicativo
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 Introdução Estrutura Interface Navegação Aplicativo
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
Introdução Estrutura Interface Navegação Aplicativo
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
Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Transições: data-transition
fade pop flip turn flow slidefade slide slideup slidedown none
Introdução Estrutura Interface Navegação Aplicativo
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
Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
data-theme e data-iconpos
data-theme=“a”data-iconpos=“top”
Introdução Estrutura Interface Navegação Aplicativo
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 Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Marcação básica Introdução Estrutura Interface Navegação Aplicativo
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"> <p>Um botão logo abaixo</p> <a data-role="button">Botão</a></div><div data-role="footer" data-theme="b"> <h1>Rodapé</h1></div>
</div>
Página com botão Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Página com botão Introdução Estrutura Interface Navegação Aplicativo
AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile
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 Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Dialog Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<!– dialog.html --><!-- Dispara o dialog --><a href="dialog-content.html" data-role="button" data-rel="dialog" data-transition="fade">
Dialog</a>
Dialog Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<!– dialog-content.html --><!-- Dispara o dialog --><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 Introdução Estrutura Interface Navegação Aplicativo
AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile
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 Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Popup Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<!-- Dispara o popup --><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> <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>
</div></div>
Popup Introdução Estrutura Interface Navegação Aplicativo
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 Introdução Estrutura Interface Navegação Aplicativo
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 Introdução Estrutura Interface Navegação Aplicativo
AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile
Tabelas
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Tabelas
Table reflow Table column-toggle
Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
data-mode=“reflow” 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 Introdução Estrutura Interface Navegação Aplicativo
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>
data-mode=“reflow” Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
data-mode=“reflow” Introdução Estrutura Interface Navegação Aplicativo
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>
data-mode=“columntoggle” Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
data-mode=“columntoggle” Introdução Estrutura Interface Navegação Aplicativo
AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile
Accordion
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Accordion Introdução Estrutura Interface Navegação Aplicativo
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 Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Accordion Introdução Estrutura Interface Navegação Aplicativo
AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile
Grid
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Permite construir layout baseados em colunas responsivas.
Grid Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<!-- Coluna 50/50% --><div class="ui-grid-a">
<div class="ui-block-a"> <a data-role="button”>Botão</a></div><div class="ui-block-b"> <a data-role="button”>Botão</a></div>
</div>
Grid Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<!-- Coluna 33/33/33% --><div class="ui-grid-b">
<div class="ui-block-a"> <a data-role="button”>Botão</a></div><div class="ui-block-b"> <a data-role="button”>Botão</a></div><div class="ui-block-c"> <a data-role="button”>Botão</a></div>
</div>
Grid Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<!-- Coluna 50/50% --><div class="ui-grid-a ui-responsive">
<div class="ui-block-a"> <a data-role="button”>Botão</a></div><div class="ui-block-b"> <a data-role="button”>Botão</a></div>
</div>
Grid responsive Introdução Estrutura Interface Navegação Aplicativo
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 Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Nosso próprio breakpoint
Adicionando a classe my-breakpoint no container dos elementos
<!-- Coluna 50/50% --><div class="ui-grid-a my-breakpoint">
<div class="ui-block-a"> <a data-role="button”>Botão</a></div><div class="ui-block-b"> <a data-role="button”>Botão</a></div>
</div>
Introdução Estrutura Interface Navegação Aplicativo
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;}
}
Introdução Estrutura Interface Navegação Aplicativo
AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile
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 Introdução Estrutura Interface Navegação Aplicativo
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
Introdução Estrutura Interface Navegação Aplicativo
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 é finalizada 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
Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<script>$(".box").on("swipe",function(e){
console.log("arrastou!"); $(this).addClass("green"); });
</script>
Swipe Introdução Estrutura Interface Navegação Aplicativo
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 Introdução Estrutura Interface Navegação Aplicativo
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 Introdução Estrutura Interface Navegação Aplicativo
AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile
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 Introdução Estrutura Interface Navegação Aplicativo
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 Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<div data-role="page" id="page1"> <div data-role="header" data-theme="b"> <h1>Página 1</h1> </div> <div data-role="content" data-theme="c"> <a data-role="button" href="#page2">página 2</a> </div> <div data-role="footer" data-theme="b"> <h1>Rodapé</h1> </div></div><div data-role="page" id="page2"> <div data-role="header" data-theme="b"> <h1>Página 2</h1> </div> <div data-role="content" data-theme="c"> <a data-role="button" href="#page1">página 1</a> </div> <div data-role="footer" data-theme="b"> <h1>Rodapé</h1> </div></div>
Multi-páginas Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<!-- Página 1 --><div data-role="page" id="page1">
<div data-role="header" data-theme="b"> <h1>Página 1</h1></div><div data-role="content" data-theme="c"> <a data-role="button" href=“page2.html">página 2</a></div><div data-role="footer" data-theme="b"> <h1>Rodapé</h1></div>
</div>
Páginas separadas – Página 1 Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<!-- Página 2 --><div data-role="page" id="page2">
<div data-role="header" data-theme="b"> <h1>Página 2</h1></div><div data-role="content" data-theme="c"> <a data-role="button" href=“page1.html">página 1</a></div><div data-role="footer" data-theme="b"> <h1>Rodapé</h1></div>
</div>
Páginas separadas – Página 2 Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<!-- Barra de navegação --><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 Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Barra de navegação Introdução Estrutura Interface Navegação Aplicativo
AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile
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 Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Aplicação: Agenda Introdução Estrutura Interface Navegação Aplicativo
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
Introdução Estrutura Interface Navegação Aplicativo
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
Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Resultado
Login Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<!-- Cabeçalho --><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><!-- Barra de navegação --><div data-role="navbar" data-theme="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 Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<!-- Conteúdo --><div data-role="content" data-theme="c" id="contactContent">
<ul data-role="listview" id="contactList"> <!-- <li> <a> <h1>titulo</h1> <p>Broken Bells</p> </a> </li> --></ul>
</div>
Contatos Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<!– Footer --><div data-role="footer" data-theme="b"><div data-role="navbar" data-theme="a"><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 Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Resultado
Contatos Introdução Estrutura Interface Navegação Aplicativo
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 Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Resultado
Novo Contato Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
<div data-role="content" data-theme="c"><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 Introdução Estrutura Interface Navegação Aplicativo
Aplicações Móveis com JQuery Mobile -‐ Rondinelli Mesquita
Resultado
Novo Contato Introdução Estrutura Interface Navegação Aplicativo
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
top related