Edición de «JQuery UI»

{{título minúscula}}
{{Ficha de software
| nombre                      = jQuery UI
| logo                        = 
| captura                     = 
| pie                         = 
| autor                       = 
| desarrollador               = jQuery UI Team
| última_versión              = 1.13.2<ref>{{Cita web
 | url = https://jqueryui.com/download/
 | título = Download Builder
 | fechaacceso = 12 de Marzo de 2023
}}</ref>
| fecha_última_versión        = 14 de julio de 2022
| última_versión_prueba       = 1.12.0 Release Candidate 2<ref>{{Cita web
 | url = https://blog.jqueryui.com/2016/04/jquery-ui-1-12-0-release-candidate-2/
 | título = Noticia en el blog oficial de la salida de la versión 1.12.0 Release Candidate 2
 | fechaacceso = 07 de junio de 2021
}}</ref>
| fecha_última_versión_prueba = 21 de abril de 2016
| lenguaje_programación       = [[Javascript]]
| sistema_operativo           = 
| género                      = [[Framework]]
| licencia                    = [[GNU General Public License|GPL]]<ref>
{{Cita web
 | url = http://jquery-ui.googlecode.com/svn/tags/latest/GPL-LICENSE.txt
 | título = Licencia GPL de jQuery UI.
 | fechaacceso = 20 de julio de 2009
 | urlarchivo = https://web.archive.org/web/20090706061457/http://jquery-ui.googlecode.com/svn/tags/latest/GPL-LICENSE.txt
 | fechaarchivo = 6 de julio de 2009
 }}
</ref> y [[Licencia MIT|MIT]]<ref>
{{Cita web
 | url = http://jquery-ui.googlecode.com/svn/tags/latest/MIT-LICENSE.txt
 | título = Licencia MIT de jQuery UI.
 | fechaacceso = 20 de julio de 2009
 | urlarchivo = https://web.archive.org/web/20090803113147/http://jquery-ui.googlecode.com/svn/tags/latest/MIT-LICENSE.txt
 | fechaarchivo = 3 de agosto de 2009
 }}
</ref>
| sitio_web                   = https://jqueryui.com/
| idiomas                     = 
| español                     = 
}}

'''jQuery UI''' es una [[Biblioteca (informática)|biblioteca]] de componentes construidos sobre la biblioteca [[jQuery]] que permiten desarrollar sobre un conjunto de [[Complemento (informática)|plug-ins]], [[widget]]s 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<ref>{{Cita web
 | url = http://docs.jquery.com/How_jQuery_Works
 | título = Cómo funciona jQuery
 | fechaacceso = 23 de julio de 2009
}}</ref> (''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 [[Hojas de estilo en cascada|CSS]].
* '''Accordion:''' menú con efecto acordeón.
* '''Autocomplete:''' caja con autocompletado.
* '''Button:''' botón.
* '''Dialog:''' [[Ventana (informática)|ventanas]] con contenido.
* '''Slider:''' elemento para elegir en un rango de valores.
* '''Tabs:''' [[Pestaña (informática)|pestañas]].
* '''Datepicker:''' [[calendario]] gráfico.
* '''Progressbar:''' [[barra de progreso]].

=== Efectos ===
Una [[Interfaz de programación de aplicaciones|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 <code>.js</code> a la página; primero debe aparecer la biblioteca jQuery y después el resto:

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

Código JavaScript para aplicar los efectos:

<syntaxhighlight lang="javascript">
// Aplicar el efecto Draggable al elemento con id "draggable" al cargar la página
$(document).ready(function(){
    $("#draggable").draggable();
});
</syntaxhighlight>

Código en el <code>body</code> del documento:

<syntaxhighlight lang="html">
<div id="draggable" class="ui-widget-content">
    <p>¡Arrástrame!</p>
</div>
</syntaxhighlight>

En la [http://jqueryui.com/ página oficial] de jQuery UI existe una extensa documentación sobre cómo usar y configurar los módulos y componentes.<ref>{{Cita web
 | url = http://jqueryui.com/demos/
 | título = Demostraciones y documentación de jQuery UI (inglés)
 | fechaacceso = 29 de julio de 2009
}}</ref>

== 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''<ref>{{Cita web
 | url = http://jqueryui.com/themeroller/
 | título = Herramienta ThemeRoller en la página oficial de jQuery UI para diseñar los estilos de los componentes
 | fechaacceso = 29 de julio de 2009
}}</ref> 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.

=== Navegadores ===
Es compatible con los navegadores (y sus versiones posteriores) [[Internet Explorer]] 6.0, [[Mozilla Firefox]] 3, [[Safari (navegador)|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<ref>{{Cita web
 | url = http://jqueryui.com/download
 | título = Herramienta de descarga personalizada
 | fechaacceso = 21 de julio de 2009
}}</ref> para crear una versión personalizada del fichero <code>.js</code> 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 ==
{{listaref|2}}

== Véase también ==
* [[jQuery]]
* [[Yahoo User Interface]]
* [[GWT]]
* [[jQuery Tools]]

== Enlaces externos ==
* [http://jqueryui.com Página oficial de jQuery UI]
* [http://jquery.com Página oficial de jQuery]
* [https://web.archive.org/web/20110321065529/http://flowplayer.org/tools/ Página oficial de jQuery Tools]

{{Control de autoridades}}

[[Categoría:Bibliotecas de JavaScript]]