Eventos en jQuery Mobile

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Touch events: tap, taphold (1 segundo), swipe, (tanto vertical como horizontalmente, más de 30px), swipeleft, swiperight.

Scroll events: se disparan cuando empiezo y paro de hacer scroll.

Page events:
Para página internas:
pagebeforecreate → pagecreate → pageinit.
En pagebeforecreate puedes manipular cualquier etiqueta antes de que jQM lo haga. Usaremos page init en vez del evento ready del DOM.
Para carga de páginas externas:
pagebeforeload → pageload
→ pageloadfailed pageremove
Orientation events: se disparan cuando el dispositivo cambia su orientación.

Touch events

Usando jQueryMobile ya no usaremos $(document).ready(). En su lugar usaremos:

<script type="text/javascript">
	$(document).on("pageinit", "#firstpage",function(evt){
		$("#firstpage").on("tap", function(e){
			alert("tap");
		});
		$("#firstpage").on("swiperight", function(e){
			alert("swiperight");
		});

		$("#firstpage").on("swipeleft", function(e){
			alert("swipeleft");
		});
	})
</script>

Nota: Observamos que el tap se dispara cuando hacemos swipe. Habrá que probar este código en el emulador o en el móvil para que el tap se dispare sólo cuando corresponda.

Orientation event

$(document).on("pageinit", "#firstpage",function(evt){
	$("#firstpage").on("orientationchange", function(e){
		alert("orientation changed to: " + e.orientation);
	});
})

Scroll Events

$(document).on("pageinit", "#firstpage",function(evt){
	$(document).on("scrollstop", function(e){
		alert("scrolling stopped");
	});
})

Page events – transitions

$(document).on("pagebeforehide", "#firstpage",function(evt, data){
	alert("página antes de ocultarse");
})
$(document).on("pagebeforeshow", "#firstpage",function(evt, data){
	alert("página antes de mostrarse");
})
$(document).on("pagehide", "#firstpage",function(evt, data){
	alert("página que se oculta");
})
$(document).on("pageshow", "#firstpage",function(evt, data){
	alert("página que se muestra");
})

Otros métodos y propiedades

• $.mobile.changePage(to, options) → para cambiar la página programaticamente. El segundo parámetro es opcional.
• $.mobile.silentScroll(vPos) → hace un scroll hasta una posición determinada sin activar los listeners de scroll.
• $.mobile.activePage → propiedad que contiene la página actual.
• $.mobile.showPageLoadingMsg() → muestra un cuadro de dialogo de carga.
• $.mobile.hidePageLoadingMsg() → oculta el cuadro de dialogo de carga.

Importante!: Tras añadir elementos dinámicamente (usando javascript) estos no cogen los estilos de jquerymobile, para que que los cojan, usaremos: $(«#mainList»).trigger(«create»);

Ejercicio

Al hacer swipe right, avanzar a la siguiente página.