Latest web development tutorials

API del marco de jQuery UI CSS

framework jQuery UI CSS

jQuery UI incluye un potente marco de CSS, con el fin de crear widgets y personalizados diseño de jQuery. Frame contiene las clases de interfaz de usuario común requeridas, y se puede utilizar de mantenimiento jQuery UI ThemeRoller. Al crear sus propios componentes de interfaz de usuario que utilizan marco jQuery UI CSS. Es necesario utilizar Sharemark Convención, con el fin de conectar la integración de la comunidad de código.

clases de la arquitectura

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. Estas clases están diseñadas para elementos de interfaz de usuario con el fin de lograr una coherencia visual en toda la aplicación, por jQuery UI ThemeRoller de los componentes de la tematización.

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.

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).