ugrás a tartalomhoz

Swipe event érzékelés

gabesz666 · 2012. Dec. 17. (H), 10.13
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:
  1. var startTime,  
  2.     startEvent,  
  3.     endEvent,  
  4.     zoomLevel;  
  5.   
  6. window.addEventListener('touchstart', function(event) {  
  7.   
  8.     startTime = Date.now();  
  9.     startEvent = event;  
  10.     zoomLevel = window.innerWidth / $('body').width();  
  11.   
  12.     if(event.touches.length === 1 && zoomLevel > 0.99) {  
  13.         // Csak így fut le a touchend event a böngésző bug miatt  
  14.         event.preventDefault();  
  15.     }  
  16.   
  17. }, false);  
  18.   
  19. window.addEventListener('touchmove', function(event) {  
  20.   
  21.     var sensitivity = 50,  
  22.         deltaX, deltaY, quickSwipe = false;  
  23.         zoomLevel = window.innerWidth / $('body').width();  
  24.   
  25.     if((endEvent && "touches" in endEvent) && (event && "touches" in event)) {  
  26.         deltaX = event.touches[0].pageX - endEvent.touches[0].pageX;  
  27.         deltaY = event.touches[0].pageY - endEvent.touches[0].pageY;  
  28.   
  29.         quickSwipe = Math.abs(deltaX) > sensitivity;  
  30.     }  
  31.       
  32.     endEvent = event;  
  33.       
  34.     if(event.touches.length === 1 && zoomLevel > 0.99 && quickSwipe) {  
  35.         event.preventDefault();  
  36.     }  
  37.   
  38. }, false);  
  39.   
  40. window.addEventListener('touchend',function(event) {  
  41.       
  42.     if(!endEvent || !("touches" in endEvent) || endEvent.touches.length === 2) {  
  43.         return;  
  44.     }  
  45.   
  46.     if(Date.now() - startTime < 250) {  
  47.           
  48.         if(startEvent.touches[0].pageX > endEvent.touches[0].pageX) {  
  49.   
  50.             var nextPageAnchor = $(".highbut").next("a");  
  51.               
  52.             if(endEvent.touches.length === 1 && nextPageAnchor.length > 0) {  
  53.                 location.href = nextPageAnchor.attr("href");  
  54.             }  
  55.   
  56.         }  
  57.         else {  
  58.       
  59.             var prevPageAnchor = $(".highbut").prev("a");  
  60.               
  61.             if(endEvent.touches.length === 1 && prevPageAnchor.length > 0) {  
  62.                 location.href = prevPageAnchor.attr("href");  
  63.             }  
  64.   
  65.         }  
  66.   
  67.     }  
  68.   
  69. }, false);  
‹ Táblázat használata oldal tartalmának pozícionálásra Backbone validator kész ›
 ■
1

jQuery.event.swipe

T.G · 2012. Dec. 17. (H), 12.30
Szerintem ezzel érdemes óvatosan bánni, mert nem biztos, hogy ki tudod találni (biztos nem tudod kitalálni) minden esetben, hogy a juzer mit szeretett volna? Scroll-t vagy swipe-t?
Mindenesetre szerintem ez egy elfogathatóan működő példa: http://stephband.info/jquery.event.swipe/
2

használj külső könyvtárat

gyoridavid · 2012. Dec. 29. (Szo), 15.25
ezt ajánlom: hammer.js