norfipc.com
Códigos   Mapa del sitio   Informatica
NorfiPC » Códigos » JQuery UI

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


Actualizado: 26 de enero del 2023
Por: Norfi Carrodeguas
Como usar esta librería de JavaScript, para adornar, embellecer y agregar interacción a las páginas de un blog o sitio web. Ejemplos prácticos y código para copiar y pegar.
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:
- Draggable. Permite arrastrar elementos.
- Droppable
- Resizable. Permite cambiar las dimensiones de un elemento.
- Selectable. Permite seleccionar un grupo de elementos con el ratón.
- Sortable. Los muestra en una lista para poder seleccionarlos.
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!
¡Arrástrame y cámbiame de tamaño!


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.
Efectos de JQuery UI: Explode, Drop, Clip, Puff, Blind, Fold, Highlight, Pulsate y Fade



Widgets de JQuery UI


Los Widgets son elementos con una interface agradable y funcional que podemos agregar a nuestras páginas de forma sencilla.
Algunos son sencillos pero útiles, como los Tooltips. Son los pequeños cuadros que se muestran al situar el cursor del ratón encima de una palabra subrayada.
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.

Primera fila

Contenido de la primera fila del widget que usa el efecto acordeón, abierta de forma predeterminada.

Segunda fila

Contenido de la segunda fila. Solo se ve al dar clic en su encabezado

Tercera fila

Contenido de la tercera fila.


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.
Contenido de la primera pestaña, abierta de forma predeterminada.
Contenido de la segunda pestaña.
Contenido de la tercera pestaña.

Calendario

Mas información sobre JQuery

En otro artículo de nuestro sitio se pueden conocer y consultar todos los selectores, eventos, métodos para efectos, para Ajax y los que permiten manipular HTML y CSS, con JQuery, los que también se aplican lógicamente a JQuery UI: JQuery, todos los selectores, eventos, métodos y funciones


¿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/download/
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

Páginas relacionadas



Sobre el autor:

Norfi Carrodeguas es el fundador y webmaster del sitio web Norfipc, creado en el año 2010. Norfi es un ingeniero informático y desarrollador web cubano. Con más de 14 años de experiencia en la publicación en internet, comparte su tiempo con su consultoría SEO. Más información sobre el autor.

Comparta esta página
Facebook
Twitter

Sígueme en las redes sociales


Norfipc en Facebook Norfipc en Twitter Canales RSS con las últimas publicaciones

 
Inicio | Mapa del sitio | Buscar | Sobre mí