JQuery UI

Amigos de mi blog, regularmente en mis trabajos incluyo una biblioteca que quiero compartir con Uds., se trata de jQuery UI, es una biblioteca de componentes para el framework jQuery (biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web) 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.

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.
  • Autocomplete: Caja con autocompletado.
  • Button: Botó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.

  • Core: Amplía los efectos de jQuery incluyendo morphing, requerido por el resto de efectos.
  • Blind
  • Bounce
  • Clip
  • Drop
  • Explode
  • Fade
  • Fold
  • Highlight
  • Pulsate
  • Scale
  • Shake
  • Slide
  • Transfer
  • ashgahs

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:

<script type=”text/javascript” src=”js/jquery-1.7.min.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.7.1.custom.min.js”></script>

Código JavaScript para aplicar los efectos:

// Aplicar el efecto Draggable al elemento con id “draggable” al cargar la página
$(document).ready(function(){
    $(“#draggable”).draggable();
});

Código en el body del documento:

<div id=”draggable”>
    <p>¡Arrástrame!</p>
</div>

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

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 que permite diseñar los estilos online de una manera sencilla.

Compatibilidad

jQuery

Existen dos versiones de la biblioteca para trabajar con jQuery:

  • Estable: para jQuery versión 1.6 o superior.
  • Legacy: para jQuery versión 1.3.2 o superior.

Navegadores

Es compatible con los navegadores (y sus versiones posteriores) Internet Explorer 6.0, Mozilla Firefox 3, Safari 3.1, Ópera 9.6 y Google Chrome.

En próximas entradas voy a empezar a publicar algunos ejemplos de usos de esta poderosa biblioteca, por ahora pueden descargar la biblioteca.

Descargar-300x100

Saludos y mucha suerte…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *