jQuery 1.3 UI eghost Julio2009

¿Qué es jQuery UI?

jQuery User Interface:

Es una librería de componentes e interacción desarrollada
sobre la librería JQuery, que se puede utilizar para
desarrollar aplicaciones web altamente interactivos, de
manera fácil, ágil y rápida.

Introducción a jQuery y nuevas funcionalidades de jQuery 1.3

Ejemplos de introducción
Interacciones: Comportamientos complejos como arrastrar y soltar,
redimensionar, selección y ordenación.

Draggable (http://localhost/01_intro_demo.html#draggable)
Droppable (http://localhost/01_intro_demo.html#droppable)
Resizable (http://localhost/01_intro_demo.html#resizable)
Selectable (http://localhost/01_intro_demo.html#selectable)
Sortable (http://localhost/01_intro_demo.html#sortable)

Widget: Conjunto completo de controles UI, cada control tiene un conjunto
de opciones configurables y se les pueden aplicar estilos.

Accordion (http://localhost/01_intro_demo.html#accordion)
Datepicker (http://localhost/01_intro_demo.html#datepicker)
Dialog (http://localhost/01_intro_demo.html#dialog)
Progressbar (http://localhost/01_intro_demo.html#progressbar)
Slider (http://localhost/01_intro_demo.html#slider)
Tabs (http://localhost/01_intro_demo.html#tabs)


Ejemplos de introducción
Efectos: Transiciones animadas y facilidades para interacciones.

Effect (http://localhost/01_intro_demo.html#effect)
Show (http://localhost/01_intro_demo.html#show)
Hide (http://localhost/01_intro_demo.html#hide)
Toggle (http://localhost/01_intro_demo.html#toggle)
Animate (http://localhost/01_intro_demo.html#animate)
addClass (http://localhost/01_intro_demo.html#addclass)
removeClass (http://localhost/01_intro_demo.html#removeclass)
toggleClass (http://localhost/01_intro_demo.html#toggleclass)
switchClass (http://localhost/01_intro_demo.html#switchclass)


Paquete de jQuery UI a medida
Bajarse el paquete:
Ir a http://jqueryui.com/download
Paso 1: Seleccionar los componentes necesarios
Paso 2: Elegir un estilo (o crea uno propio estilo)
Paso 3: Elegir la versión de jQuery UI
¡Dar a Download!

El contenido del paquete:
• css : directorio con los estilos seleccionados
• development-bundle: demos, temas, documentos...
• js : los plugins
• index.html : página resumen de ejemplos, imágenes disponibles...

Utilización de jQuery en la página:
<link type="text/css" href="css/themename/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

Personalizando los plugins de jQuery UI a las necesidades:
Utilizando las opciones
Configuración por defecto:
Configura el caso más básico y común.

Sobreescribir la configuración por defecto con los “options”
Los "options" son un conjunto de propiedades que se pasan a los widget de jQuery
UI como parámetro. Por ejemplo, el widget slider (deslizante) tiene una opción
para la orientación que permite especificar si el "deslizado" debe ser horizontal o
vertical.
Para fijar esta opción para un slider, solo hay que pasarlo como un argumento:
$('#mySliderDiv').slider({
orientation: 'vertical'
});
Se pueden pasar tantas opciones diferentes como se quiera, separados por comas
(excepto la última):
$('#mySliderDiv').slider({
orientation: 'vertical',
min: 0,
max: 150,
value: 50
});

Personalizando los plugins de jQuery UI a las necesidades:
Diseñando estilos para jQuery UI

La mejor manera de diseñar los estilos para los plugins de jQuery UI es utilizando el
ThemeRoller de la página de jQuery UI:
http://jqueryui.com/themeroller/

Proporciona una interfaz personalizada para diseñar todos los elementos utilizados
por los widgets de jQuery UI.
A medida que var cambiando las configuraciones de las opciones de la izquierda,
los componentes de la derecha reflejarán esos cambios en el diseño.
La pestaña de "Galería" del ThemeRoller ofrece una variedad de estilos pre-
diseñadas, que puedes ver en el mismo ThemeRoller o descargarlos.

Descargando el estilo:
Cuando se clica el botón "Dowload theme" en ThemeRoller, se redirige al
"Download Builder" y e estilo personalizado se auto-seleccionará en el selector
de estilos.

Sugerencia: Si alguna vez se necesita modificar el estilo, simplemente se puede abrir
el fichero CSS y buscar en la línea 43 dónde dice "To view and modify this theme,
visit...". Esa url abrirá el estilo en el ThemeRoller para modificarlo.

Interacciones - Draggable
Visión General
El plugin Draggable de jQuery UI hace que los elementos seleccionados con el ratón
se puedan arrastrar.

$(objeto).draggable();

A los elementos 'arrastrables' se les asigna una clase de ui-draggable. Durante el
arrastre, también se les asigna una clase 'ui-draggable-dragging'.

Todos las funciones de retorno (callbacks) -start, stop, drag- reciben dos argumentos:
• El evento original del navegador
• Un objeto ui preparado. Si a este parámetro le llamamos ui:
• ui.helper: será el objeto helper representando el que está siendo arrastrado.
• ui.position: la posición actual del helper en forma de objeto {top,left}, relativos
al elemento offset.
• ui.offset: el valor de la posición absoluta del helper en forma de objeto
{top,left} relativa a la página.

Opciones
• addClasses : true • iframeFix: false
• opacity: false
• appendTo : "parent" • refreshPositions: false
• axis : false • revert: false
• cancel : ':input,option'
• revertDuration: 500scope:
"default"
• connectToSortable : false • scroll: true
• containment: false • scrollSensitivity: 20
• cursor: "auto"
• scrollSpeed: 20
• snap: false
• cursorAt: false • snapMode: "both"
• delay: 0 • snapTolerance: 20
• stack: false
• distance: 1
• grid: false
• handle: false
• helper: "original"

Eventos
start()

• Tipo de evento: dragstart.

• Se lanza cuando comienza el arrastre.

• Ejemplos de código:
• Utilizando una función de retorno para manejar el evento start como una
opción de configuración:
$('.selector').draggable({
start: function(event, ui) {...}
});

• Vincular el evento start por tipo:
$('.selector').bind('dragstart', function(event, ui) {
...
});

Eventos
drag()

• Tipo de evento: drag.

• Se lanza cuando el ratón se mueve durante el arrastre.

• Utilizando una función de retorno para manejar el evento drag como una
drag: function(event, ui) {...}
});

• Vincular el evento drag por tipo:
$('.selector').bind('drag', function(event, ui) {
...
});

Eventos
stop()

• Tipo de evento: dragstop.

• Se lanza cuando el ratón se mueve durante el arrastre.

• Utilizando una función de retorno para manejar el evento stop como una
stop: function(event, ui) {...}
});

• Vincular el evento dragstop por tipo:
$('.selector').bind('dragstop', function(event, ui) {
...
});

Métodos
destroy()

• Elimina la funcionalidad 'draggable' completamente. Esto devolverá al
elemento a su estado preinicial.
• Uso:
.draggable('destroy');

disable()

• Deshabilita el draggable
• Uso:
.draggable('disable');

enable()

• Habilita el draggable
• Uso:
.draggable('enable');

Métodos
option()

• Obtiene o establece cualquier opción de draggable. Si no se especifican valores,
actúa como un getter.
• Uso:
.draggable('option',optionName,[value]);

Interacciones - Droppable
Visión General
El plugin Droppable de jQuery UI hace que los elemento seleccionados 'encajadores',
es decir, que admiten que se les 'encajen' elementos draggables.

Se puede especificar qué tipo o qué variedad de tipos de draggables admitirá cada
uno.

Todas las funciones de retorno (callbacks) reciben dos argumentos:
• ui.draggable: el elemento draggable actual, un objeto jQuery.
• ui.helper: el draggable helper actual, un objeto jQuery.
• ui.position: la posición actual del draggable helper en forma de objeto
{top,left}, relativos al elemento offset.
• ui.offset: el valor de la posición absoluta del draggable helper en forma de
objeto {top,left} relativa a la página.

Opciones
• accept: '*'
• activeClass: false
• addClasses: true
• greedy: false
• hoverClass: false
• scope: 'default'
• tolerance: 'intersect'

Eventos
activate()

• Tipo de evento: dropactivate.

• Se lanza cada vez que un draggable “aceptado” empieza a arrastrarse.

• Utilizando una función de retorno para manejar el evento activate como una
$('.selector').droppable({
activate: function(event, ui) {...}
});

• Vincular el evento dropactivate por tipo:
$('.selector').bind('dropactivate', function(event, ui) {
...
});

Eventos
deactivate()

• Tipo de evento: dropdeactivate.

• Se lanza cada vez que un draggable “aceptado” para el arrastre.

• Utilizando una función de retorno para manejar el evento deactivate como una
deactivate: function(event, ui) {...}
});

• Vincular el evento dropdeactivate por tipo:
$('.selector').bind('dropdeactivate', function(event, ui) {
...
});

Eventos
over()

• Tipo de evento: dropover.

• Se lanza cuando un draggable “aceptable” está siendo arrastrado sobre un
elemento droppable que lo 'acepta'.

• Utilizando una función de retorno para manejar el evento over como una
over: function(event, ui) {...}
});

• Vincular el evento dropover por tipo:
$('.selector').bind('dropover', function(event, ui) {
...
});

Eventos
out()

• Tipo de evento: dropout.

• Se lanza cuando un draggable “aceptable” está siendo arrastrado fuera de un
elemento droppable que lo 'acepta'.

• Utilizando una función de retorno para manejar el evento out como una opción
de configuración:
out: function(event, ui) {...}
});

• Vincular el evento dropout por tipo:
$('.selector').bind('dropout', function(event, ui) {
...
});

Eventos
drop()

• Tipo de evento: drop.

• Se lanza cuando un draggable “aceptable” se suelta/encaja en un elemento
droppable que lo 'acepta'. En el callback, $(this) representa el elemento
droppable en el que se ha soltado el elemento arrastrado.

• Utilizando una función de retorno para manejar el evento drop como una
drop: function(event, ui) {...}
});

• Vincular el evento drop por tipo:
$('.selector').bind('drop', function(event, ui) {
...
});

Métodos
destroy()

• Elimina la funcionalidad 'droppable' completamente. Esto devolverá al
elemento a su estado preinicial.
• Uso:
.droppable('destroy');

disable()

• Deshabilita el droppable.
• Uso:
.droppable('disable');

enable()

• Habilita el droppable.
• Uso:
.droppable('enable');

Métodos
option()

• Obtiene o establece cualquier opción de droppable. Si no se especifican valores,
• Uso:
.droppable('option',optionName,[value]);

Interacciones - Resizable
Visión General
El plugin Resizable de jQuery UI hace que los elementos seleccionados
redimensionables. Se pueden configurar los comportamientos, como por ejemplo
indicando la anchura y altura mínima y máxima.

Todos los callbacks -start, stop, resize- reciben dos argumentos:
• ui.helper: será el objeto representando el helper.
• ui.originalPosition: {top,left} antes de redimensionar.
• ui.originalSize: {width,height} antes de redimensionar
• ui.position: la posición actual {top,left}
• ui.size: {width,height} tamaño actual.

Introducción a jQuery y nuevas funcionalidades de jQuery 1. 3
Opciones
• alsoResize: false • ghost: false
• grid: false
• animate: false • handles: "e,s,se"
• animateDuration: "slow" • helper: false
• animateEasing: "swing"
• maxHeight: null
• maxWidth: null
• aspectRatio: false • minHeight: 10
• autoHide: false • minWidth: 10
• cancel: ":input,option"
• zIndex: 1000
• containment: false
• Delay: 0
• distance: 1

Eventos
start()

• Tipo de evento: resizestart.

• Se lanza cuando comienza la redimensión.

$('.selector').resizable({
});

• Vincular el evento resizestart por tipo:
$('.selector').bind('resizestart', function(event, ui) {
...
});

Eventos
resize()

• Tipo de evento: resize.

• Se lanza durante la redimensión, cuando el control de redimensión está siendo
arrastrado.

• Utilizando una función de retorno para manejar el evento resize como una
resize: function(event, ui) {...}
});

• Vincular el evento resize por tipo:
$('.selector').bind('resize', function(event, ui) {
...
});

Eventos
stop()

• Tipo de evento: resizestop.

• Se lanza cuando el finaliza la redimensión.

});

• Vincular el evento resizestop por tipo:
$('.selector').bind('resizestop', function(event, ui) {
...
});

Métodos
destroy()

• Elimina la funcionalidad 'resizable' completamente. Esto devolverá al elemento
a su estado preinicial.
• Uso:
.resizable('destroy');

disable()

• Deshabilita el resizable.
• Uso:
.resizable('disable');

enable()

• Habilita el resizable.
• Uso:
.resizable('enable');

Métodos
option()

• Obtiene o establece cualquier opción de resizable. Si no se especifican valores,
• Uso:
.resizable('option',optionName,[value]);

Interacciones - Selectable
Visión General

El plugin Selectable de jQuery UI permite seleccionar elementos 'dibujando' un
cuadrado con el ratón sobre los elementos. También se pueden seleccionar los
.elementos con clicks, arrastrarlos y selección múltiple con el Ctrl,

Opciones
• autoRefresh: true
• cancel: ":input,option"
• delay: 0
• distance: 0
• filter: '*'
• tolerance: 'touch'

Eventos
selected()

• Tipo de evento: selected.

• Se lanza al finalizar una operación de selección, sobre cada elemento añadido a
la selección.

• Utilizando una función de retorno para manejar el evento selected como una
selected: function(event, ui) {...}
});

• Vincular el evento selected por tipo:
$('.selector').bind('selected', function(event, ui) {
...
});

Eventos
selecting()

• Tipo de evento: selecting.

• Se lanza durante una operación de selección, sobre cada elemento añadido a la
selección.

• Utilizando un callback para manejar el evento selecting como una opción de
configuración:
selecting: function(event, ui) {...}
});

• Vincular el evento selecting por tipo:
$('.selector').bind('selecting', function(event, ui) {
...
});

Eventos
start()

• Tipo de evento: selectablestart.

• Se lanza cuando comienza la selección.

$('.selector').selectable({
});

• Vincular el evento selectablestart por tipo:
$('.selector').bind('selectablestart', function(event, ui) {
...
});

Eventos
stop()

• Tipo de evento: selectablestop.

• Se lanza cuando se finaliza la selección.

});

• Vincular el evento selectablestop por tipo:
$('.selector').bind('selectablestop', function(event, ui) {
...
});

Eventos
unselected()

• Tipo de evento: unselected.

• Se lanza al final de la operación de selección, sobre cada elemento
deseleccionado.

• Utilizando una función de retorno para manejar el evento unselected como
una opción de configuración:
});

• Vincular el evento unselected por tipo:
$('.selector').bind('unselected', function(event, ui) {
...
});

Eventos
unselecting()

• Tipo de evento: unselecting.

• Se lanza al durante la operación de selección, sobre cada elemento
deseleccionado.

• Utilizando una función de retorno para manejar el evento unselecting como
unselecting: function(event, ui) {...}
});

• Vincular el evento unselecting por tipo:
$('.selector').bind('unselecting', function(event, ui) {
...
});

Métodos
option()

• Obtiene o establece cualquier opción de resizable. Si no se especifican valores,
• Uso:

refresh()

• Recarga la posición y tamaño de cada elemento seleccionado. Este método se
puede utilizar para recalcular manualmente la posición y el tamaño de cada
elemento seleccionado. Muy útil si autoRefresh está a false.
• Uso:

Interacciones - Sortable
Visión General
El plugin Droppable de jQuery UI hace que los elemento seleccionados se puedan
ordenar arrastrándolos con el ratón.

Todas las funciones de retorno (callbacks) reciben dos argumentos:
• ui.helper: el helper actual (generalmente un clon del elemento).
• ui.position: la posición actual del helper {top,left}.
• ui.offset: la posición absoluta del helper {top,left}.
• ui.item: el elemento que se está arrastrando.
• ui.placeholder: el marcador/posicionador (si se ha definido)
• ui.sender: el conjunto de donde proviene el elemento (solo existirá si se
mueve entre listas conectadas)

Opciones
• appendTo: "parent" • handle: false
• helper: "original"
• axis: false • items: '> *'
• cancel: ":input,option" • opacity: false
• connectWith: false • placeholder: false
• revert: false
• containment: false • scroll: true
• cursor: 'auto' • scrollSensitivity: 20
• cursorAt: false
• scrollSpeed: 20
• scope: "default"
• delay: 0 • tolerance: "intersect"
• distance: 1 • zIndex: 1000
• dropOnEmpty: true
• forcePlaceholderSize: false
• forceHelperSize: false
• grid: false

Eventos
start()

• Tipo de evento: sortstart.

• Se lanza cuando comienza la ordenación o clasificación.

$('.selector').sortable({
});

• Vincular el evento sortstart por tipo:
$('.selector').bind('sortstart', function(event, ui) {
...
});

Eventos
sort()

• Tipo de evento: sort.

• Se lanza durante la clasificación/ordenación.

• Utilizando una función de retorno para manejar el evento sort como una
sort: function(event, ui) {...}
});

• Vincular el evento sort por tipo:
$('.selector').bind('sort', function(event, ui) {
...
});

Eventos
change()

• Tipo de evento: sortchange.

• Se lanza durante la clasificación/ordenación, pero sólo cuando la posición DOM
cambia.

• Utilizando una función de retorno para manejar el evento change como una
change: function(event, ui) {...}
});

• Vincular el evento sortchange por tipo:
$('.selector').bind('sortchange', function(event, ui) {
...
});

Eventos
beforeStop()

• Tipo de evento: sortbeforeStop.

• Se lanza cuando finaliza la clasificación/ordenación, pero cuando el
placeholder/helper está aún disponible.

• Utilizando una función de retorno para manejar el evento beforeStop como
beforeStop: function(event, ui) {...}
});

• Vincular el evento sortbeforeStop por tipo:
$('.selector').bind('sortbeforeStop', function(event, ui) {
...
});

Eventos
stop()

• Tipo de evento: sortstop.

• Se lanza cuando finaliza la ordenación/clasificación.

});

• Vincular el evento sortstop por tipo:
$('.selector').bind('sortstop', function(event, ui) {
...
});

Eventos
update()

• Tipo de evento: sortupdate.

• Se lanza cuando el usuario ha finalizado la ordenación/clasificación y la posición
DOM ha cambiado.

• Utilizando una función de retorno para manejar el evento update como una
update: function(event, ui) {...}
});

• Vincular el evento sortupdate por tipo:
$('.selector').bind('sortupdate', function(event, ui) {
...
});

Eventos
receive()

• Tipo de evento: sortreceive.

• Se lanza cuando una lista ordenable recibe un elemento de otra lista ordenable
conectada a esta.

• Utilizando una función de retorno para manejar el evento update como una
remove: function(event, ui) {...}
});

• Vincular el evento sortremove por tipo:
$('.selector').bind('sortremove', function(event, ui) {
...
});

Eventos
remove()

• Tipo de evento: sortremove.

• Se lanza cuando se 'extrae' un elemento de una lista ordenable a otra lista
ordenable conectada a esta.

• Utilizando una función de retorno para manejar el evento remove como una
receive: function(event, ui) {...}
});

• Vincular el evento sortreceive por tipo:
$('.selector').bind('sortreceive', function(event, ui) {
...
});

Eventos
over()

• Tipo de evento: sortover.

• Se lanza cuando un elemento se mueve en una lista ordenable conectada.

• Utilizando una función de retorno para manejar el evento over como una
over: function(event, ui) {...}
});

• Vincular el evento sortover por tipo:
$('.selector').bind('sortover', function(event, ui) {
...
});

Eventos
out()

• Tipo de evento: sortout.

• Se lanza cuando un elemento 'saca' de una lista conectada.

• Utilizando una función de retorno para manejar el evento out como una opción
de configuración:
out: function(event, ui) {...}
});

• Vincular el evento sortout por tipo:
$('.selector').bind('sortout', function(event, ui) {
...
});

Eventos
activate()

• Tipo de evento: sortactivate.

• Se lanza cuando se usan listas conectadas, cada lista conectada los recive
cuando se empieza a 'arrastrar'.

• Utilizando una función de retorno para manejar el evento activate como una
activate: function(event, ui) {...}
});

• Vincular el evento sortactivaate por tipo:
$('.selector').bind('sortactivate', function(event, ui) {
...
});

Eventos
deactivate()

• Tipo de evento: sortdeactivate.

• Se lanza cuando finaliza la ordenación/clasificación, se propaga a todas las
listas conectadas.

• Utilizando una función de retorno para manejar el evento deactivaate como
});

• Vincular el evento sortdeactivate por tipo:
$('.selector').bind('sortdeactivate', function(event, ui) {
...
});

Métodos
destroy()

• Elimina la funcionalidad 'sortable' completamente. Esto devolverá al elemento
• Uso:
.sortable('destroy');

disable()

• Deshabilita el sortable.
• Uso:
.sortable('disable');

enable()

• Habilita el sortable.
• Uso:
.sortable('enable');

Métodos
option()

• Obtiene o establece cualquier opción de sortable. Si no se especifican valores,
• Uso:
.sortable('option',optionName,[value]);

serialize()
• Serializa los id's de los elementos ordenables en un string 'submiteable' form/ajax. Llamar
a esta función produce un hash que puede ser agregado a cualquier url para enviar
fácilmente al servidor una nueva ordenación de elementos.
• Por defecto mira el id de cada elemento en formato 'nombreCjto[] = numero&
nombreCjto[]=numero'
• Pero se le puede pasar como parámetro cómo se quiere que funcione. Los posibles
valores son:
• key: Sustituye 'nombreCjto[]' con lo que se le especifique
• attribute: Comprueba otro atributo diferente del id
• expression: Usar una regexp propia.
• Uso:
.sortable('serialize',[options]);

Métodos
toArray()

• Serializa los id's de los elementos ordenables en una array de strings.
• Si se tiene:
<ul id='unCjto'>
<li id=”primero”>Uno</li>
<li id=”segundo”>Dos</li>
</ul>

y se hace:
var rdo = $(“#unCjto”).sortable('toArray');

entonces:
rdo[0] contendrá “Uno”, y redo[1] contendrá “Dos”

Métodos
refresh()
• Refresca los elementos ordenables. Se lanza una recarga de todos los
elementos ordenables, haciendo que los nuevos elementos se reconozcan.
• Uso:
.sortable('refresh');

refreshPositions()
• Refresca las posiciones cacheadas de los elementos ordenables.
• Uso:
.sortable('refreshPosition');

cancel()
• Cancela un cambio en el 'clasificado' en curso y lo restaura al estado anterior
al comienzo de la actual ordenación.
• Si el elemento no se está moviendo de una lista a otra:
$(this).sortable('cancel');
• Si sí se está moviendo de una lista a otra conectada:
$(ui.sender).sortable('cancel');

Widgets - Accordion
Visión General
Convierte los elementos seleccionados en elementos 'acordeón'.
Requerimientos semánticos:
El marcado del contenedor del acordeón necesita parejas de cabeceras y paneles
de contenido.Por defecto, los elementos de cabecera son enlaces, asumiendo la
siguiente estructura:
<div id="accordion">
<a href="#">Cabecera uno</a>
<div>Primer contenido</div>
<a href="#">Cabecera dos</a>
<div>Segundo contenido</div>
</div>
Si se usa un elemento diferente para la cabecera, utiliza uno apropiado como por
ejemplo h3. El elemento con el contenido debe seguir inmediatamente a su
cabecera.
Si en el contenido hay enlaces y se utilizan los enlaces como cabeceras del
acordeón, utilizar una clase para las cabeceras y usarlo como selector de
elemento. (header: a.header);
No se puede mantener abierto más de un panel al mismo tiempo.

Widgets - Accordion
Opciones
• active: null • Icons: {
header: "ui-icon-triangle-1-e",
• alwaysOpen: true headerSelected: "ui-icon-triangle-1-s"
//deprecated, use collapsible }
• animated: 'slide' • navigation: false
• autoHeight: true
• navigationFilter: function() {
return this.href.toLowerCase() ==
• clearStyle: false location.href.toLowerCase();
• collapsible: false }
• event: "click"
• fillSpace: false
• header: "> li > :first-child,>
:not(li):even"

Widgets - Accordion
Eventos
change()

• Tipo de evento: accordionchange.

• Se lanza cada vez que cambia el estado del acordeón. Si el acordeón está en
animación, no se lanzará hasta completarlo, sino, se lanzará inmediatamente.

});

• Vincular el evento accordionchange por tipo:
$('.selector').bind('accordionchange', function(event, ui) {
...
});

Widgets - Accordion
Eventos
changestart()

• Tipo de evento: accordionchangestart.

• Se lanza cada vez que el acordeón comienza a cambiar.

• Utilizando una función de retorno para manejar el evento changeStart como
changestart: function(event, ui) {...}
});

• Vincular el evento accordionchangestart por tipo:
$('.selector').bind('accordionchangestart', function(event, ui) {
...
});

Widgets - Accordion
Métodos
destroy()

• Elimina la funcionalidad 'accordion' completamente. Esto devolverá al elemento
• Uso:
.accordion('destroy');

disable()

• Deshabilita el accordion.
• Uso:
.accordion('disable');

enable()

• Habilita el accordion.
• Uso:
.accordion('enable');

Widgets - Accordion
Métodos
option()

• Obtiene o establece cualquier opción de accordion. Si no se especifican valores,
• Uso:
.accordion('option',optionName,[value]);

activate()

• Activa una parte de contenido del accordion especificado por el índice.
• Uso:
.accordion('activate',index);

Widgets - Datepicker
Visión General
El plugin Datepicker de jQuery UI es un plugin altamente configurable que añade un selector de
fechas. Se pueden configurar el formato de fecha y el lenguaje, restringir los rangos de
fechas seleccionables, y añadir botones y otras opciones de utilización fácilmente.
Por defecto, el datepicker se abre en un pequeño overlay cuando tiene foco, y se cierra cuando
pierde el foco o una fecha es seleccionada. Para mostrar un datepicker inline (sin overlay),
basta con vincular el datepicker a un div o span.
Se pude utilizar el teclado para 'navegar' por el datepicker:
• Repag/avpag: mes anterior/siguiente
• Ctrl + repag/avpag: año anterior/siguiente
• Ctrl + inicio: Mes actual, o abrir cuando está cerrado
• Ctrl + izq/dcha: día anterior/siguiente
• Ctrl + arriba/abajo: semana anterior/siguiente
• Enter: aceptar la fecha seleccionada
• Ctrl + fin: Cerra y borrar la fecha
• Esc: Cerrar sin seleccionar
Funciones de utilidad:
• $.datepicker.setDefaults( settings ) - Opciones para todas las instancias de datepicker.
• $.datepicker.formatDate( format, date, settings ) - Formatear una fecha a un string con el
formato especificado.
• $.datepicker.iso8601Week( date ) - Determinar la semana del año para una fecha dada: de
1 a 53.
• $.datepicker.parseDate( format, value, settings ) - Extraer la fecha desde un string con el
formato especificado.

Opciones
• altField • isRTL
• maxDate
• altFormat • minDate
• appendText • monthNames
• buttonImage
• monthNamesShort
• navigationAsDateFormat
• buttonImageOnly • nextText
• buttonText • numberOfMonths
• changeMonth
• prevText
• shortYearCutoff
• changeYear • showAnim
• closeText • showButtonPanel
• howCurrentAtPos
• constrainInput • showMonthAfterYear
• currentText • showOn
• dateFormat • showOptions
• showOtherMonths
• dayNames • stepMonths
• dayNamesMin • yearRange
• dayNamesShort
• defaultDate
• duration
• firstDay
• gotoCurrent
• hideIfNoPrevNext

Eventos
beforeShow()

• Tipo: function(input)

• Puede ser una función que coge un campo input y la instancia actual de
datepicker y devuelve un objeto de opciones con el que actualizar el datepicker.
Se llama justo antes de mostrar el datepicker.

• Utilizando una función de retorno para manejar el evento beforeShow como
$('.selector').datepicker({
beforeShow: function(event, ui) {...}
});

Eventos
beforeShowDay()

• Tipo: function(date).

• Esta función coge un fecha y devuelve un array con la posición [0] a true/false
indicando si esa fecha es o no seleccionable, [1] igual a un nombre de clase
CSS '' para la presentación por defecto y [2] un tooltip opcional para dicha
fecha. Se llama por cada día en el datepicker antes de mostrarlo.

• Utilizando un callback para manejar el evento beforeShowDay como una
beforeShowDay: function(event, ui) {...}
});

Eventos
onChangeMonthYear()

• Tipo: function(year, month, inst).

• Permite definir un evento propio cuando el datepicker cambia de mes y/o año.
La función recibe el año seleccionado, el mes (1-12) y la instancia de datepicker
como parámetros. this hará referencia al campo input asociado.

• Utilizando una función de retorno para manejar el evento
onChangeMonthYear como una opción de configuración:
onChangeMonthYear: function(event, ui) {...}
});

Eventos
onClose()

• Tipo: function(dateText, inst).

• Permite definir un evento propio cuando el datepicker se cierra, habiendo o no
seleccionado una fecha. La función recibe como parámetros la fecha
seleccionada en formato texto y la instancia actual del datepicker. this hará
referencia al campo input asociado.

• Utilizando una función de retorno para manejar el evento onClose como una
onClose: function(event, ui) {...}
});

Eventos
onSelect()

• Tipo: function(dateText, inst).

• Permite definir un evento propio cuando el datepicker es seleccionado. La
función recibe como parámetros la fecha seleccionada en formato texto y la
instancia actual del datepicker. this hará referencia al campo input asociado.

• Utilizando una función de retorno para manejar el evento onSelect como una
onSelect: function(event, ui) {...}
});

Métodos
destroy()

• Elimina la funcionalidad datepicker por completo.
• Uso:
.datepicker('destroy');

disable()

• Deshabilita el datepicker.
• Uso:
.datepicker('disable');

enable()

• Habilita el datepicker.
• Uso:
.datepicker('enable');

Métodos
option()

• Obtiene o establece cualquier opción de datepicker. Si no se especifican
valores, actúa como un getter.
• Uso:
.datepicker('option',optionName,[value]);

dialog()

• Abre el datepicker en un cuadro de diálogo.
• dateText: Fecha inicial
• onSelect: Función de retorno cuando se selecciona una fecha.
• settings: Las nuevas opciones para el datepicker.
• pos: La posicíon top/left del cuadro de diálogo en forma [x,y], o un evento de
ratón que contenga las coordenadas. Si no se especifica, el datepicker se
centra en la pantalla.
• Uso:
.datepicker('dialog' , dateText , [onSelect] , [settings] , [pos]);

Métodos
isDisabled()

• Determina si un datepicker ha sido deshabilitado.
• Uso:
.datepicker('disabled');

hide()

• Cierra un datepicker previamente abierto.
• Uso:
.datepicker('hide' ,[speed]);

show()

• Mostrar un datepicker ya creado.
• Uso:
.datepicker('show');

Métodos
getDate()

• Devuelve la fecha actual del datepicker
• Uso:
.datepicker('getDate');

setDate()

• Establece la fecha actual para el datepicker. La nueva fecha también puede ser
un número de días desde hoy (ej: +1), o un string de valores y periodos ('y' para
años, 'm' para meses, 'w' para semanas, 'd' para días. Ej: +1m+3d) o vacío para
'hoy'.
• Uso:
.datepicker('setDate' ,date);

Widgets - Dialog
Visión General

El dialog es una ventana flotante que contiene una barra de título y un área de contenido. La
ventana del dialog se puede mover, redimensionar y cerrar con el icono 'x' por defecto.

Si la largura del contenido excede la altura máxima, automáticamente aparecerá una barra de
scroll.

Una barra inferior de botones y una visualización semi-transparente son opciones comunes
que se pueden añadir.

Una llamada $(foo).dialog(); inicializa el dialog.
Si se desea que el dialog se abra con un click, $(foo).dialog('open');
Pero si el dialog no ha sido destruido, la llamada inicial $(foo).dialog(); se requiere solo una vez.

Widgets - Dialog
Opciones
• autoOpen: true • minHeight: 150
• minWidth: 150
• bgiframe: false • modal: false
• buttons: {} • position: 'center'
• closeOnEscape: true • resizable: true
• show: null
• closeText: 'close' • stack: true
• dialogClass: '' • title: ''
• draggable: true
• width: 300
• zIndex: 1000
• hide: null
• height: 'auto'
• maxHeight: false
• maxWidth: false

Widgets - Dialog
Eventos
beforeclose()

• Tipo evento: dialogbeforeclose

• Este evento se dispara cuando se va a cerrar un dialog. Si gesto de eventos de
beforeClose (una función callback) devuelve false, no se cerrará.

• Utilizando una función de retorno para manejar el evento beforeclose como
$('.selector').dialog({
beforeclose: function(event, ui) {...}
});

• Vincular el evento accordionchange por tipo:
$('.selector').bind('dialogbeforeclose', function(event, ui) {
...
});

Widgets - Dialog
Eventos
open()

• Tipo evento: dialogopen

• Este evento se dispara cuando se va abre dialog. .

• Utilizando una función de retorno para manejar el evento open como una
open: function(event, ui) {...}
});

• Vincular el evento dialogopen por tipo:
$('.selector').bind('dialogopen', function(event, ui) {
...
});

Widgets - Dialog
Eventos
focus()

• Tipo evento: dialogfocus

• Este evento se dispara cuando el dialog obtiene el foco.

• Utilizando una función de retorno para manejar el evento focus como una
focus: function(event, ui) {...}
});

• Vincular el evento dialogfocus por tipo:
$('.selector').bind('dialogfocus', function(event, ui) {
...
});

Widgets - Dialog
Eventos
dragStart()

• Tipo evento: dragStart

• Este evento se dispara cuando se empieza a mover/arrastrar el dialog.

• Utilizando una función de retorno para manejar el evento dragStart como una
dragStart: function(event, ui) {...}
});

• Vincular el evento dragStart por tipo:
$('.selector').bind('dragStart', function(event, ui) {
...
});

Widgets - Dialog
Eventos
drag()

• Tipo evento: drag

• Este evento se dispara cuando se está moviendo/arrastrando el dialog.

• Utilizando una función de retorno para manejar el evento drag como una
drag: function(event, ui) {...}
});

• Vincular el evento drag por tipo:
$('.selector').bind('drag', function(event, ui) {
...
});

Widgets - Dialog
Eventos
dragStop()

• Tipo evento: dragStop

• Este evento se dispara al finalizar movimiento/arrastrado del dialog.

• Utilizando una función de retorno para manejar el evento dragStop como una
dragStop: function(event, ui) {...}
});

• Vincular el evento dragStop por tipo:
$('.selector').bind('dragStop', function(event, ui) {
...
});

Widgets - Dialog
Eventos
resizeStart()

• Tipo evento: resizeStart

• Este evento se dispara al comenzar la redimensión del dialog.

• Utilizando una función de retorno para manejar el evento resizeStart como
resizeStart: function(event, ui) {...}
});

• Vincular el evento resizeStart por tipo:
$('.selector').bind('resizeStart', function(event, ui) {
...
});

Widgets - Dialog
Eventos
resize()

• Tipo evento: resize

• Este evento se dispara mientras se redimensiona el dialog.

• Utilizando una función de retorno para manejar el evento resize como una
resize: function(event, ui) {...}
});

• Vincular el evento resize por tipo:
$('.selector').bind('resize', function(event, ui) {
...
});

Widgets - Dialog
Eventos
resizeStop()

• Tipo evento: resizeStop

• Este evento se dispara cuando se acaba de redimensionar el dialog.

• Utilizando una función de retorno para manejar el evento resizeStop como
resizeStop: function(event, ui) {...}
});

• Vincular el evento resizeStop por tipo:
$('.selector').bind('resizeStop', function(event, ui) {
...
});

Widgets - Dialog
Eventos
close()

• Tipo evento: dialogclose

• Este evento se dispara cuando se cierra el dialog.

• Utilizando una función de retorno para manejar el evento close como una
close: function(event, ui) {...}
});

• Vincular el evento dialogclose por tipo:
$('.selector').bind('dialogclose', function(event, ui) {
...
});

Widgets - Dialog
Métodos
destroy()

• Elimina la funcionalidad dialog por completo.
• Uso:
.dialog('destroy');

disable()

• Deshabilita el dialog.
• Uso:
.dialog('disable');

enable()

• Habilita el dialog.
• Uso:
.dialog('enable');

Widgets - Dialog
Métodos
option()

• Obtiene o establece cualquier opción de dialog. Si no se especifican valores,
• Uso:
.dialog('option',optionName,[value]);

close()

• Cierra el dialog.
• Uso:
.dialog('close');

isOpen()

• Devuelve true si el dialog ya está abierto.
• Uso:
.dialog('isOpen');

Widgets - Dialog
Métodos
moveToUp()

• Mueve el dialog a la cima de la pila de dialogs.
• Uso:
.datepicker('moveToUp');

open()

• Abre el dialog.
• Uso:
.datepicker('open');

Widgets - Progressbar
Visión General

La barra de progreso está diseñada simplemente para mostrar el % de progreso de
un proceso. La barra está codificada para ser dimensionada de manera flexible
desde CSS, y por defecto se escalará para ajustarse a su contenedor.

Opciones
• value: 0

Eventos
change()

• Tipo evento: progressbarchange

• Este evento se dispara cuando se cambiar el estado de la barra de progreso.

$('.selector').progressbar({
});

• Vincular el evento progressbarchange por tipo:
$('.selector').bind('progressbarchange', function(event, ui) {
...
});

Métodos
destroy()

• Elimina la funcionalidad progressbar por completo.
• Uso:
.progressbar('destroy');

disable()

• Deshabilita el progressbar.
• Uso:
.progressbar('disable');

enable()

• Habilita el progressbar.
• Uso:
.progressbar('enable');

Métodos
option()

• Obtiene o establece cualquier opción de progressbar. Si no se especifican
valores, actúa como un getter.
• Uso:
.progressbar('option',optionName,[value]);

value()

• Obtiene o establece el valor actual de la barra de progreso.
• Uso:
.progressbar('value',[value]);

Widgets - Slider
Visión General

El plugin Slider de jQuery UI convierte los elementos seleccionados en sliders.
Existen muchas opciones, controladores así como rangos.

El controlador del slider puede moverse con el ratón o con las flechas del teclado.

Todos los callbacks reciben dos argumentos:
• ui.handle: Elemento DOM, el controlador que actualmente tiene el foco.
• ui.value: Entero, el valor actual del controlador.

Widgets - Slider
Opciones
• animate: false
• max: 100
• min: 0
• orientation: 'horizontal'
• range: false
• step: 1
• value: 0
• values: null

Widgets - Slider
Eventos
start()

• Tipo evento: slidestart

• Este evento se dispara cuando el usuario comienza a 'desaplazar'.

$('.selector').slider({
});

• Vincular el evento slidestart por tipo:
$('.selector').bind('slidestart', function(event, ui) {
...
});

Widgets - Slider
Eventos
slide()

• Tipo evento: slide

• Este evento se dispara en cada movimiento del ratón durante el deplazamiento.

• Utilizando una función de retorno para manejar el evento slide como una
slide: function(event, ui) {...}
});

• Vincular el evento slide por tipo:
$('.selector').bind('slide', function(event, ui) {
...
});

Widgets - Slider
Eventos
change()

• Tipo evento: slidechange

• Este evento se dispara cuando se para el desplazamiento, o si el valor es
modificado por programación y no por interacción (con el método value()). Le
llegan los parámetros evento y ui.
• Para saber si el valor ha sido modificado por ratón, teclado o por programación,
utilizar event.originalEven.
• Para saber el valor del controlador actual: ui.value() para sliders de un solo
control, y $(this).slider('values',index) para obter el valor de otro controlador.

});

• Vincular el evento slidechange por tipo:
$('.selector').bind('change', function(event, ui) {
...
});

Widgets - Slider
Eventos
stop()

• Tipo evento: slidestop

• Este evento se dispara cuando el usuario deja de deslizar.

});

• Vincular el evento slidestop por tipo:
$('.selector').bind('slidestop', function(event, ui) {
...
});

Widgets - Slider
Métodos
destroy()

• Elimina la funcionalidad slider por completo.
• Uso:
.slider('destroy');

disable()

• Deshabilita el slider.
• Uso:
.slider('disable');

enable()

• Habilita el slider.
• Uso:
.slider('enable');

Widgets - Slider
Métodos
option()

• Obtiene o establece cualquier opción de slider. Si no se especifican valores,
• Uso:
.slider('option',optionName,[value]);

value()

• Obtiene o establece el valor actual del slider (para sliders de un solo control).
• Uso:
.slider('value',[value]);

values()

• Obtiene o establece valores del slider (para sliders de mútiples controles o de
rangos).
• Uso:
.slider('value',[value]);

Widgets - Tabs
Visión General

Las pestañas se utlizan para partir el contenido en múltiples secciones que pueden
ser intercambiados para ahorrar espacio, similar al acordeón.
Por defecto, el widget Tabs intercambia las secciones en onClick, pero los eventos
pueden ser cambiados a onHover en las opciones.
El contenido de las pestañas puede ser cargado vía ajax mediante un href en una
pestaña.

Eventos
Una serie de eventos se disparan al trabajar con pestañas:
• tabsselect, tabsload, tabsshow (in that order)
• tabsadd, tabsremove
• tabsenable, tabsdisable
Ejemplo de vinculación de eventos:
$(#ejemplo).bind('tabsselect',function(event, ui){
//Objetos disponibles en el contexto de la función:
ui.tab // el ancla de la pesataña seleccionada (click)
ui.panel // elemento que tiene el contenido de la pestaña seleccionada
ui.index // indece (desde 0) de la pestaña seleccionada
});
Si un controlador para tabsselect devuelve false, no se cambiará de pestaña.

Widgets - Tabs
Visión General
Modo Ajax
Las pestañas permiten cargar el contenido vía ajax de una manera no intrusiva.
El código HTML necesario es un poco diferente al que se utiliza para las pestañas
estáticas: una lista de enlaces apuntando a recursos existentes (desde donde se
carga el contenido) y ningún contenedor adicional más (el código del contenedor
se crea al vuelo).

Widgets - Tabs
Opciones
• aajaxOptions: null
• cache: false
• cookie: null, // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true }
• collapsible: false
• disabled: []
• event: 'click'
• fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 }
• idPrefix: 'ui-tabs-'
• panelTemplate: '<div></div>'
• spinner: '<em>Loading…</em>'
• tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>'

Widgets - Tabs
Eventos
select()

• Tipo evento: tabsselect

• Este evento se dispara cuando se clica una pestaña.

• Utilizando una función de retorno para manejar el evento select como una
$('.selector').tabs({
select: function(event, ui) {...}
});

• Vincular el evento tabsselect por tipo:
$('.selector').bind('tabsselect', function(event, ui) {
...
});

Widgets - Tabs
Eventos
load()

• Tipo evento: tabsload

• Este evento se dispara cuando se carga el contenido de una pestaña remota.

• Utilizando una función de retorno para manejar el evento load como una
load: function(event, ui) {...}
});

• Vincular el evento tabsload por tipo:
$('.selector').bind('tabsload', function(event, ui) {
...
});

Widgets - Tabs
Eventos
show()

• Tipo evento: tabsshow

• Este evento se dispara cuando se muestra una pestaña
• Utilizando una función de retorno para manejar el evento show como una
show: function(event, ui) {...}
});

• Vincular el evento tabsshow por tipo:
$('.selector').bind('tabsshow', function(event, ui) {
...
});

Widgets - Tabs
Eventos
add()

• Tipo evento: tabsadd

• Este evento se dispara cuando se añade una pestaña.

• Utilizando una función de retorno para manejar el evento add como una
add: function(event, ui) {...}
});

• Vincular el evento tabsadd por tipo:
$('.selector').bind('tabadd', function(event, ui) {
...
});

Widgets - Tabs
Eventos
remove()

• Tipo evento: tabsremove

• Este evento se dispara cuando se elimina una pestaña.

• Utilizando una función de retorno para manejar el evento remove como una
remove: function(event, ui) {...}
});

• Vincular el evento tabsremove por tipo:
$('.selector').bind('tabsremove', function(event, ui) {
...
});

Widgets - Tabs
Eventos
enable()

• Tipo evento: tabsenable

• Este evento se dispara cuando se habilita una pestaña.

• Utilizando una función de retorno para manejar el evento enable como una
enable: function(event, ui) {...}
});

• Vincular el evento tabsenable por tipo:
$('.selector').bind('tabsenable', function(event, ui) {
...
});

Widgets - Tabs
Eventos
disable()

• Tipo evento: tabsdisable

• Este evento se dispara cuando se deshabilita una pestaña.

• Utilizando una función de retorno para manejar el evento disable como una
disable: function(event, ui) {...}
});

• Vincular el evento tabsdisable por tipo:
$('.selector').bind('tabsdisable', function(event, ui) {
...
});

Widgets - Tabs
Métodos
destroy()

• Elimina la funcionalidad tabs por completo.
• Uso:
.tabs('destroy');

disable()

• Deshabilita el tabs.
• Uso:
.tabs('disable');

enable()

• Habilita el tabs.
• Uso:
.tabs('enable');

Widgets - Tabs
Métodos
option()

• Obtiene o establece cualquier opción de Tabs. Si no se especifican valores,
• Uso:
.tabs('option',optionName,[value]);

add()

• Añade una nueva pestaña. Obtiene o establece el valor actual del slider (para
sliders de un solo control).
• Parámetros:
• url: una url consistente en un fragemento identificador solo para crear una pestaña en la
página, o una dirección completa para convertir la pestaña en una pestaña remota
(ajax)
• index: posición donde se quiere insertar (por defecto al final)
• Uso:
.tabs( 'add' , url/label , [index] )

Widgets - Tabs
Métodos
remove()

• Elimina una pestaña.
• Uso:
.tabs('remove',index);

enable()

• Habilita una pestaña deshabilitada. Para habilitar más de una pestaña de una
vez, reiniciar la propiedad disabled: $('#example').data('disabled.tabs', []);
• Uso:
.tabs( 'enable' , index)

disable()

• Deshabilita una pestaña. La pestaña actual no puede deshabilitarse. Para
deshabilitar más de una pestaña de una vez: $('#example').data('disabled.tabs',
[1,2,3]);
• Uso:
.tabs( 'disable' , index)

Widgets - Tabs
Métodos
select()

• Selecciona una pestaña como si hubiera sido clicada.
• Uso:
.tabs('select',index);

load()

• Recarga el contenido de una pestaña remota.
• Uso:
.tabs( 'load' , index)

url()

• Modifica la dirección desde la que se cargará una pestaña remota (ajax).Si se le
especifica una dirección a una pestaña estática, se convertirá en remota.
• Uso:
.tabs( 'url' , index, url)

Widgets - Tabs
Métodos
length()

• Obtiene el número de pestañas del primer panel de pestañas encontrado.
• Uso:
.tabs('length');

abort()

• Termina todas las peticiones ajax y animaciones de las pestañas ejecutándose
en el momento .
• Uso:
.tabs( 'abort')

rotate()

• Configura una rotación automática a través de las pestañas de un panel.
• Uso:
.tabs( 'rotate' , ms, [continuing])

jQuery 1.3 UI eghost Julio2009

jQuery 1.3 UI eghost Julio2009

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (6)

Andere mochten auch

Andere mochten auch (18)

Ähnlich wie jQuery 1.3 UI eghost Julio2009

Ähnlich wie jQuery 1.3 UI eghost Julio2009 (20)

Mehr von Irontec

Mehr von Irontec (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (13)

jQuery 1.3 UI eghost Julio2009