Conceptos básicos del diseño de interfaz de usuario jquery css y jquery
Los fabricantes de jQuery y jQuery UI CSS hacen un buen trabajo de documentar los detalles internos de su biblioteca. Desde una perspectiva de CSS, el material encontrado en jqueryui.com le informa sobre los estilos utilizados para crear la salida que usted ha visto en varios lugares. Aquí es una buena idea de cómo la página inicial de la documentación se presenta.
Una de las primeras cosas que notas en esta página es que los desarrolladores recomiendan utiliza ThemeRoller para realizar los cambios siempre que sea posible. Sin embargo, hay muchos casos en los que ThemeRoller simplemente no va a hacer el trabajo, por lo que necesita para hacer las modificaciones de una manera más tradicional.
Las clases se dividen en dos archivos con un número de estilos dentro de cada archivo:
jquery.ui.core.css: Contiene todos los estilos que afectan a elementos estructurales de alguna manera. Éstas incluyen
ayudantes de Presentación: Determina la disposición general de los objetos onscreen- hace que sea posible interactuar con tecnologías- de asistencia y proporciona un método para restablecer la disposición según sea necesario.
señales de interacción: Define cuando un objeto está desactivada.
Video: Como hacer un Menu Vertical estilo Acordeón con HTML, CSS y Jquery (Parte 2)
iconos: Especifica el estado del icono.
superposiciones: Determina el tamaño y la posición de las placas.
jquery.ui.theme.css: Define los estilos que afectan a elementos temáticos, como el color, las fuentes y orígenes. Éstas incluyen
contenedores de componente: Especificar el aspecto del contenido dentro de varios contenedores de objetos. Los contenedores normalmente incluyen el objeto general, los encabezados de objeto, y datos de objeto (especificado como contenido dentro de los estilos).
Video: 8.- PHP Orientado a Objetos - Interfaces
estados de interacción: Determinar la apariencia de un objeto cuando se producen estados de interacción específicos. Los cuatro estados de interacción son: por defecto (cuando nada está sucediendo con el objeto), vuelo estacionario (cuando el cursor del ratón sobre el objeto), activa (cuando el usuario está realmente realizando una tarea con el objeto), y el enfoque (cuando el usuario ha seleccionado el objeto, pero no está haciendo nada con ella).
señales de interacción: Determinar la apariencia de un objeto que está en un estado en particular para ayudar al usuario a comprender el estado del objeto.
Las señales de interacción son: punto culminante (el objeto o el contenido se selecciona para la interacción) - error (un error se ha producido con un objeto) - texto de error (un error ha ocurrido con el contenido, por lo general de texto, dentro de un objeto) - desactivado (el objeto o contenidos son desactivado) - primaria (un objeto es el objeto principal o de primer nivel en una jerarquía de objetos) - y secundaria (un objeto es el objeto secundario o de segundo nivel en una jerarquía de objetos).
iconos: Definir el estado y el posicionamiento de los iconos utilizados con un objeto. El estado y el posicionamiento se controlan por separado. La información de estado determina si el icono es parte de un encabezado o el contenido. Además, determina el formato basado en el estado del icono:, vuelo estacionario,, punto culminante, el error y el texto de error activa por defecto. Los iconos se colocan individualmente en función del nombre icono, como .ui-icon quilates-1-n.
Los iconos son en realidad definen en formato de bloque como parte de la sección de los estados y las imágenes de iconos de la parte del archivo.
Se puede ver las imágenes de iconos específicos para los widgets en aquí.
El icono por defecto las imágenes aparecen aquí.
Puede encontrar las imágenes de iconos activos aquí y los que se utilizan para poner de relieve aquí.
Cuando una aplicación produce un error, se ve la lista de iconos aquí.
Radio de esquina: Crea esquinas redondeadas en los diversos objetos.
superposiciones: Determina el formato del contenido dentro de superposiciones y el formato de la sombra de superposición (de modo que se puede ver que hay un objeto detrás del objeto en el frente).
Con el fin de comprender mejor cómo funcionan las cosas, que es una buena idea buscar en los archivos reales. Puede encontrar el primer archivo en un lugar tal como se http://code.jquery.com/ui/1.9.2/themes/base/jquery.ui.core.css donde http://code.jquery.com/ui/ es la URL base, 1.9.2 es la versión de jQuery o jQuery UI en cuestión, y los temas / base / jquery.ui.theme.css es la ubicación del archivo específico.
Para obtener una copia de la CSS para una versión diferente de jQuery o jQuery UI, sólo tiene que cambiar la parte número de versión de la URL. El segundo archivo se encuentra en un lugar tal como http://code.jquery.com/ui/1.9.2/themes/base/jquery.ui.theme.css. Esto es lo que usted verá cuando se mira en jquery.ui.core.css.
Visualización de los archivos proporciona detalles sobre cómo se construyen los diferentes estilos, por lo que se puede hacer modificaciones de forma segura. Además, los archivos a menudo contienen notas. Por ejemplo, cuando nos fijamos en jquery.ui.theme.css, se encuentra que uno de los estilos es realmente obsoleta (que ya no es compatible), siempre que esta nota le dice:
/ * Ui-icon-buscar-primero es obsoleto, utilice ui-icon-buscar-start en lugar * /
El estilo está comentada por lo que no se puede utilizar. Sin embargo, la nota sigue siendo importante porque le dice que el estilo a utilizar en su lugar.