JQuery UI

jQuery UI
Información general
Tipo de programa Framework
Desarrollador jQuery UI Team
Lanzamiento inicial 17 de septiembre de 2007
Licencia GPL[3]​ y MIT[4]​
Información técnica
Programado en Javascript
Versiones
Última versión estable 1.13.2[1]​ ( 14 de julio de 2022)
Última versión en pruebas 1.12.0 Release Candidate 2[2]​ ( 21 de abril de 2016)
Enlaces
[editar datos en Wikidata]

jQuery UI es una biblioteca de componentes construidos sobre la biblioteca jQuery que permiten desarrollar sobre un conjunto de plug-ins, widgets y efectos visuales preconstruidos para la creación de aplicaciones web. Cada componente o módulo se desarrolla de acuerdo a la filosofía de jQuery[5]​ (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.
  • Sizeable: Permite seleccionar el tamaño de los 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

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: 

<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" class="ui-widget-content">
    <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.[6]​

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[7]​ que permite diseñar los estilos en línea 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.

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.

Descarga personalizada de módulos

En la página oficial de jQuery UI existe una herramienta[8]​ 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

  1. ↑ «Download Builder». Consultado el 12 de marzo de 2023. 
  2. ↑ «Noticia en el blog oficial de la salida de la versión 1.12.0 Release Candidate 2». Consultado el 7 de junio de 2021. 
  3. ↑ «Licencia GPL de jQuery UI.». Archivado desde el original el 6 de julio de 2009. Consultado el 20 de julio de 2009. 
  4. ↑ «Licencia MIT de jQuery UI.». Archivado desde el original el 3 de agosto de 2009. Consultado el 20 de julio de 2009. 
  5. ↑ «Cómo funciona jQuery». Consultado el 23 de julio de 2009. 
  6. ↑ «Demostraciones y documentación de jQuery UI (inglés)». Consultado el 29 de julio de 2009. 
  7. ↑ «Herramienta ThemeRoller en la página oficial de jQuery UI para diseñar los estilos de los componentes». Consultado el 29 de julio de 2009. 
  8. ↑ «Herramienta de descarga personalizada». Consultado el 21 de julio de 2009. 

Véase también

Enlaces externos