JQuery MobileFelipe Castro

Rafael ReisTamara Mendes

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

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

Conteúdo HTML 5

Compatibilidade navegadores

Um código.Várias Plataformas!

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

Desktop

Melhorias progressivas

Componentes

<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

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

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>

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>

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>

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

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

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

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

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>

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

E mais…

Temas

Não sabe?

http://jquerymobile.com/themeroller/

Themeroller

Transições Ajax

Menos é mais

Perguntas?