jQuery UI API - marco CSS (CSS Marco)

Anterior: jQuery UI API -: Selector de tabbable

Siguiente: jQuery UI API - Icono (iconos)

La siguiente es una lista de Nombre de clase de interfaz de usuario jQuery utilizado. Estos Clase utiliza para crear una consistencia visual en todas las aplicaciones, y permitir que el conjunto de jQuery UI ThemeRoller tematización. Son los siguientes estilos de clase CSS se fija de acuerdo con el estructurada, o si es themable (colores, fuentes, fondos, etc.), están definidos en ui.core.css y ui.theme.css dos archivos.

Ayudante de diseño

.ui-helper-hidden : los elementos de la solicitud display: none .
.ui-helper-hidden-accessible : los elementos de la solicitud para acceder a la (posicionamiento absoluto por página) oculta.
.ui-helper-reset : Pon los elementos básicos de interfaz de usuario estilo. Restablecer elementos como: padding , margin , text-decoration , al estilo de la lista, y así sucesivamente.
.ui-helper-clearfix : aplicación del elemento padre propiedades de embalaje flotador.
.ui-helper-zfix : de <iframe> elemento se aplica iframe "solución" CSS.
.ui-front :. Aplicación para gestionar el índice z apilar múltiples widgets en la pantalla Para más detalles, consulte el elemento de pila (apilamiento de elementos) página.

contenedor del widget

.ui-widget : Clase en el exterior del contenedor se aplican a todos los widgets. aplicación Widget para la fuente y el tamaño, sino también en el mismo tipo de letra de los elementos del formulario de aplicación y tamaño de la fuente 1 em para hacer frente a la sucesión de ventanas del navegador.
.ui-widget-header : Título de la Clase aplicación contenedora. Del elemento y el texto de sus hijos, enlaces, iconos aplicar Título envase estilo.
.ui-widget-content : contenidos clase de aplicaciones de contenedores. Del elemento y el texto de sus hijos, enlaces, iconos contenido de la aplicación de estilo contenedor. (Puede ser aplicado al título del elemento padre o hermanos)

estado interactivo

.ui-state-default : Haga clic en el elemento de botón se puede aplicar clase. Del elemento y el texto de sus hijos, enlaces, iconos de aplicaciones de contenedores de estilo "por defecto se puede hacer clic".
.ui-state-hover : ratón suspendida cuando se aplica en un elemento de botón que se pulse cuando en clase. Del elemento y el texto de sus hijos, enlaces, iconos de aplicaciones de estilo de contenedores "vuelo estacionario se puede hacer clic".
.ui-state-focus : Clase de aplicación cuando el foco del teclado en un elemento de botón que se pulse. Del elemento y el texto de sus hijos, enlaces, iconos de aplicaciones de estilo de contenedores "vuelo estacionario se puede hacer clic".
.ui-state-active : Clase de aplicación cuando un clic del ratón puede hacer clic en el elemento de botón. Del elemento y el texto de sus hijos, enlaces, iconos de aplicaciones de estilo de contenedores "activa se puede hacer clic".

Señales de modo interactivo

.ui-state-highlight : para resaltar o seleccionar las aplicaciones de elementos de clase. Del elemento y el texto de sus hijos, enlaces, iconos de aplicaciones de estilo de contenedores "punto culminante".
.ui-state-error : error contenedor de mensajes aplicaciones elemento class. Del elemento y el texto de sus hijos, enlaces, iconos de aplicaciones de estilo contenedor "error".
.ui-state-error-text : no sólo contra el color de fondo de la clase de texto de errores. Puede ser utilizado para formar las etiquetas para ser sub-color del icono icono de la aplicación de error.
.ui-state-disabled : para deshabilitar elementos de la interfaz se aplican una opacidad tenue. Esto significa que los elementos de un estilo ya definido para añadir un toque de estilo.
.ui-priority-primary : Clase de aplicaciones primer botón de prioridad. Aplicación de texto en negrita.
.ui-priority-secondary : Clase de aplicaciones segundo botón de prioridad. La aplicación de los elementos de texto peso normal aplicar una ligera transparencia.

icono

El estado y la imagen

.ui-icon : Clase básica del elemento icono de la aplicación. Ajuste el tamaño de 16px cuadrados, escondido dentro del texto del sprite "contenido" estado de configurar la imagen de fondo. Nota: .ui-icon , clase obtendrá un sprite imagen de fondo diferente en función de su contenedor principal. Por ejemplo, ui-state-default contenedores ui-icon elemento de acuerdo ui-state-default icono de color colorante.

Tipo icono

En un comunicado .ui-icon después de clase, entonces se puede declarar una segunda velocidad del tipo de icono de clase. En circunstancias normales, la clase icono sigue la sintaxis .ui-icon-{icon type}-{icon sub description}-{direction} .

Por ejemplo, un icono de triángulo que apunta hacia la derecha, de la siguiente manera: .ui-icon-triangle-1-e

jQuery UI ThemeRoller en su columna de previsualización ofrece una gama completa de icono marco CSS. Pase el ratón sobre el icono para ver el nombre de la clase.

otros elementos visuales

asistente de radio

.ui-corner-tl : esquina superior izquierda de la radio de elemento de aplicación.
.ui-corner-tr : la esquina superior derecha de la radio de elemento de aplicación.
.ui-corner-bl : esquina inferior izquierda de la radio de elemento de aplicación.
.ui-corner-br : la esquina inferior derecha de la radio de elemento de aplicación.
.ui-corner-top : esquina superior izquierda de la radio de elemento de aplicación.
.ui-corner-bottom : los elementos de la esquina inferior izquierda de la radio de aplicación.
.ui-corner-right : elementos diagonales de la parte superior derecha e inferior del radio de aplicación.
.ui-corner-left : elementos diagonales de la parte superior izquierda e inferior del radio de aplicación.
.ui-corner-all : las cuatro esquinas del radio de aplicación del elemento.

Cubierta y sombras

.ui-widget-overlay : para cubrir el 100% de la anchura de la pantalla y la altura de la aplicación, y establecer el color de fondo / de la textura y la opacidad de la pantalla.
.ui-widget-shadow : Clase de cobertura de aplicación, establece la opacidad, el offset / offset izquierda, y la sombra "espesor". El espesor es por todos lados en los márgenes de sombra se aplica (relleno). Offset ajustando el margen (margen) y el margen izquierdo (margen) se aplicaron (puede ser positivo, puede ser negativo).