1. Home
  2. temas jQuery Mobile

O melhor tutorial temas jQuery Mobile em 2024. Neste tutorial você pode aprender topos e fundos de Tópico,Exemplos,A parte inferior da cabeça tema caixa de diálogo,Exemplos,botão tópicos,Exemplos,ícones do tema,Exemplos,pop Topic,Exemplos,temas botão na parte inferior da cabeça e,Exemplos,Tópico Barra de Navegação,Exemplos,painel temático,Exemplos,Tópico botões dobráveis ​​e conteúdos,Exemplos,Lista de tópicos,Exemplos,botão de divisão Topic,Exemplos,Tópico Lista dobrável,Exemplos,temas Form,Exemplos,forma desmontável tema,Exemplos,Adicionar novo tópico,Exemplos,

temas jQuery Mobile

jQuery Mobile oferece dois estilos temáticos diferentes, de "a" a "b" - cada temáticos botões, barras de ferramentas, etc. cores bloco de conteúdo são inconsistentes, o efeito visual não é o mesmo para cada tópico.

Ao definir o atributo do elemento-tema de dados pode personalizar a aparência do aplicativo: 

<a href="#" class="ui-btn ui-btn-a|b">按钮</a>

valor descrição Exemplos
um Página de texto preto em um fundo cinzento cabeça e inferior são de texto preto em um fundo cinzento fundo do botão preto texto cinza botões de ativação e links para o texto branco sobre um fundo azul
Entrada Entrada valor do atributo caixa de espaço reservado é um cinza claro, o valor é preto 		tentar
b Página fundo preto com texto branco na parte inferior da cabeça são um texto branco sobre um fundo preto um botão de texto branco carvão ativado fundo botões e links para o texto branco sobre um fundo azul
Entrada Entrada valor do atributo caixa de espaço reservado é um cinza claro, o valor é branco 		tentar

Estilo do botão Use class = "ui-btn", usando "ui-btn-a | b" botão de configurações de classe fica acinzentado (padrão) ou preto: 

<a href="#" class="ui-btn ui-btn-a|b">按钮</a>

lâmpada tema "A" de estilo para a maioria dos elementos, elementos filho geralmente herdam estilos de elementos pai.

topos e fundos de Tópico

Exemplos

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

tente »

A parte inferior da cabeça tema caixa de diálogo

Exemplos

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

botão tópicos

Exemplos

<a href="#" class="ui-btn ui-btn-b">黑色按钮</a>

tente »

ícones do tema

Exemplos

<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>

tente »

pop Topic

Exemplos

<div data-role="popup" id="myPopup" data-theme="b">

tente »

temas botão na parte inferior da cabeça e

Exemplos

<Div data-role = "header">
<a href="#" class="ui-btn ui-btn-b"> Início </a>
<H1> Bem-vindo à minha home page </ h1>
<a href="#" class="ui-btn"> pesquisa </a>
</ Div>

<Div data-role = "footer">
<a href="#" class="ui-btn ui-btn-b"> Siga-me no Facebook </a>
<a href="#" class="ui-btn"> Siga-me no Twitter </a>
<a href="#" class="ui-btn ui-btn-b"> Siga-me no Instagram </a>
</ Div>

tente »

Tópico Barra de Navegação

Exemplos

<div data-role="footer" data-theme="b">
  <h1>文本头部</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 »

painel temático

Exemplos

<div data-role="panel" id="myPanel" data-theme="b">

tente »

Tópico botões dobráveis ​​e conteúdos

Exemplos

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

Lista de tópicos

Exemplos

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

botão de divisão Topic

Exemplos

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

tente »

Tópico Lista dobrável

Exemplos

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

tente »

temas Form

Exemplos

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

forma desmontável tema

Exemplos

<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend>

tente »

Adicionar novo tópico

Você pode adicionar novos tópicos página móvel jQuery Mobile.

Ao modificar o arquivo CSS para adicionar ou editar um novo tema (se você tiver baixado o jQuery Mobile). Você só precisa copiar o módulo de estilo, e então re-letter nome da classe de comando (CZ), e adicione seu estilo cor e fonte preferida.

Você também pode adicionar documento HTML relativas ao novo estilo, a barra de ferramentas adicionar classe: ui-bar (az), adicionar categorias de conteúdo de texto: ui-corpo-(az), adicionar categorias de página: ui-page-Theme- ( AZ).

Exemplos

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

nota Nas versões anteriores do jQuery Mobile, um elemento usando o JavaScript para herdar estilos do tema pai. Para o 1.4 versão do framework, mais focado para a melhoria de desempenho, não é mais usado JavaScript para herdar, mas usando CSS puro.

equipe jQuery Mobile para este criaram uma ferramenta para resolver o ThemeRoller . Você pode usar essa ferramenta para atualizar um velho tema, tornando-o compatível com a nova versão.

Tutoriais quentes

Contact US

temas jQuery Mobile
10/30