игры для смартфонов бесплатно

Hacer Swipe con Jquery Mobile

Por muchos foros busqué y encontré muchas respuestas para hacer el swipe o como yo le entiendo efecto o acción al desplazar el mouse o dedos tantos pixeles a la dirección que uno le indique, pero siento que les faltaba completarlo.

También hago este pequeño tutorial en agradecimiento a todos esos comentarios en foros que aclaran dudas, trataré de expresarme lo más simple posible.

Para hacer este efecto no necesitamos descargar librerías ni nada porque el mismo Jquery Mobile lo posee y sólo debes invocarlo, vamos a ello:

En este ejemplo se hacen dos tipos de swipe, un swipe a la izquiera y otro a la derecha.

//Hacer swipe

$(‘div.ui-page’).live(“swipeleft”, function () {

var nextpage = $(this).next(‘div[data-role="page"]‘);

if (nextpage.length > 0) {

$.mobile.changePage(nextpage, {

transition: “slide”, //Puedes usar cualquier transición de jquery mobile

reverse: false

}, false, true);

$.event.special.swipe.horizontalDistanceThreshold = 120;//Aquí asignamos cuanto va a ser el valor requerido para que la acción sea realizada, si se desplaza el dedo 120 px en este caso entonces el swipe se activará

}

});

$(‘div.ui-page’).live(“swiperight”, function () {

var prevpage = $(this).prev(‘div[data-role="page"]‘);

if (prevpage.length > 0) {

$.mobile.changePage(prevpage, {

transition: “slide”,

reverse: true

}, true, true);

$.event.special.swipe.horizontalDistanceThreshold = 120;

}

});

Y por último le asignamos el evento que activará el swipe, automáticamente al deslizar el dedo/mouse 30px al lado derecho o izquierdo se activará el evento, pero nosotros en este ejemplo le aplicaremos 120px para que el efecto funcione. Leer más Sin comentarios