tema de jQuery UI
Todo jQuery UI plug-in permite a los desarrolladores integrar sin problemas los widgets de interfaz de usuario a la apariencia de sus sitios o aplicaciones. Cada control se define por los estilos CSS, y contiene información de estilo dos: los estándares marco jQuery UI CSS estilos y plug-in de estilo específico.
framework jQuery UI CSS proporciona una representación semántica de la clase para indicar el papel de un pequeño elementos componentes, como el título, contenido o área seleccionable. Estos son consistentes en todas las piezas pequeñas, y se puede hacer clic en una ficha (pestaña), acordeón (acordeón) o el botón (botón) tienen el mismo ui-state-default , clase, para demostrar que se puede hacer clic a. Cuando el usuario se desplaza en la parte superior de estos elementos, la clase se convierte en ui-state-hover , luego se convierten elegido en estos elementos ui-state-active . La clase de consistencia hace que el rendimiento constante aparición de todos los elementos o componentes que tienen un papel similar en el estado de interacción.
Marco del estilo CSS se encapsula en un archivo separado, nombrado ui.theme.css . Este archivo a través ThemeRoller la aplicación modificar. estilo de marco se describen sólo afecta a la apariencia y el tacto de la propiedad, siempre y cuando los colores, imágenes de fondo, iconos y así sucesivamente. Así que estos son de estilo "seguro", no afecta a la función de plug-in. Esta separación significa que los desarrolladores pueden utilizar en theme.css modificar los archivos de color y de imagen para crear un diseño personalizado y sentir. Puesto que el futuro de los plug-ins o correcciones de errores estará disponible, y estos pueden ser utilizados sin modificación por el tema.
Desde la cubierta del estilo del marco sólo se ve y se siente, por lo que debe incluir complemento específico en las hojas de estilo, estas hojas de estilo incluyen todos los controles adicionales permiten las reglas de estilo estructura funcionales, tales como tamaño, relleno, márgenes, posicionamiento, flotador. Cada hojas de estilo para widgets themes/base carpeta, y con el "jquery.ui.accordion.css" plug-in de nombre, por ejemplo. Estos patrones deben ser editados cuidadosamente las secuencias de comandos, ya que proporcionan un marco que abarca estilos juntos.
Animamos a todos los desarrolladores para crear plug-in de jQuery, jQuery UI CSS hace que sea más fácil para los usuarios finales utilizar temas personalizados y plug-ins.
tematización
Aquí están tres de jQuery UI el widget en relación con el procedimiento general:
- Descargar temas ThemeRoller: en primer lugar crear un tema es el uso de ThemeRoller para generar y descargar un tema. Esta aplicación va a crear un nuevo
ui.theme.cssarchivo y contiene todas las imágenes de fondo y los iconos de sprites necesariosimagesde la carpeta. Este método es el primero en crear y mantener el tema de la forma, pero las opciones que ofrece la costumbre ThemeRoller limitado. - Modificar el archivo CSS: Con el fin de promover la apariencia de los controles, se puede elegir el tema por defecto (Suavidad) comienza, o de un tema que genera el ThemeRoller Inicio y, a continuación, ajuste
ui.theme.cssarchivo, un plug-in por separado o en cualquier hoja de estilo. Por ejemplo, se puede ajustar fácilmente el ángulo de la radio de todos los botones es diferente de los valores de los otros componentes de interfaz de usuario, o utilizar un icono personalizado para cambiar el asistente de ruta. Los estilos se extienden a través de un poco, incluso se puede usar más de un tema en una interfaz de usuario. Para facilitar el mantenimiento, el cambio propuesto solamenteui.theme.cssarchivos e imágenes. - Vuelva a escribir CSS personalizado: Para maximizar el control de la apariencia, puede empezar a escribir de nuevo en cada widget y CSS, sin el uso de clases de la arquitectura de plug-in o una hoja de estilo específica. Si usted quiere mirar y la sensación puede lograrse modificando el CSS o el uso de etiquetas altamente personalizadas, a continuación, puede utilizar este método. Este enfoque requiere amplia experiencia en términos de CSS, y requieren actualizaciones manuales para un futuro plug-ins.