jQuery UI y ThemeRoller

• Mayo 15, 2024

Si desea una forma fácil y rápida de diseñar la interfaz de usuario para un sitio web o aplicación web y también incluye jQuery, consulte la interfaz de usuario de jQuery. Allí encontrará un paquete combinado de funciones CSS y jQuery llave en mano que facilita la adición de estas características a su nuevo proyecto.

Paseemos por el sitio. Debajo del enlace Demos y Documentos encontrará una lista de los complementos interactivos de jQuery como arrastrar y soltar, pestañas y transiciones. Para cada complemento hay una demostración, documentación y un código de muestra de cortar y pegar para probar.

Si desea obtener los archivos llave en mano, haga clic en el enlace Temas para jQuery ThemeRoller. El CSS predeterminado es un tema básico en blanco y gris. Puede hacer clic en el botón de descarga y usarlo tal cual, pero también hay una Galería de temas coloridos para comenzar. En el área de la Galería hay varias miniaturas de temas. Simplemente haz clic en el que más te guste. Puede descargar ese tema tal como está haciendo clic en la pestaña Roll Your Own y luego en el botón Descargar tema. Pero la diversión comienza cuando comienzas a tuitear el tema con el motor ThemeRoller. Hay 11 opciones que puede personalizar. La mayoría de las opciones le permitirán cambiar la textura y el color de fondo, el color del borde y los colores de texto e ícono.

Tienes varias opciones para tuitear el tema.

• Configuración de fuente: puede cambiar la familia de fuentes, el peso y el tamaño.
  
  
• Radio de esquina: puede cambiar el radio de esquina. Cada tema tiene un estilo de pestaña redondeada predeterminado, pero aquí puede cambiar el tamaño de la esquina o establecerlo en cero para una pestaña cuadrada. (Las pestañas están construidas en CSS3, que no es compatible con IE en este momento).
  
  
• Encabezado / Barra de herramientas: puede establecer los valores de color para el área detrás de las pestañas y las áreas de encabezado, como para el complemento de calendario.
  
  
• Contenido: aquí puede establecer los colores para el área de contenido principal. Puede obtener un diseño muy diferente dependiendo de su elección de borde o sin borde.
  
  
• Estado predeterminado en el que se puede hacer clic: controla la apariencia predeterminada (inactiva) de las pestañas y botones.
  
  
• Estado de desplazamiento de clic: estos controles son para la apariencia de las pestañas y botones en el estado de desplazamiento.
  
  
• Estado activo en el que se puede hacer clic: controla la apariencia de la pestaña y el botón de la página activa.
  
  
• Resaltar: los colores de fondo, borde, texto e ícono para las áreas resaltadas.
  
  
• Error: colores de fondo, borde, texto e icono para mensajes de error.
  
  
• Pantalla modal para superposiciones: controla el color de fondo y la textura.
  
  
• Sombras paralelas: controles para la opacidad, el grosor, el desplazamiento y las esquinas de las sombras para un efecto de sombra paralela.
  
  

Cuando descargue jquery-ui-x.x.xx.custom.zip y descomprima el paquete, verá tres carpetas (css, desarrollo-paquete y js) y un archivo index.html. El archivo index.html es una demostración de los complementos diseñados con su tema. Deberá colocar las carpetas css y js en su directorio principal y copiar / pegar el código del archivo index.html en el código de su sitio en la ubicación donde desea que aparezcan los complementos.

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/

Instrucciones De Vídeo: Working with jQuery UI Themes (Mayo 2024).