Temas jQuery Mobile
jQuery Mobile fornece dois temas diferentes de estilo, "a" e "b" - cada um com diferentes cores para os botões, barras, blocos de conteúdo, e assim por diante.
Para personalizar a aparência do seu aplicativo, use o data-theme atributo, e atribuir o atributo com uma carta:
<div data-role="page" data-theme="a|b" >
| Valor | Descrição | Exemplo |
|---|---|---|
| a | texto preto sobre um fundo cinza claro para o conteúdo da página O texto preto em um fundo cinzento para cabeçalhos e rodapés texto preto sobre um fundo cinza claro para os botões O texto branco sobre um fundo azul de botões ativos O texto azul em links texto cinza claro (espaço reservado) ou texto preto (valor) em um fundo branco para campos de entrada | Tente |
| b | O texto branco sobre um fundo cinza escuro para o conteúdo da página O texto branco sobre um fundo cinza escuro para cabeçalhos e rodapés O texto branco em um fundo do carvão vegetal para os botões O texto branco em um "cyan" fundo azul por botões ativos "Cyan" texto azul em links texto cinza (espaço reservado) ou texto branco (valor) em um fundo preto para campos de entrada | Tente |
Para botões com class="ui-btn" , use o "ui-btn-a|b" classe para estilizar o botão seja cinza (padrão) ou preto:
<a href="#" class="ui-btn ui-btn-a|b" >Button</a>
O "a" tema é usado para a maioria dos elementos, e elementos filhos, muitas vezes herda o tema do seu pai (ou página).
Theming Cabeçalho e Rodapé
Exemplo
<div data-role="header" data-theme="b"></div>
<div data-role="footer"
data-theme="b"></div>
Tente você mesmo " Theming cabeçalho e rodapé em caixas de diálogo
Exemplo
<div data-role="page" data-dialog="true" id="pagetwo">
<div
data-role="header" data-theme="b"></div>
<div
data-role="footer" data-theme="b"></div>
</div> Tente você mesmo " Theming Botões
Ícones Theming
Exemplo
<a href="#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search</a>
Tente você mesmo " theming Popups
Theming Botões no cabeçalho e rodapé
Exemplo
<div data-role="header">
<a href="#" class="ui-btn
ui-btn-b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn">Search/a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
<a href="#" class="ui-btn">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>
Tente você mesmo " Bares Theming navegação
Exemplo
<div data-role="footer" data-theme="b">
<h1>Insert Footer Text
Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
</ul>
</div>
</div> Tente você mesmo " Painéis Theming
Theming Botão dobrável e conteúdo
Exemplo
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div> Tente você mesmo " Listas Theming
Exemplo
<ul data-role="listview" data-theme="b">
<li><a href="#">List
Item</a></li>
<li><a href="#">List
Item</a></li>
<li data-theme="a"><a href="#">List
Item</a></li>
<li><a href="#">List Item</a></li>
</ul> Tente você mesmo " Theming Dividir Botões
Theming Listas dobráveis
Exemplo
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div> Tente você mesmo " Formas Theming
Exemplo
<label for="name">Full Name:</label>
<input type="text" name="text"
id="name" data-theme="b">
<label for="colors">Choose Favorite
Color:</label>
<select id="colors"
name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option
value="blue">Blue</option>
</select> Tente você mesmo " Theming Forms dobráveis
Exemplo
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend> Tente você mesmo " Adicionar novos temas
jQuery Mobile também permite adicionar novos temas para suas páginas móveis.
Adicionar ou editar novos temas, editando o arquivo CSS (se tiver baixar jQuery Mobile). Basta copiar um bloco de estilos e renomear as classes com um nome de letra (CZ), e ajustar cores e fontes como você gosta.
Você também pode adicionar novos estilos usando as classes tema no documento HTML - adicionar a classe "ui-bar (az)" para as barras de ferramentas, "ui-corpo-(az)" para o conteúdo e ui-page-Theme- ( az) "para a página:
Exemplo
<style>
.ui-bar-f {
color: red;
background-color: yellow;
}
.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}
.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>
Tente você mesmo " Nas versões anteriores do jQuery Mobile, JavaScript usado para manipular como um elemento deve herdar o tema do pai. A partir de 1,4, o quadro é focado na melhoria da performance e JavaScript foi substituído por CSS puro.
A equipe jQuery Mobile criou uma ferramenta que ajuda você a criar o seu próprio tema personalizado: O ThemeRoller . Você também pode usar essa ferramenta para atualizar temas mais antigos para torná-los compatíveis com a nova versão.