jQuery Mobile ofrece varios eventos personalizados que se han implementado sobre los eventos nativos para asi aumentar las posibilidades de los UI en las plataformas móviles. Nótese que estos eventos emplean varios eventos de tipo touch, mouse o de ventana, dependiendo de la existencia del evento, asi que puedes hacer bind a eventos tanto en plataforma móviles como en entornos desktop. Puedes engancharte a estos eventos como cualquier otro evento jQuery, utilizando los métodos live() o bind().
Eventos touch
tap
Toque de la pantalla rápido
taphold
Toque de la pantalla por al menos un segundo
swipe
Este evento ocurre cuando se realiza un arrastrado horizontal por la pantalla de 30px o más (y menos de 20px verticalmente) durante al menos un segundo.
swipeleft
El mismo evento que el anterior pero cuando la dirección es hacia la izquierda.
swiperight
El mismo evento que el anterior pero cuando la dirección es hacia la derecha
Evento de cambio de orientación
orientationchange
Este evento se dispara cuando la orientación del dispositivo cambia (girándolo verticalmente u horizontalmente). Cuando te enganchas a este eventos, la función de callback puede recibir un segundo argumento, que contiene la property ‘orientation’ cuyos valores posibles son “portrait” o “landscape”.Estos valores son también añadidos como clases al elemento HTML, permitiendo que se pueda seleccionar desde selectores CSS. Nótese que cuando este evento no está soportado por el dispositivo , la implementación actual de jQuery Mobile invoca el evento resize.
Eventos de Scroll
scrollstart
Se dispara cuando comienza el scroll. Nótese que los dispositivos con iOS congelan la manipulación del DOM mientras se hace el scroll, encolando eventos hasta que acaba el scroll. Actualmente se está investigando formas para permitir manipulaciones DOM que se apliquen antes de que comienze el scroll.
scrollstop
Cuando el scroll termina
Eventos de esconder/mostrar Page
Cuandoquiera que una página es mostrada o escondida con jQuery Mobile, se disparan dos eventos sobre esa página. Los eventos disparados dependen de si esa página está siendo mostrada o siendo escondida, asi que cuando una tiene lugar una transición de Page, se disparan 4 eventos: 2 por página
pagebeforeshow
Antes de que la página vaya a ser mostrada
pagebeforehide
Antes de que la página vaya a ser escondida
pageshow
Después de que la página ha sido mostrada
pagehide
Después de que la página ha sido escondida
Nota que estos 4 eventos pueden hacer referencia tanto a la siguiente pagina (nextPage) como a la página previa (prevPage), dependiendo de si la página esta siendo mostrada o escondida, y de si existe o no la pagina siguiente o previa (la primera página de todas no tiene una página previa a referenciar, pero de todas formas hay un objeto jQuery vació para el caso). Puedes acceder a esta referencia a través del segundo argumento de la función callback. Por ejemplo:
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$('div').live('pagehide',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
También , para que estos handlers sean invocados durante la carga de la página inicial, debes engancharlos antes de que se ejecute eljQuery Mobile. Esto por ejemplo, se puede hacer en el mobileInit handler, como se describió en el artículo sobre la autoinicializacion de configuraciones.
Eventos de inicialización de Page
Internamente, jQuery Mobile autoinicializa plugins basándose en las convenciones de maquetado encontradas en la “page” que esté. Por ejemplo, un elemento input de tipo rango automáticamente generará un slider control personalizado.
Esta auto-inicializacion se controla por el plugin “page”, que despacha eventos antes y después de que se ejecute, permitiendo manipular un page en la pre/post inicialización, o incluso proporcionarle un comportamiento de inicialización personalizado hasta prevenir de que se hagan autoinicializaciones. Nótese que estos eventos sólo se dispararán una vez por página, a diferencia de los eventos “show/hide”, que se disparan cada vez que una página es mostrada o escondida.
pagebeforecreate
Antes de que se haga la inicializacion
pagecreate
Después de que se haga la inicializacion
$('#aboutPage').live('pagebeforecreate',function(event){
alert('This page was just inserted into the dom!');
});
$('#aboutPage').live('pagecreate',function(event){
alert('This page was just enhanced by jQuery Mobile!');
});
Nótese que si hacemos un binding del eventos pagebeforecreate y hacemos retornar false , prevenimos que el plugin de la page haga sus manipulaciones:
$('#aboutPage').live('pagebeforecreate',function(event){
//run your own enhancement scripting here...
return false;
});
Nota sobre los Page IDs de la versión Alpha 2: En esta versión y anteriores, los elementos page utilizaban el atributo ID para almacenar la localización desde donde venían. Luego cuando colocamos un atributo ID en una page que es mostrada como una página simple dejQuery mobile a través de Ajax, jQuery Mobile envuelve esa página en otro elemento div “page”, conservando asi todas las referencias CSS al ID. Sin embargo , esto significa que el atributo ID ya no está en el elemento “page”, asi que debes acordarte de esto cuando se hagan binding de eventos page (pagebeforecreate, pagecreate, etc). Para evitar problemas , intenta utilizar una clase CSS si es posible.
Eventos de Animación
jQuery Mobile tiene un plugin llamada “animationComplete” , que se ejecuta después de añadir o borrar un class que aplica una transición CSS.