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
Formatação de Conteúdo
ESTILIZAÇÃO BÁSICA
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
Formatação de Conteúdo
TEXTOS TRUNCADOS
ESTILIZAÇÃO BÁSICA
• Comportamento padrão:
ESTILIZAÇÃO BÁSICA
• Sobrescrever regras de
estilo do framework;
<link rel="stylesheet" href="jquery.mobile1.0.min.css"/>
<style>
.ui-header .ui-title,
.ui-footer .ui-title {
white-space: normal !important;
}
</style>
Formatação de Conteúdo
MOSTRAS E ESCONDER 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>
...
Formatação de Conteúdo
EFEITO ACORDEÃO
EFEITO ACORDEÃO
• data-role collapsible-set com vários data-role
collapsible;
• Todos os recursos vistos
anteriormente podem ser
aplicados;
• 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>
...