Ya hemos visto algunas de las funcionalidades más importantes JQuery. En este artículo voy a exponer algunas de las peculiaridades del proyecto JQuery UI (User Interface). Para lo cual necesitaremos, además de la librería JQuery, un archivo .css con los estilos y la propia librería de JQueryUI.

Podemos descargar la librería JQueryUI de jqueryui.com

De tal manera que las cabeceras quedarían de esta manera:

JQuery UI

JQueryUI es un proyecto de JQuery cuyo objetivo es factilitarnos la vida a la hora de tener que trabajar con la interfaz de usuario. Como he dicho en algún artículo, uno de los problemas principales del Modelo Web “Clásico” es la poca comunicación con el usuario. Por lo tanto JQuery nos va a permitir crear cuadros de diálogo, barras de progreso, selectores de fecha…

Añadiendo JQuery UI a un formulario

Para este ejemplo vamos a tomar este formulario como base y lo vamos a ir modificando. Vamos a suponer un formulario en el cual podemos registrar un candidato para un puesto de trabajo.

Vamos a modificar lo siguiente en este formulario:

  • Añadiremos un tooltip al campo “Fecha de Nacimiento” para especificar el formato que queremos.
  • Añadiremos un selector de fecha al campo “Fecha de Nacimiento
  • Añadiremos un autocompletado al campo “Lenguajes
  • Añadiremos un slider al rango de “Sueldo solicitado

JQuery UI: Tooltip

El tooltip permite explicar el significado de un elemento cuando el usuario se sitúe en dicho elemento. Lo que vamos a hacer ahora es especificar un tooltip al campo “Fecha de Nacimiento“.

Para ello, es necesario especificar qué parte del documento HTML puede funcionar con tooltips:

$(document).tooltip();

A partir de aquí sólo es necesario establecer el atributo “title” en los elementos en los que queramos que aparezca el tooltip:

<input type=”text” name=”fnacimiento” id=”fnacimiento” title=”El formado de la fecha ha ser dd/MM/yy”>

El resultado sería, al pasar el ratón por encima del campo, algo parecido a esto:

JQuery UI: Datepicker

El datepicker permite establecer un selector de fecha en un campo de texto. En nuestro caso vamos a establecer un datepicker al campo “Fecha de Nacimiento“, indicándole el formato de la fecha que buscamos.

$(“#fnacimiento”).datepicker({
dateFormat: ‘dd/mm/yy’
});

Al situar el foco en el campo, aparecerá un selector de fecha:

JQuery UI: Autocomplete

El autocomplete permite que un campo sugiera opciones a la hora de escribir sobre él. El autocomplete admite una opción llamada “source” que recibe una colección de elementos en JSON. En este caso crearemos las opciones a mano, pero se podrían recuperar mediante AJAX.

var lenguajes=[
“Java”,
“PHP”,
“C# .NET”,
“C++”,
“Visual Basic”
];
$(“#lenguajes”).autocomplete({
source: lenguajes
});

Al empezar a escribir sobre el campo “lenguajes“, debería empezar a sugerirnos los Lenguajes que contengan el texto escrito

JQuery UI: Slider

Con el Slider podemos establecer valores numéricos mediante una barra. Puede tener un único valor o gestionar un rango. En nuestro caso vamos a gestionar un rango, el de los campos de Sueldo. Para ello, lo primero que hemos de hacer es crear un <div> en el lugar donde esté ubicado el slider.

<p>
<label>Sueldo Solicitado:</label>
Min:
<input type=”text” name=”sueldoMin” id=”sueldoMin”>
&nbsp;&nbsp;Max:
<input type=”text” name=”sueldoMax” id=”sueldoMax”>
<div id=”rango”></div>
</p>

Una vez tengamos el div correspondiente, se ha de establecer que será un rango y qué se debe hacer cuando se modifiquen los valores. En nuestro caso, cambiarán los valores de “sueldoMin” y “sueldoMax

$(“#rango”).slider({
range: true,
min:600,
max:3000,
values: [800,1200],
slide: function(event,ui){
$(“#sueldoMin”).val(ui.values[0]);
$(“#sueldoMax”).val(ui.values[1]);
}
});

Con esto ya hemos visto para qué nos puede servir JQuery UI. Como habéis podido comprobar, se trata de un proyecto orientado a la interfaz de usuario. El código completo sería este:

En la propia documentación de JQuery UI podréis ampliar lo que hemos visto aquí y ver más opciones de uso.

¡Hasta la próxima!

Rupert.