jQuery 1.3 UI eghost Julio2009
-
Upload
irontec-internet-y-sistemas-sobre-gnulinux -
Category
Technology
-
view
4.691 -
download
7
description
Transcript of jQuery 1.3 UI eghost Julio2009
![Page 1: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/1.jpg)
Curso E-Ghost Julio 2009
![Page 2: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/2.jpg)
¿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.
![Page 3: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/3.jpg)
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)
![Page 4: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/4.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
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)
![Page 5: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/5.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
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>
![Page 6: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/6.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Personalizando los plugins de jQuery UI a las necesidades:
Utilizando las opcionesConfiguració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});
![Page 7: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/7.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Personalizando 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.
![Page 8: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/8.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Draggable
Visión GeneralEl 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.
![Page 9: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/9.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Draggable
Opciones
• addClasses : true• appendTo : "parent"• axis : false• cancel : ':input,option'• connectToSortable : false• containment: false• cursor: "auto"• cursorAt: false• delay: 0• distance: 1• grid: false• handle: false• helper: "original"
• iframeFix: false• opacity: false
• refreshPositions: false• revert: false
• revertDuration: 500scope: "default"
• scroll: true• scrollSensitivity: 20
• scrollSpeed: 20• snap: false
• snapMode: "both"• snapTolerance: 20
• stack: false
![Page 10: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/10.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Draggable
Eventosstart()
• 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) { ... });
![Page 11: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/11.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Draggable
Eventosdrag()
• Tipo de evento: drag.
• Se lanza cuando el ratón se mueve durante el arrastre.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento drag como una
opción de configuración:$('.selector').draggable({
drag: function(event, ui) {...}});
• Vincular el evento drag por tipo: $('.selector').bind('drag', function(event, ui) { ... });
![Page 12: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/12.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Draggable
Eventosstop()
• Tipo de evento: dragstop.
• Se lanza cuando el ratón se mueve durante el arrastre.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento stop como una
opción de configuración:$('.selector').draggable({
stop: function(event, ui) {...}});
• Vincular el evento dragstop por tipo: $('.selector').bind('dragstop', function(event, ui) { ... });
![Page 13: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/13.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Draggable
Métodosdestroy()
• 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');
![Page 14: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/14.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Draggable
Métodosoption()
• Obtiene o establece cualquier opción de draggable. Si no se especifican valores, actúa como un getter.
• Uso:.draggable('option',optionName,[value]);
![Page 15: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/15.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Droppable
Visión GeneralEl 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: • El evento original del navegador• Un objeto ui preparado. Si a este parámetro le llamamos ui:
• 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.
![Page 16: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/16.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Droppable
Opciones
• accept: '*'• activeClass: false• addClasses: true• greedy: false• hoverClass: false• scope: 'default'• tolerance: 'intersect'
![Page 17: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/17.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Droppable
Eventosactivate()
• Tipo de evento: dropactivate.
• Se lanza cada vez que un draggable “aceptado” empieza a arrastrarse.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento activate como una
opción de configuración:$('.selector').droppable({
activate: function(event, ui) {...}});
• Vincular el evento dropactivate por tipo: $('.selector').bind('dropactivate', function(event, ui) { ... });
![Page 18: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/18.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Droppable
Eventosdeactivate()
• Tipo de evento: dropdeactivate.
• Se lanza cada vez que un draggable “aceptado” para el arrastre.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento deactivate como una
opción de configuración:$('.selector').droppable({
deactivate: function(event, ui) {...}});
• Vincular el evento dropdeactivate por tipo: $('.selector').bind('dropdeactivate', function(event, ui) { ... });
![Page 19: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/19.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Droppable
Eventosover()
• Tipo de evento: dropover.
• Se lanza cuando un draggable “aceptable” está siendo arrastrado sobre un elemento droppable que lo 'acepta'.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento over como una
opción de configuración:$('.selector').droppable({
over: function(event, ui) {...}});
• Vincular el evento dropover por tipo: $('.selector').bind('dropover', function(event, ui) { ... });
![Page 20: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/20.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Droppable
Eventosout()
• Tipo de evento: dropout.
• Se lanza cuando un draggable “aceptable” está siendo arrastrado fuera de un elemento droppable que lo 'acepta'.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento out como una opción
de configuración:$('.selector').droppable({
out: function(event, ui) {...}});
• Vincular el evento dropout por tipo: $('.selector').bind('dropout', function(event, ui) { ... });
![Page 21: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/21.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Droppable
Eventosdrop()
• 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.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento drop como una
opción de configuración:$('.selector').droppable({
drop: function(event, ui) {...}});
• Vincular el evento drop por tipo: $('.selector').bind('drop', function(event, ui) { ... });
![Page 22: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/22.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Droppable
Métodosdestroy()
• 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');
![Page 23: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/23.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Droppable
Métodosoption()
• Obtiene o establece cualquier opción de droppable. Si no se especifican valores, actúa como un getter.
• Uso:.droppable('option',optionName,[value]);
![Page 24: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/24.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Resizable
Visión GeneralEl 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: • El evento original del navegador• Un objeto ui preparado. Si a este parámetro le llamamos ui:
• 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.
![Page 25: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/25.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Interacciones - Resizable
Opciones
• alsoResize: false• animate: false• animateDuration: "slow"• animateEasing: "swing"• aspectRatio: false• autoHide: false• cancel: ":input,option"• containment: false• Delay: 0• distance: 1
• ghost: false• grid: false
• handles: "e,s,se"• helper: false
• maxHeight: null• maxWidth: null• minHeight: 10• minWidth: 10• zIndex: 1000
![Page 26: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/26.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Interacciones - Resizable
Eventosstart()
• Tipo de evento: resizestart.
• Se lanza cuando comienza la redimensión.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento start como una
opción de configuración:$('.selector').resizable({
start: function(event, ui) {...}});
• Vincular el evento resizestart por tipo: $('.selector').bind('resizestart', function(event, ui) { ... });
![Page 27: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/27.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Resizable
Eventosresize()
• Tipo de evento: resize.
• Se lanza durante la redimensión, cuando el control de redimensión está siendo arrastrado.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento resize como una
opción de configuración:$('.selector').resizable({
resize: function(event, ui) {...}});
• Vincular el evento resize por tipo: $('.selector').bind('resize', function(event, ui) { ... });
![Page 28: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/28.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Resizable
Eventosstop()
• Tipo de evento: resizestop.
• Se lanza cuando el finaliza la redimensión.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento stop como una
opción de configuración:$('.selector').resizable({
stop: function(event, ui) {...}});
• Vincular el evento resizestop por tipo: $('.selector').bind('resizestop', function(event, ui) { ... });
![Page 29: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/29.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Resizable
Métodosdestroy()
• 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');
![Page 30: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/30.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Interacciones - Resizable
Métodosoption()
• Obtiene o establece cualquier opción de resizable. Si no se especifican valores, actúa como un getter.
• Uso:.resizable('option',optionName,[value]);
![Page 31: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/31.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - 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,
![Page 32: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/32.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Selectable
Opciones
• autoRefresh: true• cancel: ":input,option"• delay: 0• distance: 0• filter: '*'• tolerance: 'touch'
![Page 33: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/33.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Selectable
Eventosselected()
• Tipo de evento: selected.
• Se lanza al finalizar una operación de selección, sobre cada elemento añadido a la selección.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento selected como una
opción de configuración:$('.selector').resizable({
selected: function(event, ui) {...}});
• Vincular el evento selected por tipo: $('.selector').bind('selected', function(event, ui) { ... });
![Page 34: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/34.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Selectable
Eventosselecting()
• Tipo de evento: selecting.
• Se lanza durante una operación de selección, sobre cada elemento añadido a la selección.
• Ejemplos de código:• Utilizando un callback para manejar el evento selecting como una opción de
configuración:$('.selector').resizable({
selecting: function(event, ui) {...}});
• Vincular el evento selecting por tipo: $('.selector').bind('selecting', function(event, ui) { ... });
![Page 35: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/35.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Selectable
Eventosstart()
• Tipo de evento: selectablestart.
• Se lanza cuando comienza la selección.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento start como una
opción de configuración:$('.selector').selectable({
start: function(event, ui) {...}});
• Vincular el evento selectablestart por tipo: $('.selector').bind('selectablestart', function(event, ui) { ... });
![Page 36: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/36.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Interacciones - Draggable
Eventosstop()
• Tipo de evento: selectablestop.
• Se lanza cuando se finaliza la selección.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento stop como una
opción de configuración:$('.selector').resizable({
stop: function(event, ui) {...}});
• Vincular el evento selectablestop por tipo: $('.selector').bind('selectablestop', function(event, ui) { ... });
![Page 37: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/37.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Selectable
Eventosunselected()
• Tipo de evento: unselected.
• Se lanza al final de la operación de selección, sobre cada elemento deseleccionado.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento unselected como
una opción de configuración:$('.selector').selectable({
deactivate: function(event, ui) {...}});
• Vincular el evento unselected por tipo: $('.selector').bind('unselected', function(event, ui) { ... });
![Page 38: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/38.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Selectable
Eventosunselecting()
• Tipo de evento: unselecting.
• Se lanza al durante la operación de selección, sobre cada elemento deseleccionado.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento unselecting como
una opción de configuración:$('.selector').selectable({
unselecting: function(event, ui) {...}});
• Vincular el evento unselecting por tipo: $('.selector').bind('unselecting', function(event, ui) { ... });
![Page 39: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/39.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Resizable
Métodosdestroy()
• 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');
![Page 40: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/40.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Resizable
Métodosoption()
• Obtiene o establece cualquier opción de resizable. Si no se especifican valores, actúa como un getter.
• Uso:.resizable('option',optionName,[value]);
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:.resizable('option',optionName,[value]);
![Page 41: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/41.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Sortable
Visión GeneralEl 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: • El evento original del navegador• Un objeto ui preparado. Si a este parámetro le llamamos ui:
• 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)
![Page 42: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/42.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Interacciones - Sortable
Opciones
• appendTo: "parent"• axis: false• cancel: ":input,option"• connectWith: false• containment: false• cursor: 'auto'• cursorAt: false• delay: 0• distance: 1• dropOnEmpty: true• forcePlaceholderSize: false• forceHelperSize: false• grid: false
• handle: false• helper: "original"
• items: '> *'• opacity: false
• placeholder: false• revert: false• scroll: true
• scrollSensitivity: 20• scrollSpeed: 20• scope: "default"
• tolerance: "intersect"• zIndex: 1000
![Page 43: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/43.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Sortable
Eventosstart()
• Tipo de evento: sortstart.
• Se lanza cuando comienza la ordenación o clasificación.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento start como una
opción de configuración:$('.selector').sortable({
start: function(event, ui) {...}});
• Vincular el evento sortstart por tipo: $('.selector').bind('sortstart', function(event, ui) { ... });
![Page 44: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/44.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Droppable
Eventossort()
• Tipo de evento: sort.
• Se lanza durante la clasificación/ordenación.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento sort como una
opción de configuración:$('.selector').sortable({
sort: function(event, ui) {...}});
• Vincular el evento sort por tipo: $('.selector').bind('sort', function(event, ui) { ... });
![Page 45: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/45.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Interacciones - Sortable
Eventoschange()
• Tipo de evento: sortchange.
• Se lanza durante la clasificación/ordenación, pero sólo cuando la posición DOM cambia.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento change como una
opción de configuración:$('.selector').sortable({
change: function(event, ui) {...}});
• Vincular el evento sortchange por tipo: $('.selector').bind('sortchange', function(event, ui) { ... });
![Page 46: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/46.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Sortable
EventosbeforeStop()
• Tipo de evento: sortbeforeStop.
• Se lanza cuando finaliza la clasificación/ordenación, pero cuando el placeholder/helper está aún disponible.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento beforeStop como
una opción de configuración:$('.selector').sortable({
beforeStop: function(event, ui) {...}});
• Vincular el evento sortbeforeStop por tipo: $('.selector').bind('sortbeforeStop', function(event, ui) { ... });
![Page 47: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/47.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Sortable
Eventosstop()
• Tipo de evento: sortstop.
• Se lanza cuando finaliza la ordenación/clasificación.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento stop como una
opción de configuración:$('.selector').sortable({
stop: function(event, ui) {...}});
• Vincular el evento sortstop por tipo: $('.selector').bind('sortstop', function(event, ui) { ... });
![Page 48: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/48.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Sortable
Eventosupdate()
• Tipo de evento: sortupdate.
• Se lanza cuando el usuario ha finalizado la ordenación/clasificación y la posición DOM ha cambiado.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento update como una
opción de configuración:$('.selector').sortable({
update: function(event, ui) {...}});
• Vincular el evento sortupdate por tipo: $('.selector').bind('sortupdate', function(event, ui) { ... });
![Page 49: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/49.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Interacciones - Sortable
Eventosreceive()
• Tipo de evento: sortreceive.
• Se lanza cuando una lista ordenable recibe un elemento de otra lista ordenable conectada a esta.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento update como una
opción de configuración:$('.selector').sortable({
remove: function(event, ui) {...}});
• Vincular el evento sortremove por tipo: $('.selector').bind('sortremove', function(event, ui) { ... });
![Page 50: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/50.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Interacciones - Sortable
Eventosremove()
• Tipo de evento: sortremove.
• Se lanza cuando se 'extrae' un elemento de una lista ordenable a otra lista ordenable conectada a esta.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento remove como una
opción de configuración:$('.selector').sortable({
receive: function(event, ui) {...}});
• Vincular el evento sortreceive por tipo: $('.selector').bind('sortreceive', function(event, ui) { ... });
![Page 51: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/51.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Sortable
Eventosover()
• Tipo de evento: sortover.
• Se lanza cuando un elemento se mueve en una lista ordenable conectada.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento over como una
opción de configuración:$('.selector').sortable({
over: function(event, ui) {...}});
• Vincular el evento sortover por tipo: $('.selector').bind('sortover', function(event, ui) { ... });
![Page 52: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/52.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Sortable
Eventosout()
• Tipo de evento: sortout.
• Se lanza cuando un elemento 'saca' de una lista conectada.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento out como una opción
de configuración:$('.selector').sortable({
out: function(event, ui) {...}});
• Vincular el evento sortout por tipo: $('.selector').bind('sortout', function(event, ui) { ... });
![Page 53: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/53.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Interacciones - Sortable
Eventosactivate()
• Tipo de evento: sortactivate.
• Se lanza cuando se usan listas conectadas, cada lista conectada los recive cuando se empieza a 'arrastrar'.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento activate como una
opción de configuración:$('.selector').sortable({
activate: function(event, ui) {...}});
• Vincular el evento sortactivaate por tipo: $('.selector').bind('sortactivate', function(event, ui) { ... });
![Page 54: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/54.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Interacciones - Sortable
Eventosdeactivate()
• Tipo de evento: sortdeactivate.
• Se lanza cuando finaliza la ordenación/clasificación, se propaga a todas las listas conectadas.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento deactivaate como
una opción de configuración:$('.selector').sortable({
deactivate: function(event, ui) {...}});
• Vincular el evento sortdeactivate por tipo: $('.selector').bind('sortdeactivate', function(event, ui) { ... });
![Page 55: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/55.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Sortable
Métodosdestroy()
• Elimina la funcionalidad 'sortable' completamente. Esto devolverá al elemento a su estado preinicial.
• Uso:.sortable('destroy');
disable()
• Deshabilita el sortable.• Uso:
.sortable('disable');
enable()
• Habilita el sortable.• Uso:
.sortable('enable');
![Page 56: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/56.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Interacciones - Sortable
Métodosoption()
• Obtiene o establece cualquier opción de sortable. Si no se especifican valores, actúa como un getter.
• 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]);
![Page 57: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/57.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Interacciones - Sortable
MétodostoArray()
• 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”
![Page 58: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/58.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Interacciones - Sortable
Métodosrefresh()
• 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');
![Page 59: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/59.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Accordion
Visión GeneralConvierte 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.
![Page 60: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/60.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Accordion
Opciones
• active: null• alwaysOpen: true
//deprecated, use collapsible• animated: 'slide'• autoHeight: true• clearStyle: false• collapsible: false• event: "click"• fillSpace: false• header: "> li > :first-child,>
:not(li):even"
• Icons: { header: "ui-icon-triangle-1-e",
headerSelected: "ui-icon-triangle-1-s"}
• navigation: false• navigationFilter: function() { return this.href.toLowerCase() ==
location.href.toLowerCase();}
![Page 61: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/61.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Widgets - Accordion
Eventoschange()
• 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.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento change como una
opción de configuración:$('.selector').resizable({
change: function(event, ui) {...}});
• Vincular el evento accordionchange por tipo: $('.selector').bind('accordionchange', function(event, ui) { ... });
![Page 62: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/62.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Widgets - Accordion
Eventoschangestart()
• Tipo de evento: accordionchangestart.
• Se lanza cada vez que el acordeón comienza a cambiar.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento changeStart como
una opción de configuración:$('.selector').resizable({
changestart: function(event, ui) {...}});
• Vincular el evento accordionchangestart por tipo: $('.selector').bind('accordionchangestart', function(event, ui) { ... });
![Page 63: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/63.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Widgets - Accordion
Métodosdestroy()
• Elimina la funcionalidad 'accordion' completamente. Esto devolverá al elemento a su estado preinicial.
• Uso:.accordion('destroy');
disable()
• Deshabilita el accordion.• Uso:
.accordion('disable');
enable()
• Habilita el accordion.• Uso:
.accordion('enable');
![Page 64: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/64.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Accordion
Métodosoption()
• Obtiene o establece cualquier opción de accordion. Si no se especifican valores, actúa como un getter.
• Uso:.accordion('option',optionName,[value]);
activate()
• Activa una parte de contenido del accordion especificado por el índice. • Uso:
.accordion('activate',index);
![Page 65: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/65.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Datepicker
Visión GeneralEl 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.
![Page 66: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/66.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Datepicker
Opciones
• altField• altFormat• appendText• buttonImage• buttonImageOnly• buttonText• changeMonth• changeYear• closeText• constrainInput• currentText• dateFormat• dayNames• dayNamesMin• dayNamesShort• defaultDate• duration• firstDay• gotoCurrent• hideIfNoPrevNext
• isRTL• maxDate• minDate
• monthNames• monthNamesShort
• navigationAsDateFormat• nextText
• numberOfMonths• prevText
• shortYearCutoff• showAnim
• showButtonPanel• howCurrentAtPos
• showMonthAfterYear• showOn
• showOptions• showOtherMonths
• stepMonths• yearRange
![Page 67: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/67.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Datepicker
EventosbeforeShow()
• 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.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento beforeShow como
una opción de configuración:$('.selector').datepicker({
beforeShow: function(event, ui) {...}});
![Page 68: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/68.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Datepicker
EventosbeforeShowDay()
• 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.
• Ejemplos de código:• Utilizando un callback para manejar el evento beforeShowDay como una
opción de configuración:$('.selector').datepicker({
beforeShowDay: function(event, ui) {...}});
![Page 69: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/69.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Widgets - Datepicker
EventosonChangeMonthYear()
• 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.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento
onChangeMonthYear como una opción de configuración:$('.selector').datepicker({
onChangeMonthYear: function(event, ui) {...}});
![Page 70: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/70.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Widgets - Datepicker
EventosonClose()
• 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.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento onClose como una
opción de configuración:$('.selector').datepicker({
onClose: function(event, ui) {...}});
![Page 71: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/71.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Widgets - Datepicker
EventosonSelect()
• 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.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento onSelect como una
opción de configuración:$('.selector').datepicker({
onSelect: function(event, ui) {...}});
![Page 72: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/72.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Datepicker
Métodosdestroy()
• Elimina la funcionalidad datepicker por completo.• Uso:
.datepicker('destroy');
disable()
• Deshabilita el datepicker.• Uso:
.datepicker('disable');
enable()
• Habilita el datepicker.• Uso:
.datepicker('enable');
![Page 73: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/73.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Datepicker
Métodosoption()
• 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]);
![Page 74: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/74.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Datepicker
MétodosisDisabled()
• 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');
![Page 75: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/75.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Datepicker
MétodosgetDate()
• 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);
![Page 76: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/76.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - 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.
![Page 77: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/77.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Dialog
Opciones
• autoOpen: true• bgiframe: false• buttons: {}• closeOnEscape: true• closeText: 'close'• dialogClass: ''• draggable: true• hide: null• height: 'auto'• maxHeight: false• maxWidth: false
• minHeight: 150• minWidth: 150
• modal: false• position: 'center'• resizable: true
• show: null• stack: true
• title: ''• width: 300
• zIndex: 1000
![Page 78: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/78.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Dialog
Eventosbeforeclose()
• 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á.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento beforeclose como
una opción de configuración:$('.selector').dialog({
beforeclose: function(event, ui) {...}});
• Vincular el evento accordionchange por tipo: $('.selector').bind('dialogbeforeclose', function(event, ui) {
...});
![Page 79: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/79.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Dialog
Eventosopen()
• Tipo evento: dialogopen
• Este evento se dispara cuando se va abre dialog. .
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento open como una
opción de configuración:$('.selector').dialog({
open: function(event, ui) {...}});
• Vincular el evento dialogopen por tipo: $('.selector').bind('dialogopen', function(event, ui) {
...});
![Page 80: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/80.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Dialog
Eventosfocus()
• Tipo evento: dialogfocus
• Este evento se dispara cuando el dialog obtiene el foco.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento focus como una
opción de configuración:$('.selector').dialog({
focus: function(event, ui) {...}});
• Vincular el evento dialogfocus por tipo: $('.selector').bind('dialogfocus', function(event, ui) {
...});
![Page 81: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/81.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Dialog
EventosdragStart()
• Tipo evento: dragStart
• Este evento se dispara cuando se empieza a mover/arrastrar el dialog.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento dragStart como una
opción de configuración:$('.selector').dialog({
dragStart: function(event, ui) {...}});
• Vincular el evento dragStart por tipo: $('.selector').bind('dragStart', function(event, ui) {
...});
![Page 82: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/82.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Dialog
Eventosdrag()
• Tipo evento: drag
• Este evento se dispara cuando se está moviendo/arrastrando el dialog.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento drag como una
opción de configuración:$('.selector').dialog({
drag: function(event, ui) {...}});
• Vincular el evento drag por tipo: $('.selector').bind('drag', function(event, ui) {
...});
![Page 83: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/83.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Dialog
EventosdragStop()
• Tipo evento: dragStop
• Este evento se dispara al finalizar movimiento/arrastrado del dialog.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento dragStop como una
opción de configuración:$('.selector').dialog({
dragStop: function(event, ui) {...}});
• Vincular el evento dragStop por tipo: $('.selector').bind('dragStop', function(event, ui) {
...});
![Page 84: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/84.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Dialog
EventosresizeStart()
• Tipo evento: resizeStart
• Este evento se dispara al comenzar la redimensión del dialog.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento resizeStart como
una opción de configuración:$('.selector').dialog({
resizeStart: function(event, ui) {...}});
• Vincular el evento resizeStart por tipo: $('.selector').bind('resizeStart', function(event, ui) {
...});
![Page 85: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/85.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Dialog
Eventosresize()
• Tipo evento: resize
• Este evento se dispara mientras se redimensiona el dialog.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento resize como una
opción de configuración:$('.selector').dialog({
resize: function(event, ui) {...}});
• Vincular el evento resize por tipo: $('.selector').bind('resize', function(event, ui) {
...});
![Page 86: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/86.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Dialog
EventosresizeStop()
• Tipo evento: resizeStop
• Este evento se dispara cuando se acaba de redimensionar el dialog.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento resizeStop como
una opción de configuración:$('.selector').dialog({
resizeStop: function(event, ui) {...}});
• Vincular el evento resizeStop por tipo: $('.selector').bind('resizeStop', function(event, ui) {
...});
![Page 87: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/87.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Dialog
Eventosclose()
• Tipo evento: dialogclose
• Este evento se dispara cuando se cierra el dialog.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento close como una
opción de configuración:$('.selector').dialog({
close: function(event, ui) {...}});
• Vincular el evento dialogclose por tipo: $('.selector').bind('dialogclose', function(event, ui) {
...});
![Page 88: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/88.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Dialog
Métodosdestroy()
• Elimina la funcionalidad dialog por completo.• Uso:
.dialog('destroy');
disable()
• Deshabilita el dialog.• Uso:
.dialog('disable');
enable()
• Habilita el dialog.• Uso:
.dialog('enable');
![Page 89: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/89.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Dialog
Métodosoption()
• Obtiene o establece cualquier opción de dialog. Si no se especifican valores, actúa como un getter.
• Uso:.dialog('option',optionName,[value]);
close()
• Cierra el dialog.• Uso:
.dialog('close');
isOpen()
• Devuelve true si el dialog ya está abierto.• Uso:
.dialog('isOpen');
![Page 90: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/90.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Widgets - Dialog
MétodosmoveToUp()
• Mueve el dialog a la cima de la pila de dialogs.• Uso:
.datepicker('moveToUp');
open()
• Abre el dialog.• Uso:
.datepicker('open');
![Page 91: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/91.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - 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.
![Page 92: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/92.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Progressbar
Opciones
• value: 0
![Page 93: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/93.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Progressbar
Eventoschange()
• Tipo evento: progressbarchange
• Este evento se dispara cuando se cambiar el estado de la barra de progreso.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento change como una
opción de configuración:$('.selector').progressbar({
change: function(event, ui) {...}});
• Vincular el evento progressbarchange por tipo: $('.selector').bind('progressbarchange', function(event, ui) {
...});
![Page 94: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/94.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Widgets - Progressbar
Métodosdestroy()
• Elimina la funcionalidad progressbar por completo.• Uso:
.progressbar('destroy');
disable()
• Deshabilita el progressbar.• Uso:
.progressbar('disable');
enable()
• Habilita el progressbar.• Uso:
.progressbar('enable');
![Page 95: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/95.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Progressbar
Métodosoption()
• 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]);
![Page 96: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/96.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Widgets - SliderVisió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: • El evento original del navegador• Un objeto ui preparado. Si a este parámetro le llamamos ui:
• ui.handle: Elemento DOM, el controlador que actualmente tiene el foco.• ui.value: Entero, el valor actual del controlador.
![Page 97: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/97.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Slider
Opciones
• animate: false• max: 100• min: 0• orientation: 'horizontal'• range: false• step: 1• value: 0• values: null
![Page 98: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/98.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Slider
Eventosstart()
• Tipo evento: slidestart
• Este evento se dispara cuando el usuario comienza a 'desaplazar'.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento start como una
opción de configuración:$('.selector').slider({
start: function(event, ui) {...}});
• Vincular el evento slidestart por tipo: $('.selector').bind('slidestart', function(event, ui) {
...});
![Page 99: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/99.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Slider
Eventosslide()
• Tipo evento: slide
• Este evento se dispara en cada movimiento del ratón durante el deplazamiento.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento slide como una
opción de configuración:$('.selector').slider({
slide: function(event, ui) {...}});
• Vincular el evento slide por tipo: $('.selector').bind('slide', function(event, ui) {
...});
![Page 100: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/100.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Slider
Eventoschange()
• 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.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento change como una
opción de configuración:$('.selector').slider({
change: function(event, ui) {...}});
• Vincular el evento slidechange por tipo: $('.selector').bind('change', function(event, ui) {
...});
![Page 101: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/101.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Slider
Eventosstop()
• Tipo evento: slidestop
• Este evento se dispara cuando el usuario deja de deslizar.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento stop como una
opción de configuración:$('.selector').slider({
stop: function(event, ui) {...}});
• Vincular el evento slidestop por tipo: $('.selector').bind('slidestop', function(event, ui) {
...});
![Page 102: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/102.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Slider
Métodosdestroy()
• Elimina la funcionalidad slider por completo.• Uso:
.slider('destroy');
disable()
• Deshabilita el slider.• Uso:
.slider('disable');
enable()
• Habilita el slider.• Uso:
.slider('enable');
![Page 103: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/103.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Slider
Métodosoption()
• Obtiene o establece cualquier opción de slider. Si no se especifican valores, actúa como un getter.
• 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]);
![Page 104: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/104.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - TabsVisió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.
![Page 105: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/105.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Widgets - TabsVisió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).
![Page 106: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/106.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - 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>'
![Page 107: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/107.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Widgets - Tabs
Eventosselect()
• Tipo evento: tabsselect
• Este evento se dispara cuando se clica una pestaña.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento select como una
opción de configuración:$('.selector').tabs({
select: function(event, ui) {...}});
• Vincular el evento tabsselect por tipo: $('.selector').bind('tabsselect', function(event, ui) {
...});
![Page 108: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/108.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Tabs
Eventosload()
• Tipo evento: tabsload
• Este evento se dispara cuando se carga el contenido de una pestaña remota.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento load como una
opción de configuración:$('.selector').tabs({
load: function(event, ui) {...}});
• Vincular el evento tabsload por tipo: $('.selector').bind('tabsload', function(event, ui) {
...});
![Page 109: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/109.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Tabs
Eventosshow()
• Tipo evento: tabsshow
• Este evento se dispara cuando se muestra una pestaña• Ejemplos de código:
• Utilizando una función de retorno para manejar el evento show como una opción de configuración:
$('.selector').tabs({show: function(event, ui) {...}
});
• Vincular el evento tabsshow por tipo: $('.selector').bind('tabsshow', function(event, ui) {
...});
![Page 110: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/110.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Tabs
Eventosadd()
• Tipo evento: tabsadd
• Este evento se dispara cuando se añade una pestaña.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento add como una
opción de configuración:$('.selector').tabs({
add: function(event, ui) {...}});
• Vincular el evento tabsadd por tipo: $('.selector').bind('tabadd', function(event, ui) {
...});
![Page 111: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/111.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Tabs
Eventosremove()
• Tipo evento: tabsremove
• Este evento se dispara cuando se elimina una pestaña.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento remove como una
opción de configuración:$('.selector').tabs({
remove: function(event, ui) {...}});
• Vincular el evento tabsremove por tipo: $('.selector').bind('tabsremove', function(event, ui) {
...});
![Page 112: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/112.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Tabs
Eventosenable()
• Tipo evento: tabsenable
• Este evento se dispara cuando se habilita una pestaña.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento enable como una
opción de configuración:$('.selector').tabs({
enable: function(event, ui) {...}});
• Vincular el evento tabsenable por tipo: $('.selector').bind('tabsenable', function(event, ui) {
...});
![Page 113: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/113.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Tabs
Eventosdisable()
• Tipo evento: tabsdisable
• Este evento se dispara cuando se deshabilita una pestaña.
• Ejemplos de código:• Utilizando una función de retorno para manejar el evento disable como una
opción de configuración:$('.selector').tabs({
disable: function(event, ui) {...}});
• Vincular el evento tabsdisable por tipo: $('.selector').bind('tabsdisable', function(event, ui) {
...});
![Page 114: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/114.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Tabs
Métodosdestroy()
• Elimina la funcionalidad tabs por completo.• Uso:
.tabs('destroy');
disable()
• Deshabilita el tabs.• Uso:
.tabs('disable');
enable()
• Habilita el tabs.• Uso:
.tabs('enable');
![Page 115: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/115.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Tabs
Métodosoption()
• Obtiene o establece cualquier opción de Tabs. Si no se especifican valores, actúa como un getter.
• 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] )
![Page 116: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/116.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3Widgets - Tabs
Métodosremove()
• 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)
![Page 117: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/117.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Tabs
Métodosselect()
• 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)
![Page 118: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/118.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3Widgets - Tabs
Métodoslength()
• 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])
![Page 119: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/119.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
EFFECTS
Efectos: Transiciones animadas y facilidades para interacciones.
Hay muchas maneras para añadir efectos de animación fácilmente, muchas de las cuales simplemente extienden los métodos de jQuery
Efecto de transición básico:
La forma más sencilla de aplicar un efecto de animación es llamando al método effect() sobre cualquier elemento DOM y especificar el tipo de animación, opciones, velocidad y callbacks si se necesitan.
Effect: Una manera directa de aplicar una animación a cualquier elemento.
effect( effect, [options], [speed], [callback] )
![Page 120: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/120.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
EFFECTSTransiciones de visibilidad
Estos efectos extienden la clase API base para completar con transiciones visuales las funciones estándares de visibilidad de jQuery hide, show y toggle. Todas los tipos de animación estándares están soportados.
Show: Cuando se muestra un elemento, se anima la 'entrada'
show( effect, [options], [speed], [callback] )
Hide: Cuando un elemento se esconde, se anima la 'salida'
hide( effect, [options], [speed], [callback] )
Toggle: Cuando sobre un elemento se conmuta entre los estados show o hide, se anima la transición.
toggle( effect, [options], [speed], [callback] )
![Page 121: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/121.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3
EFFECTSTransiciones de color
Los efectos de jQuery UI extienden la función de animación para que sea capaz de animar colores también. Estas transiciones pueden animar el color de fondo y el color de los bordes, y aceptan colores especificados en hexadecimal, rgb o nombres de colors.
Animate: Animar colores de fondo y bordes
.animate( {styleOps} )
![Page 122: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/122.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
EFFECTSTransiciones de classe
Se extiende la clase base para que sea capaz de animar entre clases.
Estos efectos analizan las diferencias entre las clases y automáticamente construyen una animación paralela para transformar entre una variedad de atributos de estilo diferentes.
Cualquier atributo de estilo que contenga un valor numérico, será animado, desde colores hex hasta dimensiones, paddings, márgenes, anchura de bordes, posición, tamaño de fuente, altura de línea... todo será animado automáticamente.
addClass: Añade una clase a los elementos con una transición animada entre los estados
.addClass( class, [duration] )
removeClass: elimina una clase a los elementos con una transición animada entre los estados
.removeClass( class, [duration] )
toggleClass: Añade una clase a los elementos si no está presente, y lo elimina si está presente, con una transición animada
.toggleClass( class, [duration] )
switchClass: Intercambia entre una clase y otra con una transición animada.
.switchClass( remove, add, [duration]
![Page 123: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/123.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery .1 3
Enlaces
http://ui.jquery.com/http://www.jquery.comhttp://plugins.jquery.comhttp://www.getfirebug.comhttp://chrispederick.com/work/web-developer/http://livehttpheaders.mozdev.org/
![Page 124: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/124.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Licencia Copyleft
Eider Bilbao Goitia <[email protected]>
Copyright
![Page 125: jQuery 1.3 UI eghost Julio2009](https://reader034.fdocuments.net/reader034/viewer/2022050808/54b43f214a7959903f8b4608/html5/thumbnails/125.jpg)
Introducción a jQuery y nuevas funcionalidades de jQuery 1.3
Licencia Copyleft
Este documento está protegido bajo la licencia Reconocimiento-SinObraDerivada 2.1 España de Creative Common (http://creativecommons.org/licenses/by-nc-sa/3.0/es/)
Copyright © 2008 Irontec <[email protected]>
Se permite la copia, modificación, distribución, usocomercial y realización de la obra, siempre y cuando sereconozca la autoría de la misma, a no sea ser que seobtenga permiso expreso del autor. El autor no permitedistribuir obras derivadas a esta.
Esta nota no es la licencia completa de la obra, sinouna traducción de la nota orientativa de la licenciaoriginal completa (jurídicamente válida).