jQuery Mobile - Clases CSS
Clases CSS de jQuery
Puede usar diferentes tipos de clases CSS para diseñar los elementos como se describe en las secciones siguientes.
Clases globales
Las siguientes clases se pueden usar como clases globales en los widgets de jQuery Mobile:
| No Señor. | Clase y descripción |
|---|---|
| 1 | ui-corner-all Muestra los elementos con esquinas redondeadas. |
| 2 | ui-shadow Muestra la sombra de los elementos. |
| 3 | ui-overlay-shadow Muestra la sombra superpuesta para los elementos. |
| 4 | ui-mini Muestra los elementos más pequeños. |
Clases de botones
La siguiente tabla enumera las clases de botones que se utilizan con elementos de anclaje o botón:
| No Señor. | Clase y descripción |
|---|---|
| 1 | ui-btn Especifica que el elemento se diseñará como botón. |
| 2 | ui-btn-inline Muestra el botón como elemento en línea que ahorra el espacio necesario para la etiqueta. |
| 3 | ui-btn-icon-top Coloca el icono sobre el texto. |
| 4 | ui-btn-icon-right Coloca el icono a la derecha del texto. |
| 5 | ui-btn-icon-bottom Coloca el icono debajo del texto. |
| 6 | ui-btn-icon-left Coloca el icono a la izquierda del texto. |
| 7 | ui-btn-icon-notext Muestra el único icono. |
| 8 | ui-btn-a|b Muestra el color del botón ("a" será el color de fondo predeterminado, es decir, gris y "b" cambiará el color de fondo a negro). |
Clases de iconos
La siguiente tabla enumera las clases de iconos que se utilizan con elementos de anclaje o botón:
| No Señor. | Clase y descripción |
|---|---|
| 1 | ui-icon-action Muestra el icono de acción. |
| 2 | ui-icon-alert Muestra el signo de exclamación dentro de un triángulo. |
| 3 | ui-icon-arrow-d-l Especifica hacia abajo con la flecha izquierda. |
| 4 | ui-icon-arrow-d-r Especifica hacia abajo con la flecha derecha. |
| 5 | ui-icon-arrow-u-l Especifica hacia arriba con la flecha izquierda. |
| 6 | ui-icon-arrow-u-r Especifica hacia arriba con la flecha derecha. |
| 7 | ui-icon-arrow-l Especifica la flecha izquierda. |
| 8 | ui-icon-arrow-r Especifica la flecha derecha. |
| 9 | ui-icon-arrow-u Especifica la flecha hacia arriba. |
| 10 | ui-icon-arrow-d Especifica la flecha hacia abajo. |
| 11 | ui-icon-bars Muestra las 3 barras horizontales una encima de la otra. |
| 12 | ui-icon-bullets Muestra las 3 balas horizontales una encima de la otra. |
| 13 | ui-icon-carat-d Muestra el quilate hacia abajo. |
| 14 | ui-icon-carat-l Muestra el quilate a la izquierda. |
| 15 | ui-icon-carat-r Muestra el quilate a la derecha. |
| dieciséis | ui-icon-carat-u Muestra el quilate para arriba. |
| 17 | ui-icon-check Muestra el icono de marca de verificación. |
| 18 | ui-icon-comment Especifica el comentario o mensaje. |
| 19 | ui-icon-forbidden Muestra el icono de prohibido. |
| 20 | ui-icon-forward Especifica el icono de reenvío. |
| 21 | ui-icon-navigation Especifica el icono de navegación. |
| 22 | ui-icon-recycle Muestra el icono de reciclaje. |
| 23 | ui-icon-refresh Muestra el icono de actualización. |
| 24 | ui-icon-tag Indica el icono de etiqueta. |
| 25 | ui-icon-video Indica el icono de video o cámara. |
Clases temáticas
Proporciona dos tipos diferentes de temas, como el tema "a" y el tema "b", para personalizar el aspecto de la aplicación. Puede crear sus propias clases temáticas agregando la letra de muestra (az). La siguiente tabla enumera las clases de temas que se especifican de la letra a la z.
| No Señor. | Clase y descripción |
|---|---|
| 1 | ui-bar-(a-z) Muestra el color de la barra, incluidos los encabezados, pies de página y otras barras de la página. |
| 2 | ui-body-(a-z) Muestra el color del bloque de contenido, incluida la vista de lista, ventanas emergentes, controles deslizantes, paneles, cargadores, etc. |
| 3 | ui-btn-(a-z) Muestra el color del botón. |
| 4 | ui-group-theme-(a-z) Muestra el color de los grupos de control, las vistas de lista y los conjuntos plegables. |
| 5 | ui-overlay-(a-z) Muestra el color de fondo de los contenedores de páginas, cuadros de diálogo y ventanas emergentes. |
| 6 | ui-page-theme-(a-z) Muestra el color de las páginas. |
Clases de cuadrícula
La siguiente tabla enumera las clases de cuadrícula que se utilizan con el mismo ancho, sin borde, fondo, margen o relleno.
| No Señor. | Clase de cuadrícula | Columnas | Anchos de columna | Corresponde a |
|---|---|---|---|---|
| 1 | ui-grid-solo | 1 | 100% | ui-block-a |
| 2 | ui-grid-a | 2 | 50% / 50% | ui-bloque-a | b |
| 3 | ui-grid-b | 3 | 33% / 33% / 33% | ui-bloque-a | b | c |
| 4 | ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-bloque-a | b | c | d |
| 5 | ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-bloque-a | b | c | d | e |