Jquery ui

jQuery UI es una biblioteca de componentes para el framework jQuery que le aaden un

conjunto de plug-ins, widgets y efectos visuales para la creacin de aplicaciones web. Cada
componente o mdulo se desarrolla de acuerdo a la filosofa de jQuery5 (find something,
manipulate it: encuentra algo, maniplalo).

Mdulos[editar]
La biblioteca se divide en cuatro mdulos:

Ncleo[editar]
Contiene las funciones bsicas para el resto de mdulos.

Interacciones[editar]
Aade 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.

Ziseable: Permite seleccionar el tamao 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 acorden.

Autocomplete: Caja con autocompletado.

Button: Botn.

Dialog: Ventanas con contenido.

Slider: Elemento para elegir en un rango de valores.

Tabs: Pestaas.

Datepicker: Calendario grfico.

Progressbar: Barra de progreso.

Efectos[editar]
Una API para aadir transiciones animadas y facilidades para interacciones.

Core: Ampla 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 extensin para jQuery: Slo hay que aadir los
ficheros .js a la pgina; primero debe aparecer la biblioteca jQuery y despus el resto:
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui1.7.1.custom.min.js"></script>
Cdigo JavaScript para aplicar los efectos:
// Aplicar el efecto Draggable al elemento con id "draggable" al
cargar la pgina
$(document).ready(function(){
$("#draggable").draggable();
});
Cdigo en el body del documento:
<div id="draggable" class="ui-widget-content">
<p>Arrstrame!</p>

</div>
En la pgina oficial de jQuery UI existe una extensa documentacin sobre cmo usar y
configurar los mdulos y componentes.6

Personalizacin 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 pgina oficial, existe la
herramienta ThemeRoller7 que permite disear los estilos online de una manera sencilla.

Compatibilidad[editar]
jQuery[editar]
Existen dos versiones de la biblioteca para trabajar con jQuery:

Estable: para jQuery versin 1.6 o superior.

Legacy: para jQuery versin 1.3.2 o superior.

Navegadores[editar]
Es compatible con los navegadores (y sus versiones posteriores) Internet Explorer 6.0, Mozilla
Firefox 3, Safari 3.1, pera9.6 y Google Chrome.

Descarga personalizada de mdulos[editar]

En la pgina oficial de jQuery UI existe una herramienta8 para crear una versin personalizada
del fichero .js para que slo incluya los mdulos que se van a utilizar. De esta manera se
optimiza el tamao del fichero, conteniendo slo lo necesario.