jQuery UI API - Framework CSS (CSS Framework)
La siguiente es una lista de los nombres de clase utilizados por jQuery UI. Estas clases se utilizan para crear coherencia visual entre aplicaciones y permiten que los componentes se puedanjQuery UI ThemeRollertematizar mediante las siguientes clases. Las siguientes clases CSS se definen respectivamente en los dos archivos ui.core.css y ui.theme.css, según si los estilos son estructurales fijos o si son tematizables (colores, fuentes, fondos, etc.).
Asistentes de diseño
.ui-helper-hidden：Aplica al elementodisplay: none。.ui-helper-hidden-accessible：Aplica al elemento un ocultamiento accesible (mediante posicionamiento absoluto en la página)..ui-helper-reset：Restablecimiento básico de estilos para elementos de UI. Los elementos restablecidos incluyen:padding、margin、text-decorationlist-style, etc..ui-helper-clearfix：Aplica al elemento padre propiedades de envoltura de flotación..ui-helper-zfix：Aplica a<iframe>los elementos el CSS 'fix' de iframe..ui-front：Aplica z-index para gestionar la superposición de múltiples widgets en la pantalla. Para más detalles, consulte lapágina Apilamiento de elementos (Stacking Elements).
Contenedores de widgets
.ui-widget：Clase que se aplica al contenedor externo de todos los widgets. Aplica al widget la fuente y el tamaño de fuente, y también aplica a los elementos de formulario hijos la misma fuente y el tamaño de fuente de 1em, para resolver problemas de herencia en los navegadores Windows..ui-widget-header：Clase que se aplica al contenedor de título. Aplica el estilo del contenedor de título al texto, enlaces e iconos del elemento y sus elementos secundarios..ui-widget-content：Clase que se aplica al contenedor de contenido. Aplica el estilo del contenedor de contenido al texto, enlaces e iconos del elemento y sus elementos secundarios. (Se puede aplicar al elemento padre o al elemento hermano del título).
Estados de interacción
.ui-state-default：Clase que se aplica a elementos de botón en los que se puede hacer clic. Aplica el estilo de contenedor 'clickable default' al texto, enlaces e iconos del elemento y sus elementos secundarios..ui-state-hover：Clase que se aplica cuando el ratón se sitúa sobre un elemento de botón en el que se puede hacer clic. Aplica el estilo de contenedor 'clickable hover' al texto, enlaces e iconos del elemento y sus elementos secundarios..ui-state-focus：Clase que se aplica cuando el teclado enfoca un elemento de botón en el que se puede hacer clic. Aplica el estilo de contenedor 'clickable hover' al texto, enlaces e iconos del elemento y sus elementos secundarios..ui-state-active：Clase que se aplica cuando se hace clic con el ratón en un elemento de botón en el que se puede hacer clic. Aplica el estilo de contenedor 'clickable active' al texto, enlaces e iconos del elemento y sus elementos secundarios.
Señales de interacción (Cues)
.ui-state-highlight：Clase que se aplica a elementos resaltados o seleccionados. Aplica el estilo de contenedor 'highlight' al texto, enlaces e iconos del elemento y sus elementos secundarios..ui-state-error：Clase que se aplica al elemento contenedor de mensajes de error. Aplica el estilo de contenedor 'error' al texto, enlaces e iconos del elemento y sus elementos secundarios..ui-state-error-text：Clase que se aplica solo al color de texto de error sin fondo. Se puede usar para etiquetas de formulario y también puede aplicar el color de icono de error a los iconos secundarios..ui-state-disabled：Aplica una opacidad atenuada a los elementos de UI deshabilitados. Esto significa agregar estilos adicionales a un elemento que ya tiene estilos definidos..ui-priority-primary：Clase que se aplica a los botones de primera prioridad. Aplica texto en negrita..ui-priority-secondary：Clase que se aplica a los botones de segunda prioridad. Aplica texto de grosor normal y una ligera opacidad al elemento.
Iconos
Estados e imágenes
.ui-icon：Clase básica que se aplica a los elementos de icono. Establece el tamaño como un cuadrado de 16px, oculta el texto interno y establece la imagen de fondo para la imagen de sprite del estado 'content'.Nota:.ui-iconLa clase obtendrá una imagen de fondo de sprite diferente según su contenedor padre. Por ejemplo,ui-state-defaultlos elementos dentro del contenedorui-iconse colorearán segúnui-state-defaultel color de icono de.
Tipos de iconos
Después de declarar la.ui-iconclass, a continuación puede declarar una clase que describa el tipo de icono. Normalmente, las clases de icono siguen la sintaxis.ui-icon-{icon type}-{icon sub description}-{direction}。
Por ejemplo, un icono de triángulo que apunta a la derecha se muestra a continuación:.ui-icon-triangle-1-e
jQuery UIThemeRolleren su columna de vista previa proporciona el conjunto completo de iconos del framework CSS. Pase el ratón sobre un icono para ver el nombre de la clase.
Otros efectos visuales
Asistentes de radio de esquinas
.ui-corner-tl：Aplica radio de esquina a la esquina superior izquierda del elemento..ui-corner-tr：Aplica radio de esquina a la esquina superior derecha del elemento..ui-corner-bl：Aplica radio de esquina a la esquina inferior izquierda del elemento..ui-corner-br：Aplica radio de esquina a la esquina inferior derecha del elemento..ui-corner-top：Aplica radio de esquina a las dos esquinas superiores del elemento..ui-corner-bottom：Aplica radio de esquina a las dos esquinas inferiores del elemento..ui-corner-right：Aplica radio de esquina a las dos esquinas del lado derecho del elemento..ui-corner-left：Aplica radio de esquina a las dos esquinas del lado izquierdo del elemento..ui-corner-all：Aplica radio de esquina a las cuatro esquinas del elemento.
Superposición y sombras
.ui-widget-overlay：Aplica a la superposición de pantalla un 100% de ancho y alto, y establece el color/textura de fondo y la opacidad de la pantalla..ui-widget-shadow：Clase que se aplica a la superposición, establece la opacidad, el desplazamiento superior/izquierdo y el 'grosor' de la sombra. El grosor se aplica estableciendo un relleno (padding) en todos los lados de la sombra. El desplazamiento se aplica estableciendo un margen superior (margin) y un margen izquierdo (margin) (pueden ser positivos o negativos).