Jquery Mobile
Upcoming SlideShare
Loading in...5
×
 

Jquery Mobile

on

  • 589 views

Apresentação do Framework Jquery Mobile

Apresentação do Framework Jquery Mobile

Statistics

Views

Total Views
589
Views on SlideShare
589
Embed Views
0

Actions

Likes
0
Downloads
17
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jquery Mobile Jquery Mobile Presentation Transcript

  • Felipe 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
  • A- Alta QualidadeB – Média QualidadeC – Baixa Qualidade
  • Componentes
  • 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>
  • Tipos: Header: Geralmente primeiro elemento da página Footer: Geralmente último elemento da página Ideal para colocar barras de navegação
  • <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>
  •  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>
  •  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>
  •  Collapsible Content Markup: Ideal para esconder conteúdos e exibi-los dinamicamente<div data-role="collapsible"> <h3>Im a header</h3> <p>Im the collapsible content. By default Im open and displayed on the page, but you can click the header to hide me.</p></div>
  •  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" />
  • <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
  • Themeroller http://jquerymobile.com/themeroller/