jQuery UI es una biblioteca de componentes para el framework jQuery que le añaden un conjunto de plug-ins, widgets y efectos visuales para la creación de aplicaciones web. Cada componente o módulo se desarrolla de acuerdo a la filosofía de jQuery^[4] (find something, manipulate it: encuentra algo, manipúlalo).

Módulos

La biblioteca se divide en cuatro módulos:

Núcleo

Contiene las funciones básicas para el resto de módulos.

Interacciones

Añade comportamientos complejos a los elementos:

• Draggable: Hace al elemento arrastrable.
• Droppable: Permite que el elemento responda a elementos arrastrables.
• Resizable: Permite redimensionar el elemento.
• Selectable: Permite seleccionar entre una lista de elementos.
• Sortable: Ordena una lista de elementos.

Widgets

Es un conjunto completo de controles UI. Cada control tiene un conjunto de opciones configurables y se les pueden aplicar estilos CSS.

• Accordion: Menú con efecto acordeón.
• Dialog: Ventanas con contenido.
• Slider: Elemento para elegir en un rango de valores.
• Tabs: Pestañas.
• Datepicker: Calendario gráfico.
• Progressbar: Barra de progreso.

Efectos

Una API para añadir transiciones animadas y facilidades para interacciones.

Uso

jQuery UI se utiliza igual que cualquier otra extensión para jQuery: Sólo hay que añadir los ficheros .js a la página; primero debe aparecer la biblioteca jQuery y después el resto:

<link type="text/css" href="css/themename/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>

En la página oficial de jQuey UI existe una extensa documentación sobre cómo usar y configurar los módulos y componentes.^[5]

Personalización de los estilos y ThemeRoller

Los estilos de los componentes se pueden modificar para adaptarlos a las necesidades del usuario aunque no es una tarea trivial. Para ello, en la página oficial, existe la herramienta ThemeRoller^[6] que permite diseñar los estilos online de una manera sencilla.

Compatibilidad

Es compatible con los navegadores (y sus versiones posteriores) Internet Explorer 6.0, Mozilla Firefox 2, Safari 3.1, Opera 9.0 y Google Chrome.

Descarga personalizada de módulos

En la página oficial de jQuery UI existe una herramienta^[7] para crear una versión personalizada del fichero .js para que sólo incluya los módulos que se van a utilizar. De esta manera se optimiza el tamaño del fichero, conteniendo sólo lo necesario.

Referencias

Véase también

• jQuery
• Yahoo User Interface
• GWT

Enlaces externos

• Página Oficial de jQuery UI
• Página Oficial de jQuery
• Chuleta de referencia en HTML