Temas jQuery Mobile
jQuery Mobile ofrece dos diferentes temas de estilo, "a" y "b" - cada uno con diferentes colores para los botones, barras, bloques de contenido, y así sucesivamente.
Para personalizar el aspecto de su aplicación, utilice el data-theme de atributos, y asignar el atributo con una letra:
<div data-role="page" data-theme="a|b" >
| Valor | Descripción | Ejemplo |
|---|---|---|
| a | El texto negro sobre un fondo gris claro para el contenido de la página El texto negro sobre un fondo gris para los encabezados y pies de página El texto negro sobre un fondo gris claro para los botones El texto blanco sobre un fondo azul de botones activos El texto en azul en los enlaces texto gris claro (marcador) o el texto negro (valor) en un fondo blanco para los campos de entrada | Intentalo |
| b | El texto blanco sobre un fondo gris oscuro para el contenido de la página El texto blanco sobre un fondo gris oscuro para los encabezados y pies de página El texto blanco sobre un fondo del carbón de leña para los botones El texto blanco sobre un "cyan" fondo azul para los botones activos "Cyan" texto azul en los enlaces El texto en gris (marcador) o texto en blanco (valor) en un fondo negro para los campos de entrada | Intentalo |
Para botones con class="ui-btn" , utilice el "ui-btn-a|b" clase para estilizar el botón ya sea gris (por defecto) o negro:
<a href="#" class="ui-btn ui-btn-a|b" >Button</a>
La "a" es el tema se utiliza para la mayoría de los elementos, y los elementos secundarios a menudo hereda el tema de su padre (o página).
Encabezado y pie de página tematización
Ejemplo
<div data-role="header" data-theme="b"></div>
<div data-role="footer"
data-theme="b"></div>
Inténtalo tú mismo " Encabezado y pie de página en la tematización Diálogos
Ejemplo
<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> Inténtalo tú mismo " tematización Botones
Iconos de tematización
Ejemplo
<a href="#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search</a>
Inténtalo tú mismo " tematización Popups
Botones de tematización en Encabezado y pie
Ejemplo
<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>
Inténtalo tú mismo " Bares tematización de navegación
Ejemplo
<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> Inténtalo tú mismo " Los paneles de tematización
Tematización Botón plegable y contenido
Ejemplo
<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> Inténtalo tú mismo " Listas de tematización
Ejemplo
<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> Inténtalo tú mismo " Tematización Dividir Botones
Tematización listas plegables
Ejemplo
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div> Inténtalo tú mismo " Formas de tematización
Ejemplo
<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> Inténtalo tú mismo " Tematización Formas plegables
Ejemplo
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend> Inténtalo tú mismo " Añadir nuevos temas
jQuery Mobile también permite añadir nuevos temas a sus páginas móviles.
Añadir o editar temas nuevos editando el archivo CSS (si usted tiene descarga jQuery Mobile). Sólo tienes que copiar un bloque de estilos y cambiar el nombre de las clases con un nombre de letra (CZ), y ajustar los colores y fuentes que lo desee.
También se pueden añadir nuevos estilos mediante el uso de las clases temáticas en el documento HTML - añadir la clase "ui-negociación (az)" para las barras de herramientas, "ui-cuerpo-(az)" para el contenido y ui-page-tema-( az) "de la página:
Ejemplo
<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>
Inténtalo tú mismo " En las versiones anteriores de jQuery Mobile, JavaScript utiliza para controlar cómo un elemento debe heredar el tema de los padres. A partir de 1,4, el marco se centra en mejorar el rendimiento y JavaScript ha sido sustituido por CSS puro.
El equipo de jQuery Mobile ha creado una herramienta que le ayuda a crear su propio tema personalizado: El ThemeRoller . También puede utilizar esta herramienta para actualizar temas de mayor edad para que sean compatibles con la nueva versión.