Tema do jQuery Mobile

Tema do jQuery Mobile

O jQuery Mobile oferece cinco diferentes temas de estilo, de "a" a "e" - cada tema possui botões, barras, blocos de conteúdo e outros com cores diferentes. Um tema do jQuery Mobile é composto por vários efeitos visuais e cores.

Para personalizar a aparência do aplicativo, use a propriedade data-theme e atribua uma letra a essa propriedade:}}

<div data-role="page" data-theme="a|b|c|d|e">
Valor Descrição Exemplo
a Padrão. Texto branco sobre fundo preto. Teste
b Texto branco sobre fundo azul / texto preto sobre fundo cinza Teste
c Texto preto sobre fundo cinza claro Teste
d Texto preto sobre fundo branco Teste
e Texto preto sobre fundo laranja Teste

Dica:Misture seus temas favoritos!

Por padrão, o jQuery Mobile usa o tema "a" para cabeçalhos e rodapés, e o tema "c" para o conteúdo dos cabeçalhos (cinza claro). No entanto, você pode misturar temas livremente.

Páginas, conteúdos e rodapés temáticos

Exemplo

<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>

Experimente Você Mesmo

Diálogos temáticos

Exemplo

<a href="#pagetwo" data-rel="dialog">Ir para a Página de Diálogo Temática</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
  <div data-role="header" data-theme="b"></div>
  <div data-role="content" data-theme="a"></div>
  <div data-role="footer" data-theme="c"></div>
</div>

Experimente Você Mesmo

Botões temáticos

Exemplo

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

Experimente Você Mesmo

Ícones temáticos

Exemplo

<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>

Experimente Você Mesmo

Botões temáticos nas cabeçalhos e rodapés

Exemplo

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Início</a>
  <h1>Bem-vindo à Minha Página Inicial</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Pesquisa</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Botão 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Botão 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Botão 3</a>
</div>

Experimente Você Mesmo

Barra de Navegação Tematizada

Exemplo

<div data-role="footer" data-theme="e">
  <h1>Insira o Texto do Rodapé Aqui</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Botão 1</a></li>
      <li><a href="#" data-icon="arrow-r">Botão 2</a></li>
      <li><a href="#" data-icon="arrow-r">Botão 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Botão 4</a></li>
    </ul>
  </div> 
</div>

Experimente Você Mesmo

Botões e Conteúdo Colapsáveis Tematizados

Exemplo

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Clique em mim - Sou expandível!</h1>
  <p>Conteúdo Expandido.</p>
</div>

Experimente Você Mesmo

Lista Temática

Exemplo

<ul data-role="listview" data-theme="e">
  <li><a href="#">Item da lista</a></li>
  <li data-theme="a"><a href="#">Item da Lista</a></li>
  <li data-theme="b"><a href="#">Item da lista</a></li>
  <li><a href="#">Item da lista</a></li>
</ul>

Experimente Você Mesmo

Botões divididos temáticos

Exemplo

<ul data-role="listview" data-split-theme="e">

Experimente Você Mesmo

Listas deslizantes temáticas

Exemplo

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

Experimente Você Mesmo

Formulários temáticos

Exemplo

<label for="name">Nome completo:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Escolha sua cor favorita:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Vermelho</option>
  <option value="green">Verde</option>
  <option value="blue">Azul</option>
</select>

Experimente Você Mesmo

Formulários deslizantes temáticos

Exemplo

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Clique em mim - sou expandível!</legend>

Experimente Você Mesmo

Adicionar novo tema

O jQuery Mobile também permite que você adicione novos temas às páginas móveis.

Edite o arquivo CSS (como o jQuery Mobile já baixado) para adicionar ou editar novos temas. Basta copiar um trecho de estilo, renomear a classe com um nome alfabético (f-z) e ajustar as cores e fontes para seu gosto.

Você também pode adicionar novos estilos usando classes de tema em documentos HTML - adicione a classe ui-bar-(a-z) à barra de ferramentas e a classe ui-body-(a-z) ao conteúdo:

Exemplo

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

Experimente Você Mesmo