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