Universal AJAX Live Search

Power Up!! Guía rápida para comenzar a usar jQuery UI

En éste artículo veremos qué es  y cómo comenzar a usar jQuery UI, una poderosa librería basada en jQuery,  para generar fácilmente interacciones, efectos y widgets a nuestras páginas web.

jQuery UI es una librería de componentes e interacciones para aplicaciones web, que como su nombre lo indica, está basado en el framework jQuery de JavaScript.


Nos permite la integración de Widgets, Interacciones, Efectos visuales y algunas Utilidades extra  que enriquecen enormemente la forma en que los usuarios perciben y utilizan la interfaz de una página web.

 

Logo jQuery UI

 

Interacciones


Las Interacciones añaden a cualquier elemento en una página web comportamientos específicos basados en movimientos de mouse, es posible crear elementos arrastrables, escalables, entre otros, con tan sólo unas cuántas líneas de código.


Widgets


Un widget (o control) es un elemento de una interfaz (interfaz gráfica de usuario o GUI) que muestra información con la cual el usuario puede interactuar. Por ejemplo: ventanas, cajas de texto, checkboxs, listbox, entre otros, además de que son altamente personalizables visual y funcionalmente.


Efectos


Ésta funcionalidad añade a una página web la capacidad de animar colores, ligar dinámicamente estilos CSS y crear transiciones, así como también la posibilidad de personalizar la velocidad, duración  y estilo de los movimientos , lo cuál es sumamente útil cuándo, por ejemplo, queremos ocultar y mostrar elementos, el único límite es nuestra creatividad.


Galería de Demos de jQuery UI


Una buena forma de comenzar es explorando la galería de Demos donde se pueden encontrar ejemplos de los widgets y funcionalidades listas para implementar que se mencionaron anteriormente, así como ejemplos de cómo estructurar el código HTML para cada caso. El acceso oficial a la galería de Demos se encuentra aquí

Personalización de Descarga


Una vez estando en la página de descargas, tendemos que elegir  primeramente la versión de jQuery UI que queremos utilizar, sabiendo que cada una está diseñada para funcionar con una versión del framework jQuery.

En seguida, podemos elegir si descargar todo el paquete de complementos o sólo alguno o algunos en específico para evitar a los usuarios un peso adicional en el código. Algunos tienen dependencias con otros, por lo que se seleccionarán automáticamente.

jQuery UI Custom

Tema


Por último, antes de completar la descarga, tenemos que seleccionar el tema o aspecto que van a tener las interfaces de usuario de jQuery UI. Existen varias opciones previamente diseñadas, aunque adicionalmente está la opción de crear un tema personalizado que se integre mejor con el estilo de nuestra página web.

jQuery UI Tema

jQuery UI Theme Roller

Ahora podemos descargar el archivo .zip con todo lo que necesitamos para implementar jQuery UI en nuestro proyecto.

Se puede acceder a la página de descargas aquí.

Implementación de jQuery UI

Una vez descargado el archivo .zip observaremos que contiene los siguientes archivos:

Carpeta "css": En esta carpeta se encuentra la hoja de estilos CSS e imágenes para generar el tema elegido  o personalizado.

Carpeta "development-bundle": Contiene una serie de materiales útiles para los desarrolladores que van a utilizar estas librerías. No necesitamos nada de esta carpeta si sólo queremos implementar funcionalidades.

Carpeta "js": Aquí veremos los scripts Javascript de jQuery y jQuery UI necesarios para que todos los componentes funcionen.

Por útlimo veremos un pequeño ejemplo dónde implementaremos el widget Accordion que permite desplegar una cantidad grande de contenido en un espacio reducido.

Como primer paso incluiremos el código siguiente en nuestra página HTML para enlazar la librería jQuery UI, el framework jQuery y la hoja de estilos correspondiente a nuestro tema gráfico, nótese que la ruta de los archivos debe corresponder a la estructura de carpetas específica de su proyecto:

<link type="text/css" href="/includes/css/jquery-ui-1.8.1.custom.css" rel="Stylesheet" />      
<script type="text/javascript" src="/includes/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.1.custom.min.js"></script>

Una vez enlazados estos archivos, sólo queda revisar la estructura requerida en HTML para que el widget funcione y llamar la función que lo generará en nuestra página dentro de un script localizado en la sección “header”, todos los widgets vienen con el ejemplo de la estructura HTML necesaria para su correcta implementación, en el caso de Accordion, es la siguiente:

Notemos que se crea un contendor principal con el ID”accordion” sobre el que se ejecutará la función mencionda en el “header de nuestra página” , dentro de este contenedor se ubicarán cuatro contenedores más cuyo título está representado por una etiqueta <h3> destinada a crear el título de cada pestaña y su contenido dentro de una etiqueta <p>:

 <!doctype html>  
 <html lang="en">  
 <head>  
  <meta charset="utf-8">  
  <title>jQuery UI Accordion - Default functionality</title>  
  <link rel="stylesheet"href="/"http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">  
  <script src="/"http://code.jquery.com/jquery-1.10.2.js"></script>  
  <script src="/"http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  <script>  
  $(function() {  
   $( "#accordion" ).accordion();  
  });  
  </script>  
 </head>  
 <body>  
 <div id="accordion">  
  <h3>Section 1</h3>  
  <div>  
   <p>  
   Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integerut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sitamet, nunc.  
   </p>  
  </div>  
  <h3>Section 2</h3>  
  <div>  
   <p>  
   Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet  
   purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo.  
   </p>  
  </div>  
  <h3>Section 3</h3>  
  <div>  
   <p>  
   Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper.  
   </p>  
  </div>  
  <h3>Section 4</h3>  
  <div>  
   <p>  
   Cras dictum. Pellentesque habitant morbi tristique senectus et netus  
   et malesuada fames ac turpis egestas.  
   </p>  
  </div>  
 </div>  
 </body>  
 </html>  

 Una muestra del ejemplo realizado, pueden descargar el código fuente aquí.

Como hemos visto, jQuery es una gran herramienta si lo que buscan es agregar un Plus visual y funcionalmente a sus proyectos web de manera fácil y con libertad creativa, espero éste artículo haya sido de su agrado, nos leemos el próximo lunes!

Recuerden que compartir conocimientos y buenas prácticas es hacer del internet un lugar mejor ☺

Zae Vega. Diseñadora Web, Amante del café, Usabilidad y Front-End.
Dudas o comentario? Encuéntrame en twitter como @ZaeVega