Jquery Ui

jQuery UI es una biblioteca de componentes para el framework jQuery que le añaden un conjunto de plug-ins, widgets y efectos visuales para la creación de aplicaciones web. Cada componente o módulo se desarrolla de acuerdo a la filosofía de jQuery5 (find something, manipulate it: encuentra algo, manipúlalo).

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.

Ziseable: 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

...