temas de jQuery Mobile
jQuery Mobile ofrece dos estilos diferentes temáticas, desde la "a" a "b" - cada uno de los botones temáticos, barras de herramientas, etc. colores bloques de contenido son inconsistentes, el efecto visual no es el mismo para cada tema.
Al establecer el atributo de elemento de datos en el tema puede personalizar la apariencia de la aplicación:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
| valor | descripción | Ejemplos |
|---|---|---|
| una | La página de texto negro sobre un fondo gris cabeza y la parte inferior son de texto negro en un botón negro fondo gris fondo gris botones de activación de texto y enlaces a un texto blanco sobre un fondo azul Entrada de valor de atributo cuadro de marcador de posición es un gris claro, el valor es de color negro | probar |
| b | La página de fondo negro con texto en blanco en la parte inferior de la cabeza son texto en blanco sobre un fondo negro un botón de texto en blanco de carbón activado botones y enlaces con texto blanco sobre un fondo azul Entrada de valor de atributo cuadro de marcador de posición es un gris claro, el valor es de color blanco | probar |
Botón Estilo Uso class = "ui-Bot", usando "ui-btn-a | b" botón de configuración de la clase está en gris (por defecto) o negro:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
 | tema del estilo "A" para la mayoría de los elementos, subelementos generalmente heredan el estilo del elemento padre. |
|---|
Tema tapas y fondos
Ejemplos
<div data-role="footer" data-theme="b"></div>
Trate »
La parte inferior de la cabeza tema cuadro de diálogo
Ejemplos
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
Trate »
botón de temas
iconos del tema
tema pop
botón Temas en la parte inferior de la cabeza y
Ejemplos
<a href="#" class="ui-btn ui-btn-b"> principal </a>
<H1> Bienvenido a mi página de inicio </ h1>
<a href="#" búsqueda class="ui-btn"> </a>
</ Div>
<Div data-role = "pie">
<a href="#" class="ui-btn ui-btn-b"> sígueme en Facebook </a>
<a href="#" class="ui-btn"> Sígueme en Twitter </a>
<a href="#" class="ui-btn ui-btn-b"> Sígueme en Instagram </a>
</ Div>
Trate »
Tema barra de navegación
Ejemplos
<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>
Trate »
panel temático
botones plegables tema y contenido
Ejemplos
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
Trate »
Lista de temas
Ejemplos
<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>
Trate »
botón de división Tema
Lista plegable tema
Ejemplos
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
Trate »
Forma temas
Ejemplos
<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>
Trate »
Tema forma plegable
Ejemplos
<legend>Click me - I'm collapsible!</legend>
Trate »
Añadir un nuevo tema
jQuery Mobile puede agregar nuevos temas en la página móvil.
Modificando el archivo CSS para añadir o editar un tema nuevo (si se ha descargado el jQuery Mobile). Sólo tiene que copiar el módulo de estilo, y luego volver a la carta nombre de la clase de comandos (CZ), y añadir su estilo y el color preferido de la fuente.
También puede agregar documento HTML relativos al nuevo estilo, la barra de herramientas para agregar clases: ui-negociación (az), añadir categorías de contenido de texto: ui-cuerpo-(az), añadir las categorías página: ui-page-tema-( az).
Ejemplos
.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>
Trate »
| En las versiones anteriores de jQuery Mobile, un elemento utilizando JavaScript para heredar estilos de tema para padres. Para la versión 1.4, el marco más específico para la mejora del rendimiento, ya no se utiliza JavaScript para heredar, pero usando CSS puro. equipo de jQuery Mobile para esto han creado una herramienta para hacer frente a la ThemeRoller . Puede utilizar esta herramienta para actualizar un viejo tema, por lo que es compatible con la nueva versión. |
|---|