Temas de jQuery Mobile

Temas de jQuery Mobile

jQuery Mobile ofrece cinco temas de estilo diferentes, desde "a" hasta "e" - cada tema tiene botones, barras, bloques de contenido y otros con colores diferentes. Un tema de jQuery Mobile se compone de varios efectos visuales y colores.

Si deseas personalizar el aspecto de la aplicación, utiliza la propiedad data-theme y asigna una letra a esta propiedad:

<div data-role="page" data-theme="a|b|c|d|e">
Valor Descripción Ejemplo
a Por defecto. Texto blanco sobre fondo negro. Prueba
b Texto blanco sobre fondo azul / texto negro sobre fondo gris Prueba
c Texto negro sobre fondo gris claro Prueba
d Texto negro sobre fondo blanco Prueba
e Texto negro sobre fondo naranja Prueba

Consejo:¡Mezcla los temas que te gusten!

Por defecto, jQuery Mobile utiliza el tema "a" para la cabecera y pie de página, y el tema "c" para el contenido de la cabecera (gris claro). Sin embargo, puedes mezclar los temas a tu gusto.

Páginas, contenido y pies de página temáticos

Ejemplo

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

Prueba personalmente

Diálogos temáticos

Ejemplo

<a href="#pagetwo" data-rel="dialog">Ir a la 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>

Prueba personalmente

Botones temáticos

Ejemplo

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

Prueba personalmente

Iconos temáticos

Ejemplo

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

Prueba personalmente

Botones temáticos en la cabecera y pie de página

Ejemplo

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Inicio</a>
  <h1>¡Bienvenido a mi página principal!</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Búsqueda</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Botón 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Botón 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Botón 3</a>
</div>

Prueba personalmente

Barra de navegación temática

Ejemplo

<div data-role="footer" data-theme="e">
  <h1>Inserta el texto del pie de página aquí</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Botón 1</a></li>
      <li><a href="#" data-icon="arrow-r">Botón 2</a></li>
      <li><a href="#" data-icon="arrow-r">Botón 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Botón 4</a></li>
    </ul>
  </div> 
</div>

Prueba personalmente

Botones y contenido desplegables temáticos

Ejemplo

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Haz clic en mí - ¡soy desplegable!</h1>
  <p>Soy el contenido expandido.</p>
</div>

Prueba personalmente

Lista temática

Ejemplo

<ul data-role="listview" data-theme="e">
  <li><a href="#">Elemento de lista</a></li>
  <li data-theme="a"><a href="#">Elemento de lista</a></li>
  <li data-theme="b"><a href="#">Elemento de lista</a></li>
  <li><a href="#">Elemento de lista</a></li>
</ul>

Prueba personalmente

Botón dividido temático

Ejemplo

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

Prueba personalmente

Lista desplegable temática

Ejemplo

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

Prueba personalmente

Formulario temático

Ejemplo

<label for="name">Nombre completo:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Elija su color favorito:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Rojo</option>
  <option value="green">Verde</option>
  <option value="blue">Azul</option>
</select>

Prueba personalmente

Formulario desplegable temático

Ejemplo

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Haga clic en mí - ¡Soy desplegable!</legend>

Prueba personalmente

添加新主题

jQuery Mobile 同时允许您向移动页面添加新主题。

请通过编辑 CSS 文件（如已下载 jQuery Mobile）来添加或编辑新主题。只需复制一段样式，并用字母名（f-z）来对类进行重命名，然后调整为您喜欢的颜色和字体即可。

也可以通过在 HTML 文档中使用主题类来添加新样式 - 为工具栏添加类 ui-bar-(a-z)，并为内容添加类 ui-body-(a-z)：

Ejemplo

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

Prueba personalmente