Apresentação do Framework Jquery Mobile

1. Felipe Castro
Rafael Reis
Tamara Mendes

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

3.  Jquery
 Código Leve
 URL - Ajax
 Terceira Abordagem Adaptação de Conteúdo
 HTML 5

4.  Compatibilidade navegadores

5. A- Alta Qualidade
B – Média Qualidade
C – Baixa Qualidade

8. Componentes

9. HEAD
<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>
BODY
<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>

11. Tipos:
 Header: Geralmente primeiro elemento da
página
 Footer: Geralmente último elemento da
página
 Ideal para colocar barras de navegação

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

13.  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>

14.  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>

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

16.  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>

17.  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>

18.  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" />

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

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

27. Themeroller
http://jquerymobile.com/themeroller/