jQuery UI
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[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 | ||
Módulos editar
La biblioteca se divide en cuatro módulos:
Núcleo editar
Contiene las funciones básicas para el resto de módulos.
Interacciones editar
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 editar
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 editar
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 editar
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 editar
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 editar
jQuery editar
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.
editar
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 editar
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 editar
- ↑ «Download Builder». Consultado el 12 de marzo de 2023.
- ↑ «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.
- ↑ «Licencia GPL de jQuery UI.». Archivado desde el original el 6 de julio de 2009. Consultado el 20 de julio de 2009.
- ↑ «Licencia MIT de jQuery UI.». Archivado desde el original el 3 de agosto de 2009. Consultado el 20 de julio de 2009.
- ↑ «Cómo funciona jQuery». Consultado el 23 de julio de 2009.
- ↑ «Demostraciones y documentación de jQuery UI (inglés)». Consultado el 29 de julio de 2009.
- ↑ «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.
- ↑ «Herramienta de descarga personalizada». Consultado el 21 de julio de 2009.
Véase también editar
Enlaces externos editar
Datos: Q285960
