Las clases CSS jQuery
jQuery Mobile usar clases CSS para el estilo de distintos elementos.
Para la lista de referencias a continuación, hemos incluido clases CSS para los estilos comunes.
Las clases globales
Estas clases se pueden añadir en ningún widget jQuery Mobile ( buttons, toolbars, panels, tables, lists , etc ..):
| Clase | Descripción |
|---|---|
| ui-corner-all | Añade esquinas redondeadas al elemento |
| ui-shadow | Añade sombra al elemento |
| ui-overlay-shadow | Añade una sombra superpuesta al elemento |
| ui-mini | Hace que el elemento más pequeño |
Las clases de botón
Además de las clases globales, puede agregar las siguientes clases de <a> o <button> elementos (no <input> botones):
| Clase | Descripción |
|---|---|
| ui-btn | Debe añadirse a <a> elementos, si usted quiere que ser de estilo como botones |
| ui-btn-inline | Muestra el botón de línea |
| ui-btn-icon-top | Posiciona el icono sobre el texto del botón |
| ui-btn-icon-right | Posiciona el icono a la derecha del texto del botón |
| ui-btn-icon-bottom | Posiciona el icono de abajo el texto del botón |
| ui-btn-icon-left | Posiciona el icono situado a la izquierda del texto del botón |
| ui-btn-icon-notext | Muestra sólo el icono |
| ui-btn-a|b | Especifica el color del botón. "a" es por defecto (fondo gris con el texto negro), mientras que "b" va a cambiar el color de un fondo negro con el texto blanco |
Las clases de iconos
Todas las clases de iconos disponibles para <a> y <button> elementos (ver Referencia de iconos para saber cómo utilizar los iconos en otros elementos):
| Clase | icono Descripción | Icono |
|---|---|---|
| ui-icon-action | Acción (flecha hacia la derecha de arco de una caja) | |
| ui-icon-alert | signo de exclamación dentro de un triángulo | |
| ui-icon-audio | Sonido / Altavoces | |
| ui-icon-arrow-d-l | Hacia abajo, flecha izquierda | |
| ui-icon-arrow-d-r | Abajo, flecha hacia la derecha | |
| ui-icon-arrow-u-l | Arriba, flecha hacia la izquierda | |
| ui-icon-arrow-u-r | Arriba, flecha hacia la derecha | |
| ui-icon-arrow-l | Flecha izquierda | |
| ui-icon-arrow-r | Flecha correcta | |
| ui-icon-arrow-u | flecha hacia arriba | |
| ui-icon-arrow-d | Flecha hacia abajo | |
| ui-icon-back | Volver (flecha curva de arco hacia la izquierda hacia arriba) | |
| ui-icon-bars | Tres barras horizontales más de uno al otro | |
| ui-icon-bullets | Tres balas horizontales más de uno al otro | |
| ui-icon-calendar | Calendario | |
| ui-icon-camera | Cámara | |
| ui-icon-carat-d | quilates de down | |
| ui-icon-carat-l | quilates izquierda | |
| ui-icon-carat-r | quilates derecha | |
| ui-icon-carat-u | hasta quilates | |
| ui-icon-check | Marca de verificación | |
| ui-icon-clock | Reloj | |
| ui-icon-cloud | Nube | |
| ui-icon-comment | Comentario / Mensaje | |
| ui-icon-delete | Borrar | |
| ui-icon-edit | Editar / Lápiz | |
| ui-icon-eye | Ojo | |
| ui-icon-forbidden | Muestra prohibida | |
| ui-icon-forward | Delantero - (flecha curva de arco hacia la derecha hacia arriba) | |
| ui-icon-gear | Engranaje | |
| ui-icon-grid | Cuadrícula | |
| ui-icon-heart | Corazón / Símbolo del amor | |
| ui-icon-home | Inicio / Casa | |
| ui-icon-info | Información | |
| ui-icon-location | Ubicación | |
| ui-icon-lock | Cerradura / candado | |
| ui-icon-mail | Carta de correo | |
| ui-icon-minus | Signo menos | |
| ui-icon-navigation | Navegación | |
| ui-icon-phone | Teléfono | |
| ui-icon-power | Encendido / apagado) | |
| ui-icon-plus | Signo de más | |
| ui-icon-recycle | Recicle la muestra | |
| ui-icon-refresh | Actualizar - Flecha circular | |
| ui-icon-search | Buscar / Lupa | |
| ui-icon-shop | Tienda / Bolsa | |
| ui-icon-star | Estrella | |
| ui-icon-tag | Etiqueta | |
| ui-icon-user | Usuario / A persona | |
| ui-icon-video | Camara de video |
Las clases temáticas
jQuery Mobile ofrece dos clases temáticas: un (gris) y B (negro). Sin embargo, también puede crear sus propios valores de clase, personalizados - todo el camino hasta la letra "z" (Véase el capítulo Temas). La siguiente tabla muestra las clases temáticas disponibles. Las letras (az) significa que puede especificar una letra de la A a la Z. Por ejemplo: ui-bar-a o ui-bar-b , etc.
| Clase | Descripción |
|---|---|
| ui-bar-(a-z) | Especifica el color de una barra - encabezados, pies de página y otros bares |
| ui-body-(a-z) | Especifica el color para un contenido de bloque - Página paneles de contenido (en desuso en la versión 1.4.0), elementos de ListView, ventanas emergentes, botes hinchables, cargador, deslizadores y paneles |
| ui-btn-(a-z) | Especifica el color de un botón (e icono) |
| ui-group-theme-(a-z) | Especifica el color para controlgroups, listviews y conjuntos plegables |
| ui-overlay-(a-z) | Especifica el color de fondo de la página que el diálogo, aparece emergente y otros recipientes de página en la parte superior de |
| ui-page-theme-(a-z) | Especifica el color para las páginas |
Las clases de cuadrícula
Las columnas en una cuadrícula tienen la misma anchura (y el 100% de ancho en total), sin la frontera, de fondo, el margen o material de relleno. Hay cinco rejillas de diseño que se pueden utilizar:
| rejilla Clase | columnas | Los anchos de columna | Corresponde a | Ejemplo |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
Para obtener más información acerca de las cuadrículas, lea nuestra jQuery Mobile Rejillas capítulo .