Agregar JQuery UI a proyecto web

Una de las librerías bastante populares, veamos como agregar JQuery UI a proyecto web para mejorar la experiencia del usuario.

La librería JQuery tiene las funciones para manejar el DOM del sitio, sin embargo, no agrega cambios a la interfaz.

JQuery UI es una librería que trabaja junto a JQuery para dar formato a la interfaz y mejorar la interacción del usuario.

Algunas características son:

Desde la página oficial podemos descargar el comprimido de la librería, seleccionamos la última versión estable.

Aunque es posible descargar una versión en específico si el proyecto así lo requiere.

Debemos descomprimir el paquete descargado, el paquete contiene varios archivos entre css, JavaScript e imágenes.

Los archivos que copiaremos al proyecto son los que tengan terminación.min.css, .min.js y las imágenes.

Ya tenemos todos los archivos, copiamos los que comentamos con anterioridad a la carpeta del proyecto.

Como buena práctica puedes crear tres carpetas (css, js, images) para copiar ahí los archivos correspondientes.

La estructura de los archivos puede quedar como en la imagen, hasta este punto ya tienes implementado la librería de JQuery UI.

Para poder utilizar la librería debemos de colocar las referencias en los archivos HTML que lo necesitan.

En un archivo .html coloca entre las etiquetas head las referencias css y js de JQuery UI, además del script de JQuery.

Las imágenes que agregamos no se referencian directamente en los archivos HTML, estos son llamadas por los archivos ya agregados.

Por último, realicemos una prueba, agreguemos dos botones con el siguiente código HTML.

<input type="submit" value="SinJqueryUI" id="btnBoton1" >
<input type="submit" value="ConJqueryUI" id="btnBoton2" class="ui-button">

Al segundo botón agregaremos la clase “ui-button” (clase propia de JQuery UI) y el primero solo se declara.

Ejecuta el archivo HTML en el explorador, podrás ver el resultado siguiente.

Con agregar una sola clase, JQuery UI agrega los estilos al segundo botón en todos los cambios de estado.