Primeros pasos con jQuery UI

  • Por
Guía para comenzar jQuery UI, una librería de componentes listos para usar en páginas dinámicas del cliente, creada a partir del framework Javascript jQuery.
jQuery UI es un complemento que permite implementar componentes diversos para generar interfaces de usuario en páginas web, además de otras funcionalidades básicas para crear aplicaciones web enriquecidas. Como su propio nombre indica, está basado en el popular framework Javascript y podemos encontrar links, explicaciones, así como demos y descargas a partir del sitio web oficial de jQuery.

En DesarrolloWeb.com desde hace meses venimos explicando con detalle todo lo que los desarrolladores debe saber para utilizar jQuery y así realizar páginas enriquecidas en el cliente. Todo lo tenemos en el Manual de jQuery y además recientemente hemos publicado un Taller de jQuery con ejemplos prácticos sobre la realización de plugins con este framework y la utilización de componentes de terceros. Entre los scripts jQuery listos para usar que existen en Internet debemos de comenzar por los proporcionados en jQuery UI, ya que es la distribución oficial de componentes para la creación de interfaces de usuario avanzadas.

Así que comenzaremos publicando una serie de pasos iniciales necesarios para comenzar a usar jQuery UI en nuestras páginas web. Más tarde comenzaremos a implementar funcionalidades y componentes avanzados que nos proporcionan estas librerías. Esta guía está basada en las propias explicaciones que se encuentran en el sitio de jQuery UI.

Revisar los demos de jQuery UI

Podemos empezar por observar la cantidad de funcionalidades listas para usar, así como componentes (widgets) para implementar interfaces de usuario. Todo esto lo encontramos en la página de demos de jQuery UI.

Quizás lo más interesante en la página de demos son los denominados widgets, donde podremos encontrar ejemplos de uso de estas librerías para crear los típicos menús "acordeón", calendarios para seleccionar fechas, ventanas de diálogo, interfaces de pestañas, etc.

Escoger los componentes en la página de descarga

Para comenzar realmente a usar jQuery UI necesitamos descargar las librerías, pero cabe decir que este sistema es bastante amplio, por lo que igual nos interesa descargar sólo una parte, para que no resulte demasiado pesado para las personas que visiten nuestro sitio web. Lo bueno es que la página de descargas de jQuery UI tiene un sistema para poder seleccionar sólo aquellos componentes que deseamos utilizar en nuestro sitio, con lo que la descarga se puede optimizar para únicamente contener aquellas cosas que realmente van a ser necesarias en nuestro sitio.

Podemos acceder a la página de descargas en: http://jqueryui.com/download

Componentes:
Aquí podemos seleccionar/deseleccionar los checkbox de cada uno de los componentes que forman parte de jQuery UI. Algunos tienen dependencias con otros, por lo que observaremos que, al seleccionar algunos componentes, automáticamente se seleccionan sus dependencias.

Aparte de los componentes a descargar, tenemos un par de cosas adicionales que marcar antes de la descarga.

Temas (Themes):
Por una parte tenemos que seleccionar el tema o aspecto que van a tener las interfaces de usuario de jQuery UI. Tenemos decenas de temas ya creados por el propio equipo de las librerías, con aspectos que varían bastante, sobretodo cromáticamente. Además, existe un generador de temas, que podemos utilizar para personalizar aun más el aspecto de las interfaces de usuario. El objetivo es que los menús y demás de este sistema tengan un aspecto que se integre bien con el diseño de nuestra página web.

Versión:
También tendremos que escoger la versión de jQueryUI que queremos utilizar, sabiendo que cada versión está preparada para funcionar con una versión del framework. En el momento de escribir este artículo existen dos versiones de jQuery UI que podemos seleccionar. La versión más moderna es la 1.8.1, que funciona sobre jQuery 1.4+ y la versión 1.7.3, más antigua, que funciona sobre jQuery 1.3.2.

Por último podemos apretar el botón de download para descargar un zip con todo lo que necesitaremos para usar jQueryUI.

Contenido de la descarga de jQueryUI

Una vez descargado nuestro paquete de jQuery UI obtendremos un archivo comprimido con diversos directorios y archivos, que tiene las siguientes carpetas principales:

Carpeta "css": En esta carpeta se encuentra el CSS y las imágenes para generar el tema o los temas escogidos. Realmente no tenemos por qué tocar esta carpeta en principio para nada, pero contiene cosas que serán fundamentales para que todo se muestre como deseamos.

Carpeta "development-bundle": Esta carpeta contiene una serie de materiales útiles para los desarrolladores que van a utilizar estas librerías. Veremos aquí páginas de documentación, ejemplos de uso y otras cosas interesantes. Nada de lo que hay aquí es necesario en principio para hacer funcionar los componentes jQuery UI, pero son materiales que podrán venirnos bien para aprender.

Carpeta "js": Aquí veremos los scripts Javascript de jQuery y jQuery UI necesarios para que todos los componentes funcionen. Esta carpeta contiene el archivo Javascript con el código de los componentes que habíamos seleccionado al hacer la descarga, además del archivo Javascript con el código de la versión del framework que funciona bien con las librerías.

Con el zip de descarga podremos ya comenzar a implementar alguno de los componentes de jQueryUI.

Ahora pasaremos a la práctica, mostrando cómo hacer una página web que utilice uno de los componentes disponibles en jQuery UI, que es el Datepicker o seleccionador de fecha por medio de un calendario.

Empezar a usar jQuery UI en una página web

Ahora que ya tenemos todo lo que nos hace falta para hacer nuestro primer ejemplo con jQuery UI, vamos a ponernos manos a la obra. En este paso vamos a crear un archivo de ejemplo en el que usaremos las funcionalidades del calendario para seleccionar una fecha.

Todos los materiales de la descarga los debemos copiar en el directorio de nuestro sitio web. Así que tendremos que tener en cuenta el lugar donde hemos dejado las carpetas que descargamos, principalmente las que son necesarias para que todo funcione "css" y "js".

El ejemplo que voy a realizar lo he colocado en una carpeta donde tengo los subdirectorios descargados de jQuery UI "css" y "js". Si en vuestro caso la estructura de carpetas es diferente, deberéis tener en cuenta la ruta desde este archivo de ejemplo hacia el archivo donde se encuentran las librerías jQuery UI y la hoja de estilos necesaria para definir el aspecto de los componentes, según el tema que hayamos seleccionado.

Como primer paso incluiremos el código siguiente:

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

La primera línea corresponde a un link con la hoja de estilos que queremos utilizar para el look & feel de las interfaces de usuario. En mi caso estoy utilizando el tema que se llama "le-frog", que tiene un bonito color verde. La segunda línea corresponde con la inclusión del código Javascript del framework jQuery. Por último, la tercera es el código de los componentes descargados de jQuery UI.

Nota: Estas tres líneas tendremos que editarlas para indicar correctamente las rutas para acceder al tema CSS que deseamos implementar, así como para acceder a los archivos con el código Javascript jQuery y jQueryUI.

Invocar los métodos para generar las interfaces de usuario

Ahora que ya tenemos incluidos los archivos para poder usar jQuery UI ya sólo nos queda crear el Javascript necesario para que los componentes se generen en la página, así como configurarlos para que se comporten como nosotros necesitemos. De momento vamos a ver un ejemplo sencillo, en el que realizaremos un campo de texto para escribir una fecha. Al pulsar el campo de texto se mostrará un calendario para poder seleccionar la fecha que queramos. Este comportamiento está implementado por el componente llamado "Datepicker".

Para conseguir esto necesitamos crear un campo de texto, con la correspondiente etiqueta INPUT, colocada en el lugar donde deseemos que ese campo aparezca.

<input type="text" name="fecha" id="campofecha">

Fijémonos en el atributo "id" de este campo, que necesitaremos utilizar ahora al hacer el código Javascript necesario para convertirlo en un campo "Datepicker", que es el siguiente:

$("#campofecha").datepicker();

Esto es una llamada al método datepicker() sobre el objeto jQuery seleccionado por el identificador campofecha. Con eso hacemos que ese campo de texto se convierta en un seleccionador de fechas. Eso es todo!! con esa línea de código conseguimos toda la funcionalidad buscada!!

Quizás pueda sorprender lo sencillo y cómodo de usar de jQuery UI, pero claro que además los componentes tendrán varias maneras de configurarse para adaptarse a las necesidades más particulares, pero eso es algo que veremos en próximos artículos.

De momento, antes de acabar, colocamos aquí el código de una página completa donde estamos usando el componente Datepicker de jQuery UI:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Seleccionar fecha con jQuery UI</title>
   <link type="text/css" href="css/le-frog/jquery-ui-1.8.1.custom.css" rel="Stylesheet" />   
   <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script>
$(document).ready(function(){
   $("#campofecha").datepicker();
})
</script>
</head>
<body>

<form>
   Fecha: <input type="text" name="fecha" id="campofecha">
</form>
   
</body>
</html>

Para los interesados, dejamos el link para que puedan ver el ejemplo en funcionamiento.

En el próximo artículo vamos a explicar cómo configurar este componente para alterar un poco su modo de funcionamiento y hacer que los meses, así como el formato de fecha, estén en español.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Juan Lucas

01/12/2010
jQuery UI es una pasada!
Soy un admirador de jQuery. Se pueden hacer los mejores componentes Javascript imaginables!! sin duda!!

Gracias por esta información de jQuery UI... lo probaré, porque me llama mucho la atención.

jqueryUI user

15/2/2011
jQueryUI y framework css
Lo comentan de pasada, pero creo que una de las ventajas más interesantes de jQueryUI es que tiene una serie de temas de diseño que se pueden personalizar (o descargar varios de ellos ya creados), lo que nos ofrecería unas interfaces de usuario cojonudas para nuestras webs. Esto es algo parecido a lo que se podría llamar un Framework CSS.

Ochi

29/3/2011
sobre jqueri ui, algunas dudas
hola, y darte las gracias por publicar estos manuales ,q nos ayudan mucho.
Estoy aprendiendo jquery UI, lo veo interesante, pero los e estado probando pero hay algo q no me sale bien aun, es que cuando los implemento a mi web, los temas (un ejemplo el de Calendario) salen muy grandes, y eso q ya lo he personalizado en la misma web(escogi el color negro y encima los dias de la semana no se ve , ya q salen negras, y eso que cuando lo personalizé lo puse blanco) , osea como q no se ve muy vistoso , opte por acerlo manualmente pero la verdad no le entiendo mucho su codigo css ( creo q aqui en en sus articulos de jqueri UI solo se basa en su JS ), eh tratado de buscar en en internet si enseñan a editarlo a lo q uno kiere pero asta no he encontrado, ESPERO , QUE SI TIENE TIEMPO , NOS ENSEÑE CON UN VIDEO SOBRE COMO PERSONALIZARLO MANUALMENTE EL CSS (O POR SU MISMA PAGINA PERO Q FUINCIONE DESDE AHI ) , PQ ME GUSTARIA IMPLEMENTARLOS EN MIWEB YA Q MEJORA EL DISEÑO , SALUDOS DESDE PERU. Y GRACIAS DE ANTEMANO.

Raton Juan Carlos

14/11/2011
Excelente
Soy nuevo en todo esto y siempre me salvan.
Muy bueno!!!!!
Gracias!!!!!!!!!

Andres

31/12/2011
temas muy grandes
respecto al comentario anterior a mi tambien me salian los temas muy grandes, para corregir esto le cambien en el font size de 1.1em a 10px y se resolvió

edguardini

04/1/2012
comportamiento
Muy interesante el tema, muchas gracias por el aporte, ahora lo estoy probando y no se si será Win 7 64 Bits o que, pero en Firefox no funciona el ejemplo, en cambio en Chrome e IE funciona pero con fondo transparente, alguna idea ?

Raul_Vazquez

25/8/2013
No puedo usar JQuery
No me funcionan las librerias de jquery, que puede ser?

Charly

19/10/2013
duda
mi pregunta es si sabes que componentes se necesitan para que en una página que entro con un acceso directo o link, me muestre la ruta de opciones en un acordeón.

espero ser explicito para que me ayudes con una respuesta.

saludos

luz villavicencio

05/11/2013
personalizar codigo del css y del js .
Hola quisiera saber como puedo modificar los códigos del estilo y del js de acuerdo a mis requerimientos donde encuentro la ruta del archivo??..

Alex

08/7/2014
Ayuda
Tengo un problema!!! cuando seleccionas la fecha en el textfield se muestra 06/05/2014, sin embargo este formato no lo reconoce mi gestor de base de datos... el formato que acepta es 2014/05/06... que es lo que tengo que modificar para cambiar eso?