Breve Introducción a jQuery UI

En esta entrada expondré una breve introducción a jQuery UI con el fin de situar esta librería en el ámbito de su aplicación.

Como ya vimos en otras entradas jQuery es una librería que facilita la programación en Javascript, añadiendo un grado de abstracción superior a nuestro código mediante el gran número de funciones multipropósito que incorpora. La simple llamada a una función de jQuery realiza tareas que conllevan muchas más instrucciones de JavaScript.

La bilblioteca de jQuery estándar tiene funciones para muchos propósitos, manejando elementos mediante los selectores tipo CSS u otros formatos que posee. Por tanto se trata de facilitar las tareas típicas de Javascript, de añadir funcionalidad a los tags o algunos efectos dinámicos con CSS.

Es precisamente en este último aspecto donde se centra la librería jQuery UI. Muchos de los efectos gráficos no sólo son a nivel de detalle (bordes, líneas, colores, efectos, interacción…) sino que forman estilos completos que se ven repetidos en muchas páginas Web, como clasificación en tabs, efectos de acordeón para mostrar términos y definiciones o los típicos menús desplegables de muchas páginas. Hacer este tipo de efectos de forma manual es tedioso, por lo que es de gran utilidad disponer de una librería que, por medio de unas pocas funciones, realizase esta tarea. Una de estas librerías es jQuery UI.

En la página oficial de jQuery UI puede encontrarse mucha documentación junto con la descarga de los archivos que necesitamos para utilizarlo. La mayoría de la información de esta introducción está sacada de ahí. Recomiendo especialmente la parte de demos y documentación, donde se pueden comprobar las funcionalidades online que ofrece jQuery UI.

Como sucede con la librería jQuery, con la parte de UI también necesitamos incluir un archivo de Javascript que contiene toda la funcionalidad. Como está generada sobre la librería estándar de jQuery, también es necesario incluir esta. Además, como está orientada a un nivel de abstracción superior, se muestran elementos gráficos terminados, por lo que también se necesitan hojas de estilo CSS.

Lo primero es descargar un bundle con las funcionalidades que vamos a utilizar. Este paquete contendrá los elementos que le indiquemos. Hay que tener en cuenta que cuantos más elementos soporte más espacio ocupará y por tanto más tráfico generará a la hora de la descarga. Se debe descargar en la sección http://jqueryui.com/download.

Además de los efectos se indicará la hoja de estilo que se va a emplear. Existen multitud de ellas, e incluso se pueden modificar para añadir nuestros propios efectos.

Bueno, vamos al tajo…

Generamos una página HTML donde vamos hacer el include de los tres elementos básicos: librería de jQuery estándard, librería de jQuery UI y hoja de estilos para los elementos de jQuery UI. No tiene mayor complicación:

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>

El primer ejemplo que se va a ver es incluir un calendario para la elección de una fecha en un input de un formulario.

<h1>Ejemplo de introducción de la fecha mediante un calendario</h1>
<form>
	Introduce la fecha: <input type="text" name="date" id="date" />
</form>

Hasta aquí todo normal: un formulario (sin parámetros para el ejemplo) y una caja de input text.

Para añadir la funcionalidad del calendario, utilizamos la función que se ejecuta en la carga del script de jQuery (ready):

<script type="text/javascript">
	$(document).ready(function() {
		$('#date').datepicker();
		});
</script>

Mediante el selector del id “date”, elegimos la caja de texto de input, y le aplicamos la función “datepicker”, que, al pulsar sobre ella, desplegará un calendario en la pantalla.

calendario en jQuery

Sencillo, ¿verdad? Es aquí donde está la potencia de jQuery UI. Con una simple instrucción se ha hecho una tarea gráfica compleja como es mostrar un calendario, además con el aspecto de tema que hemos elegido y un acabado profesional.

Si queremos mostrar términos y definiciones como en un diccionario; párrafos escondidos detrás de títulos o simplemente menús podemos usar el Accordion. Seguro que has visto muchos últimamente en muchas webs de reciente factura. A continuación muestro un menú de opciones con esta técnica.

El código HTML es sencillo: se crea una capa que contiene todo el conjunto con un ID. Luego se divide en títulos (con enlaces) y capas interiores que contienen la información que se despliega:

<h1>Ejemplo Acordeón</h1>
<div id="accordion">
	<h3><a href="#" class="head">Nuestra Empresa</a></h3>
	<div>
		<ul>
			<li><a href="#">Misión</a></li>
			<li><a href="#">Visión</a></li>
			<li><a href="#">Objetivos</a></li>
		</ul>
	</div>
	<h3><a href="#">Operaciones</a></h3>
	<div>
		<ul>
			<li><a href="#">Altas</a></li>
			<li><a href="#">Bajas</a></li>
			<li><a href="#">Modificaciones</a></li>
			<li><a href="#">Consultas</a></li>
		</ul>

	</div>
</div>

De nuevo, la parte de JavaScript es tremendamente sencilla utilizando los selectores de jQuery y la función de jQuery UI. Simplemente se selecciona la capa que contiene todo el acordeón y se llama a la función correspondiente, todo ello dentro de la función ready de jQuery.

$('#accordion').accordion();

El resultado es algo parecido a esto:

Las ventanas de avisos también están incluidas dentro de jQuery UI. Se trata de los típicos diálogos de los sistemas operativos gráficos que se han incorporado también a las interfaces de la Web para que la interacción sea homogénea y familiar con el ordenador. Estos diálogos tienen diferentes características, como su tamaño, que se puedan redimensionar o que sean el único foco de la página, impidiendo la interacción con otros elementos.

A continuación se muestra un botón, que al ser pulsado, muestra un diálogo. Esta vez, la llamada para crear el diálogo contiene unas características, que se pasan en formato de JSON por parámetro, es decir, pares de de atributo valor:

<h1>Ejemplo de Ventana Emergente</h1>
<div id="dialog" style="display: none;" title="Esto es el título">
	<p>Esto es un diálogo modal y no resizable</p>
</div>
<button id="botonAbrirDialogo">Lanza un diálogo</button>

Como se puede ver, la capa div “dialog” es la que contiene el diálogo. Como no queremos que aparezca al cargar la página, sino al pulsar el botón, tiene el style display puesto a none. Cuando se pulsa sobre el botón de debajo de la capa, aparecerá el diálogo, mediante el lanzamiento del evento click, tratado con jQuery:

$("#botonAbrirDialogo").click(function(){
	$("#dialog").dialog({ resizable: false},{modal:true}, {width:"15em"});
});

Como se puede ver, hemos pasado por parámetro a la función que crea el dialog los valores de no resizable, de diálogo modal (que el foco lo tenga sólo él y no se pueda interactuar con otros elementos) y un ancho de 15em. El aspecto final con el tema light es el siguiente:

Recuerda que existen muchos más widgets y efectos y que están bien documentados en http://jqueryui.com/demos/.

Como ejercicio final y sirviendo de demostración de las capacidades de cambio de visualización de los widgets que proporciona jQuery UI mediante CSS, se muestra cómo cambiar de apariencia la página mediante el cambio de una hoja de estilos a otra “al vuelo” mediante jQuery (estándar, sin UI).

Para ello, debemos bajar dos hojas de estilo en la página de descargas http://jqueryui.com/download. De los archivos bundle que descarguemos, uno lo dejaremos y en el otro buscaremos en el directorio “css” el directorio de hojas de estilo diferente. Este directorio lo copiaremos al directorio “css” del primer bundle. En mi caso tengo los directorios “css/ui-lightness/” y “css/ui-darkness/”.

El cambio de CSS se realizará pulsando sobre dos enlaces situados en la parte superior de la pantalla. Estos enlaces tendrán, en sus eventos onclick, funciones que cambian las hojas de estilo de la página:

<div>
[<a href="#" id="cambioCSS1">CSS 1</a>][<a href="#" id="cambioCSS2">CSS 2</a>]
</div>

El código de jQuery lo que hace es cambiar el atributo del tag de las hojas de estilo enlazadas en la parte superior de la página:

$("#cambioCSS1").click(function()
{
	$("link[rel=stylesheet]").attr({href : "css/ui-lightness/jquery-ui-1.8.6.custom.css"});
});

$("#cambioCSS2").click(function()
{
	$("link[rel=stylesheet]").attr({href : "css/ui-darkness/jquery-ui-1.8.6.custom.css"});
});

El efecto se puede comprobar a continuación, si se compara con la captura de pantalla anterior correspondiente al widget acordeón:

En resumen, jQuery UI es una extensión de jQuery que añade un nivel más de abstracción, y está orientado a la creación de interfaces gráficas de calidad con el mínimo esfuerzo. Está pensando para incluirlo fácilmente dentro de las páginas Web, con el menor impacto posible, y es altamente personalizable, a través de los parámetros de cada widget y de la apariencia a través de las hojas de estilo CSS.

Referencias:

Por si hay álguien interesado en el código fuente final de la página completa, es el siguiente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Pruebas de jQuery UI</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="Stylesheet" />
        <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('#date').datepicker();
                $('#accordion').accordion();

                //Abre la ventana de diálogo con configuración
                $("#botonAbrirDialogo").click(function(){
                    $("#dialog").dialog({ resizable: false},{modal:true}, {width:"15em"});
                });


                //Para cambiar las hojas de estilo
                $("#cambioCSS1").click(function()
                {
                    $("link[rel=stylesheet]").attr({href : "css/ui-lightness/jquery-ui-1.8.6.custom.css"});
                });

                $("#cambioCSS2").click(function()
                {
                    $("link[rel=stylesheet]").attr({href : "css/ui-darkness/jquery-ui-1.8.6.custom.css"});
                });

                
            });


        </script>
        <style>
            body
            {
                font-family: sans-serif;
                font-size: small;

            }

            #accordion
            {
                width: 15em ;
            }

            h1{
                font-family: sans-serif;
                font-size: medium;
            }



        </style>
    </head>
    <body>
        <div>
            [<a href="#" id="cambioCSS1">CSS 1</a>][<a href="#" id="cambioCSS2">CSS 2</a>]

        </div>
        <h1>Ejemplo de introducción de la fecha mediante un calendario</h1>
        <form>
            Introduce la fecha: <input type="text" name="date" id="date" />
        </form>

        <h1>Ejemplo Acordeón</h1>
        <div id="accordion">
            <h3><a href="#" class="head">Nuestra Empresa</a></h3>
            <div>
                <ul>
                    <li><a href="#">Misión</a></li>
                    <li><a href="#">Visión</a></li>
                    <li><a href="#">Objetivos</a></li>
                </ul>
            </div>
            <h3><a href="#">Operaciones</a></h3>
            <div>
                <ul>
                    <li><a href="#">Altas</a></li>
                    <li><a href="#">Bajas</a></li>
                    <li><a href="#">Modificaciones</a></li>
                    <li><a href="#">Consultas</a></li>
                </ul>

            </div>
        </div>
        <h1>Ejemplo de Ventana Emergente</h1>
        <div id="dialog" style="display: none;" title="Esto es el título">
            <p>Esto es un diálogo modal y no resizable</p>
        </div>
        <button id="botonAbrirDialogo">Lanza un diálogo</button>
    </body>
</html>



Anuncios

One comment

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s