Jquery Mobile

30
JQuery Mobile Felipe Castro Rafael Reis Tamara Mendes

description

Apresentação do Framework Jquery Mobile

Transcript of Jquery Mobile

Page 1: Jquery Mobile

JQuery MobileFelipe Castro

Rafael ReisTamara Mendes

Page 2: Jquery Mobile

Framework específico para Mobile Simplificação Evento de toque Otimização

Page 3: Jquery Mobile

Jquery Código Leve URL - Ajax Terceira Abordagem Adaptação de

Conteúdo HTML 5

Page 4: Jquery Mobile

Compatibilidade navegadores

Um código.Várias Plataformas!

Page 5: Jquery Mobile

A- Alta QualidadeB – Média QualidadeC – Baixa Qualidade

Page 6: Jquery Mobile

Desktop

Page 7: Jquery Mobile

Melhorias progressivas

Page 8: Jquery Mobile

Componentes

Page 9: Jquery Mobile

<div data-role="header"><h1>Cabeçalho</h1></div><div data-role="content"><p>Hello World!</p></div><div data-role="footer"><h1>Rodapé</h1></div>

Exemplo

<title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1“ /> <link rel="stylesheet" href=“ jquery.mobile-1.1.0.min.css" /><script src="jquery-1.7.1.min.js"></script><script src="jquery.mobile-1.1.0.min.js"></script>

HEAD

BODY

Page 10: Jquery Mobile
Page 11: Jquery Mobile

Barras de Ferramentas

Tipos: Header: Geralmente primeiro elemento da

página Footer: Geralmente último elemento da

página

Ideal para colocar barras de navegação

Page 12: Jquery Mobile

Exemplo<div data-role="footer">

<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></div>

Page 13: Jquery Mobile

Botões Posicionados lado a lado<div data-inline="true"> <a href="index.html" data-role="button">Cancel</a> <a href="index.html" data-role="button" data-theme="b">Save</a></div>

Page 14: Jquery Mobile

Botões Agrupando<div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a></div>

Page 15: Jquery Mobile

<a href="index.html" data-role="button" data-icon="refresh">My button</a>

<a href="index.html" data-role="button" data-icon="search">My button</a>

<a href="index.html" data-role="button" data-icon="check">My button</a>

<a href="index.html" data-role="button" data-icon="delete" data-iconpos=“notext">Delete</a>

Page 16: Jquery Mobile

HTML Layout grids: apesar de não ser usualmente

comum colocar elementos lado a lado, às vezes é necessário

<fieldset class="ui-grid-a"> <div class="ui-block-a"> <button type="submit" data-theme="c">Cancel</button> </div> <div class="ui-block-b"> <button type="submit" data-theme="b">Submit</button> </div> </fieldset>

Formatadores de conteúdo

Page 17: Jquery Mobile

Collapsible Content Markup: Ideal para esconder conteúdos e exibi-los dinamicamente

<div data-role="collapsible"> <h3>I'm a header</h3> <p>I'm the collapsible content. By default I'm open and

displayed on the page, but you can click the header to hide me.</p>

</div>

Formatadores de conteúdo

Page 18: Jquery Mobile

Baseados em padrões HTML Elementos mais comuns:

◦ Text inputs◦ Search inputs◦ Slider◦ Flip switch◦ Radio◦ Checkbox ◦ Select menus

Mini Form Elements<input type="text" name="name" id="basic" data-mini="true" />

Elementos de Formulários

Page 19: Jquery Mobile
Page 20: Jquery Mobile

Listas de visualização

<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>

Page 21: Jquery Mobile
Page 22: Jquery Mobile
Page 23: Jquery Mobile
Page 24: Jquery Mobile
Page 25: Jquery Mobile

Temas Customização de Temas Transições animadas - Ajax

E mais…

Page 26: Jquery Mobile

Temas

Page 27: Jquery Mobile

Não sabe?

http://jquerymobile.com/themeroller/

Themeroller

Page 29: Jquery Mobile

Menos é mais

Page 30: Jquery Mobile

Perguntas?