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