Swipe event érzékelés
Sziasztok!
Egy weboldal mobilos verzióját fejlesztem épp. Vannak cikkek ezen az oldalon és egy cikk több oldalból áll általában. A mobilos verzióban úgy kéne ennek működnie, hogy ha a #content div fölött balra swipe-ol a user, akkor töltse be a következő oldalt, ha pedig jobbra, akkor az előző oldalt. Egészen egyszerű is lenne az egyszeri fejlesztő élete, ha nem lenne egy szép bug a böngészőben/androidban. Workaround persze van: megkell hívni az event.preventDefault metódust. Ezzel azonban az a probléma, hogy kinagyított oldal esetén gyakorlatilag nem működik sem a nagyítás/kicsinyítés, sem a mozgatás. Egyelőre úgy sikerült csak megoldanom az oldalváltást, hogy csak akkor vált, ha az oldal nincs kinagyítva. Ez így nem a legszebb megoldás, így ha valakinek van ötlete a probléma megoldására, ne tartsa magában! :)
(Ui.: jQuery Mobile-t és különböző libeket próbáltam már, sajnos nem sok sikerrel)
Így fest jelenleg a kód:
■ Egy weboldal mobilos verzióját fejlesztem épp. Vannak cikkek ezen az oldalon és egy cikk több oldalból áll általában. A mobilos verzióban úgy kéne ennek működnie, hogy ha a #content div fölött balra swipe-ol a user, akkor töltse be a következő oldalt, ha pedig jobbra, akkor az előző oldalt. Egészen egyszerű is lenne az egyszeri fejlesztő élete, ha nem lenne egy szép bug a böngészőben/androidban. Workaround persze van: megkell hívni az event.preventDefault metódust. Ezzel azonban az a probléma, hogy kinagyított oldal esetén gyakorlatilag nem működik sem a nagyítás/kicsinyítés, sem a mozgatás. Egyelőre úgy sikerült csak megoldanom az oldalváltást, hogy csak akkor vált, ha az oldal nincs kinagyítva. Ez így nem a legszebb megoldás, így ha valakinek van ötlete a probléma megoldására, ne tartsa magában! :)
(Ui.: jQuery Mobile-t és különböző libeket próbáltam már, sajnos nem sok sikerrel)
Így fest jelenleg a kód:
var startTime,
startEvent,
endEvent,
zoomLevel;
window.addEventListener('touchstart', function(event) {
startTime = Date.now();
startEvent = event;
zoomLevel = window.innerWidth / $('body').width();
if(event.touches.length === 1 && zoomLevel > 0.99) {
// Csak így fut le a touchend event a böngésző bug miatt
event.preventDefault();
}
}, false);
window.addEventListener('touchmove', function(event) {
var sensitivity = 50,
deltaX, deltaY, quickSwipe = false;
zoomLevel = window.innerWidth / $('body').width();
if((endEvent && "touches" in endEvent) && (event && "touches" in event)) {
deltaX = event.touches[0].pageX - endEvent.touches[0].pageX;
deltaY = event.touches[0].pageY - endEvent.touches[0].pageY;
quickSwipe = Math.abs(deltaX) > sensitivity;
}
endEvent = event;
if(event.touches.length === 1 && zoomLevel > 0.99 && quickSwipe) {
event.preventDefault();
}
}, false);
window.addEventListener('touchend',function(event) {
if(!endEvent || !("touches" in endEvent) || endEvent.touches.length === 2) {
return;
}
if(Date.now() - startTime < 250) {
if(startEvent.touches[0].pageX > endEvent.touches[0].pageX) {
var nextPageAnchor = $(".highbut").next("a");
if(endEvent.touches.length === 1 && nextPageAnchor.length > 0) {
location.href = nextPageAnchor.attr("href");
}
}
else {
var prevPageAnchor = $(".highbut").prev("a");
if(endEvent.touches.length === 1 && prevPageAnchor.length > 0) {
location.href = prevPageAnchor.attr("href");
}
}
}
}, false);
jQuery.event.swipe
Mindenesetre szerintem ez egy elfogathatóan működő példa: http://stephband.info/jquery.event.swipe/
használj külső könyvtárat