JQuery UI, efectos, animaciones y widgets para páginas web

En esta página compartimos información sobre JQuery UI, una útil herramienta que podemos emplear en nuestras páginas sin ser un programador, solo dedicando un poco de nuestro tiempo.
Este articulo lo publicamos después de uno anterior dedicado a JQuery, la librería que inspiró a varios desarrolladores a crear una adicional, que se apoya en esta para funcionar y que incluye funcionalidades adicionales:JQuery, ejemplos prácticos para usar en páginas web
Como el anterior va dedicado a aficionados, por lo que no es un manual completo, solo se tratan cuestiones elementales.

¿Qué es JQuery UI y para qué usarla?

JQuery UI es una librería de JavaScript que permite agregarle varios efectos a las páginas web de un blog o sitio web y hacerlas más bellas e interactivas.
Es una extensión de JQuery, a la que se le ha incluido funciones y efectos adicionales.
Para usar JQuery UI es necesario cargar el archivo JS de JQuery y a continuación el JS de la librería.
Si deseamos usar alguno de los widgets que incluye, necesitamos cargar también el archivo de estilo CSS. Más abajo explicamos todo de forma mas detallada.

Ejemplos de efectos y widgets que ofrece JQuery UI

Suponemos que los que leen este articulo ya leyeron el dedicado a JQuery, por lo que omitiremos aspectos como la sintaxis, la que es igual, para abreviar.
Mostramos ejemplos de varios efectos que proporciona esta librería y algunos widgets que se pueden insertar.
Como en el artículo anterior se puede descargar el archivo JS, que contiene todas las instrucciones usas en esta página, ver el código, analizarlo y comprender cada función.

---

Interacciones de JQuery UI

JQuery proporciona varios métodos que nos permiten interaccionar con el contenido de una página, que son:
En el siguiente bloque usamos los métodos draggable y resizable para poder moverlo y arrastrarlo en la página y al mismo tiempo poder cambiar su tamaño al situar el cursor del ratón en la esquina inferior derecha y usar la flecha.
¡Pruébalo!

Efectos de JQuery UI

La librería incluye varios efectos que se pueden emplear para agregar dinamismo al contenido de las páginas.
Son los siguientes: Explode, Drop, Clip, Puff, Blind, Fold, Highlight, Pulsate, Fade, Bounce, Drop, Scale, Shake, Size, Slide y Transfer.
Para probarlos todos usa el botón, se reproducen en el orden que se mencionan.
Probar efectos

Widgets de JQuery UI

Los Widgets son elementos con una interface agradable y funcional que podemos agregar a nuestras páginas de forma sencilla.
Otros son más complejos y vistosos.
A continuación mostramos solo algunos de ellos.

Acordeón

Este es uno de los widgets de JQuery UI más populares.
Permite mostrar contenido relacionado en forma de filas, que se expanden al dar clic en ellas.
En el siguiente ejemplo mostramos un widget que solo posee tres filas.

Pestañas

Funciona algo parecido al widget anterior, pero con una estructura diferente.
Similar a un fichero tradicional, con las pestañas encima, las que al dar clic permiten visualizar cada una de las carpetas.

Calendario

¿Desde dónde descargar o cargar JQuery UI?

JQuery UI se usa de forma diferente a JQuery.
Debido a las funcionalidades que incluye, es una librería mucho más grande, su versión minimizada pesa más de 300 KB, lo que es excesivo.
Por esa razón podemos armar un archivo JS personalizado o custom en la página de descargas del sitio en: http://jqueryui.com//
Solo necesitamos activar o desactivar usando casillas las funciones que necesitamos y a continuación descargar el paquete, que incluye entre otros archivos, la versión normal comentada, la minimizada y el archivo CSS con los elementos que vamos a emplear.
No obstante los que deseen cargar desde el CDN la versión completa, pueden usar el siguiente enlace: https://code.jquery.com/ui/1.12.1/jquery-ui.min.js