Adentrémonos en jQuery UI, una biblioteca construida sobre jQuery que proporciona una colección de widgets, efectos visuales e interacciones que puedes usar para construir interfaces de usuario ricas e interactivas. jQuery UI es como el kit de herramientas para el constructor de interfaces: te ofrece componentes predefinidos y personalizables que puedes utilizar para mejorar rápidamente la experiencia de usuario de tus aplicaciones web.
jQuery UI está organizado en tres categorías principales:
Antes de poder utilizar jQuery UI, necesitas incluirlo en tu proyecto. Puedes hacerlo descargando la biblioteca desde el sitio oficial de jQuery UI y enlazando los archivos correspondientes en tu HTML, o puedes incluirlo a través de un CDN.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
A continuación, vamos a ver un ejemplo práctico donde implementamos un datepicker (selector de fecha) y un efecto de animación, todo en un solo bloque de código:
$(document).ready(function() {
// Inicializar un datepicker
$('#datepicker').datepicker({
showAnim: 'drop', // Efecto de animación para mostrar el datepicker
dateFormat: 'yy-mm-dd' // Formato de fecha
});
// Aplicar un efecto animado a un elemento
$('#btnAnimate').click(function() {
$('#animatedElement').effect('bounce', { times: 3 }, 300);
});
});
Datepicker: Utiliza el método .datepicker() de jQuery UI para convertir un campo de entrada en un selector de fechas interactivo. Se configura para usar un efecto de ‘drop’ al mostrarse y para que la fecha seleccionada tenga el formato ‘año-mes-día’.
Efecto de rebote: Al hacer clic en el botón con ID btnAnimate, el elemento con ID animatedElement mostrará un efecto de rebote. El efecto se configura para rebotar tres veces en un total de 300 milisegundos.
Los widgets interactivos de jQuery UI como el Datepicker, Slider y Dialog son herramientas excepcionales para enriquecer la interfaz de usuario y hacer que la interacción sea más intuitiva y atractiva. Vamos a ver cómo funcionan estos widgets y cómo puedes implementarlos en tu proyecto.
El Datepicker proporciona una forma fácil y rápida de permitir a los usuarios seleccionar fechas a través de una interfaz de calendario emergente.
El Slider permite a los usuarios ajustar valores numéricos arrastrando un control deslizante a lo largo de una barra, ideal para ajustar configuraciones como volumen o rango de precios.
El Dialog crea un cuadro modal que puede contener texto, imágenes o formularios, útil para solicitudes de confirmación, ingreso de información adicional o mensajes al usuario.
Aquí tienes un ejemplo que implementa estos tres widgets en un solo bloque de código, con comentarios explicativos para facilitar la comprensión:
$(document).ready(function() {
// Inicializar el Datepicker
$('#datepicker').datepicker({
showAnim: 'slide', // Efecto de animación al mostrar el calendario
dateFormat: 'yy-mm-dd' // Formato de la fecha seleccionada
});
// Inicializar el Slider
$('#slider').slider({
range: true, // Establece que el slider tiene un rango seleccionable
min: 0, // Valor mínimo
max: 100, // Valor máximo
values: [20, 80], // Valores iniciales del rango
slide: function(event, ui) {
$('#range').text(ui.values[0] + ' - ' + ui.values[1]); // Actualiza el texto mostrado con el rango seleccionado
}
});
// Inicializar el Dialog
$('#dialog').dialog({
autoOpen: false, // No abrir automáticamente al cargar
show: 'fade', // Efecto de animación al abrir
hide: 'explode', // Efecto de animación al cerrar
buttons: {
"Ok": function() {
$(this).dialog("close"); // Cierra el dialog al hacer clic en Ok
}
}
});
// Abrir el dialog al hacer clic en un botón
$('#openDialog').click(function() {
$('#dialog').dialog('open');
});
});
Datepicker: Al hacer clic en el campo con el ID datepicker, se muestra un calendario que permite al usuario elegir una fecha. La animación slide y el formato de fecha especificado mejoran la experiencia de usuario.
Slider: Configurado para seleccionar un rango entre dos valores (por ejemplo, un rango de precios). Muestra el valor del rango seleccionado en tiempo real en un elemento con el ID range.
Dialog: Configurado para abrirse cuando se hace clic en un botón con el ID openDialog. Contiene un botón «Ok» que cierra el diálogo y utiliza efectos visuales al abrir y cerrar para una interacción más dinámica.
La personalización y aplicación de temas en jQuery UI es una forma fantástica de asegurarte de que tus widgets no solo funcionan bien, sino que también se integran perfectamente con el diseño y la estética de tu sitio web. jQuery UI facilita esta tarea con un sistema de temas que puedes modificar para adaptarse a tus necesidades.
jQuery UI viene con un conjunto de temas predefinidos que puedes utilizar para cambiar la apariencia de los widgets de manera consistente en toda tu aplicación web. Además, jQuery UI ofrece un «ThemeRoller» que te permite crear tus propios temas personalizados de manera visual.
ThemeRoller es una herramienta de jQuery UI que permite a los diseñadores y desarrolladores crear temas personalizados descargando archivos CSS personalizados basados en sus propias selecciones de colores y estilos. Con esta herramienta, puedes ajustar componentes como colores de fondo, color y tamaño de fuente, bordes y sombras, y mucho más.
Vamos a ver cómo aplicar un tema y hacer ajustes básicos de personalización en un widget de jQuery UI. Aquí agruparemos todo en un solo bloque de código y explicaré cada paso en los comentarios del código:
$(document).ready(function() {
// Aplicar Datepicker con un tema personalizado
$('#datepicker').datepicker({
showAnim: 'fold',
dateFormat: 'dd/mm/yy'
});
// Inicializar un Slider con un tema y personalización específica
$('#slider').slider({
range: "min",
value: 40,
min: 0,
max: 100,
create: function() { // Evento que se dispara al crear el slider
$(this).find('.ui-slider-range').css('background', '#00FF00'); // Personaliza el color del rango
$(this).find('.ui-slider-handle').css({
'background': '#FF0000',
'border-color': '#FFFFFF'
}); // Personaliza el color y borde del control deslizante
}
});
// Aplicar un Dialog con opciones personalizadas
$('#dialog').dialog({
autoOpen: false,
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
},
create: function() { // Personalización al crear el dialog
$(this).closest('.ui-dialog').find('.ui-dialog-titlebar').css('background', '#0000FF');
} // Cambia el color de fondo de la barra de título del dialog
});
// Botón para abrir el Dialog
$('#openDialog').click(function() {
$('#dialog').dialog('open');
});
});
Datepicker Personalizado: Se aplica un efecto de animación fold y se cambia el formato de fecha, demostrando cómo puedes personalizar la funcionalidad del widget además de su apariencia.
Slider Personalizado: Este ejemplo muestra cómo personalizar la apariencia del Slider durante su creación, cambiando el color del rango y del control deslizante. Estos estilos se aplican directamente mediante jQuery, lo que ilustra cómo puedes hacer ajustes finos más allá del tema aplicado.
Dialog Personalizado: Al crear el Dialog, se personaliza la barra de título. Esto es útil para hacer que el diálogo se destaque o se ajuste a un esquema de color específico.
