jquerymobile html5, javascript e css5 para multiplataforma
TRANSCRIPT
JQueryMobile
HTML5, JavaScript e CSS5 para multiplataforma
Agenda
• Formatação de Conteúdo– Estilização Básica;– Textos Truncados;– Mostras e Esconder conteúdo;– Efeito Acordeão
ESTILIZAÇÃO BÁSICAFormatação de Conteúdo
ESTILIZAÇÃO BÁSICA
• Por padrão, respeita a formatação e renderização padrão do browser;
• Alguns exemplos;
ESTILIZAÇÃO BÁSICA
<div data-role="content"> <h1>Cabeçalho H1</h1> <h2>Cabeçalho H2</h2> <h3>Cabeçalho H3</h3> <h4>Cabeçalho H4</h4> <h5>Cabeçalho H5</h5> <h6>Cabeçalho H6</h6></div>
ESTILIZAÇÃO BÁSICA
ESTILIZAÇÃO BÁSICA<div data-role="content"> <p>Primeiro Parágrafo</p> <p>Segunda Parágrafo</p> <p>Terceiro Parágrafo com elemento <strong>negrito</strong></p> e <em>ênfase</em> no <a href="#">link.</a> <blockquote><p>Exemplo de uso da tag <code>code</code></p></blockquote> <ul> <li>Abacaxi</li> <li>Abacate</li> <li>Amora</li> <li>Melancia</li> <li>Maça</li> <li>Pera</li> </ul></div>
ESTILIZAÇÃO BÁSICA
ESTILIZAÇÃO BÁSICA<div data-role="content"> <ol> <li>Grêmio</li> <li>Inter</li> <li>Juventude</li> <li>Aimoré</li> <li>Sport de David Canabarro</li> </ol> <dl> <dt>JQueryMobile</dt> <dd>Multiplataform...</dd> <dt>UPF</dt> <dd>Universidade de Passo Fundo</dd> </dl></div>
ESTILIZAÇÃO BÁSICA
ESTILIZAÇÃO BÁSICA<table border="1"> <caption>Venda de Carros</caption> <thead> <tr> <td>Corcel</td><td>Fusca</td><td>Gol</td> </tr> </thead> <tbody> <tr> ... </tr> </tbody> <tfoot> <tr> ... </tr> </tfoot></table>
ESTILIZAÇÃO BÁSICA
TEXTOS TRUNCADOSFormatação de Conteúdo
ESTILIZAÇÃO BÁSICA
• Comportamento padrão:
ESTILIZAÇÃO BÁSICA
• Sobrescrever regras de estilo do framework;
<link rel="stylesheet" href="jquery.mobile-1.0.min.css"/><style> .ui-header .ui-title, .ui-footer .ui-title { white-space: normal !important; }</style>
MOSTRAS E ESCONDER CONTEÚDOFormatação de Conteúdo
MOSTRAR E ESCONDER• Data-role: collapsible;• Primeiro <h?> será o
cabeçalho;• Podem existir inúmeras
outras tags <h?>;• Inicialmente fechado. Possível
mudar com propriedade:• data-collapsible=false
ESTILIZAÇÃO BÁSICA
<div data-role="content"> <div data-role="collapsible"> <h1>Meses do Ano</h1> <h2>Na linguagem portuguesa temos</h2> <ul> <li>Janeiro</li> ... </ul> </div></div>
MOSTRAR E ESCONDER
• Temas customizáveis através das propriedades:• data-theme;• data-content-theme;• O primeiro estiliza o botão de ocultar/mostrar,
já o segundo a área de conteúdo;
MOSTRAR E ESCONDER
...<div data-role="content"> <div data-role="collapsible" data-theme="b" data-content-theme="e"> <h1>Meses do Ano</h1>...
EFEITO ACORDEÃOFormatação de Conteúdo
EFEITO ACORDEÃO
• data-role collapsible-set com vários data-role collapsible;
• Todos os recursos vistosanteriormente podem seraplicados;
• Fechamento automático
ESTILIZAÇÃO BÁSICA...<div data-role="collapsible-set"> <div data-role="collapsible" ...> <h1>Rio Grande do Sul</h1> <ul> <li>...</li> </ul> </div> <div data-role="collapsible”> <h1>Santa Catarina</h1> <ul> <li>...</li> </ul> </div>...