JQuery UI
conjunto de componentes para desarrollo de aplicaciones web
From Wikipedia, the free encyclopedia
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).
| jQuery UI | ||
|---|---|---|
 | ||
| Información general | ||
| Tipo de programa | Framework | |
| Desarrollador | jQuery UI Team | |
| Lanzamiento inicial | 17 de septiembre de 2007 | |
| Licencia | GPL[1] y MIT[2] | |
| Información técnica | ||
| Programado en | Javascript | |
| Versiones | ||
| Última versión estable | 1.13.2[3] (14 de julio de 2022) | |
| Última versión en pruebas | 1.12.0 Release Candidate 2[4] (21 de abril de 2016) | |
| Enlaces | ||
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
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.
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.
