2010-04-23 17 views
20

Bu yüzden bir iPhone, iPad veya android gibi dokunmatik özellikli bir internet cihazından bir dokunuşla "tokatlamak" için yazdığım bir eklentinin yeteneğini uygulamak istiyorum.Bağımsız JQuery "dokunma" yöntemi?

Orada bir şey var mı? Ben jQtouch kadar dolu bir şey aramıyorum, bunun dışında ihtiyaç duyacağım kod ters mühendislik düşünüyordu.

Bu yaklaşımın en iyi yolu üzerinde herhangi bir öneriniz var mı? Bir kod snippet'i zaten mevcut mu?

Ek: Bu sorunun üstesinden gelmek için herhangi bir yerleşik yöntem olmadığından emin olduğumdan, çözümün kesinlikle jQuery olmayacağının farkındayım. Cevabında kendisini bulmak için standart Javascript beklerdim.

cevap

32
(function($) { 
$.fn.swipe = function(options) { 
    // Default thresholds & swipe functions 
    var defaults = { 
     threshold: { 
      x: 30, 
      y: 10 
     }, 
     swipeLeft: function() { alert('swiped left') }, 
     swipeRight: function() { alert('swiped right') }, 
     preventDefaultEvents: true 
    }; 

    var options = $.extend(defaults, options); 

    if (!this) return false; 

    return this.each(function() { 

     var me = $(this) 

     // Private variables for each element 
     var originalCoord = { x: 0, y: 0 } 
     var finalCoord = { x: 0, y: 0 } 

     // Screen touched, store the original coordinate 
     function touchStart(event) { 
      console.log('Starting swipe gesture...') 
      originalCoord.x = event.targetTouches[0].pageX 
      originalCoord.y = event.targetTouches[0].pageY 
     } 

     // Store coordinates as finger is swiping 
     function touchMove(event) { 
      if (defaults.preventDefaultEvents) 
       event.preventDefault(); 
      finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates 
      finalCoord.y = event.targetTouches[0].pageY 
     } 

     // Done Swiping 
     // Swipe should only be on X axis, ignore if swipe on Y axis 
     // Calculate if the swipe was left or right 
     function touchEnd(event) { 
      console.log('Ending swipe gesture...') 
      var changeY = originalCoord.y - finalCoord.y 
      if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) { 
       changeX = originalCoord.x - finalCoord.x 

       if(changeX > defaults.threshold.x) { 
        defaults.swipeLeft() 
       } 
       if(changeX < (defaults.threshold.x*-1)) { 
        defaults.swipeRight() 
       } 
      } 
     } 

     // Swipe was canceled 
     function touchCancel(event) { 
      console.log('Canceling swipe gesture...') 
     } 

     // Add gestures to all swipable areas 
     this.addEventListener("touchstart", touchStart, false); 
     this.addEventListener("touchmove", touchMove, false); 
     this.addEventListener("touchend", touchEnd, false); 
     this.addEventListener("touchcancel", touchCancel, false); 

    }); 
}; 
})(jQuery); 


$('.swipe').swipe({ 
swipeLeft: function() { $('#someDiv').fadeIn() }, 
swipeRight: function() { $('#someDiv').fadeOut() }, 
}) 

ve bu http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

+0

! Bunu deneyeceğim ve daha sonra yazıyı güncelleyeceğim, umarım seçili bir cevapla. – dclowd9901

+0

Zekice çalıştım. Biraz değiştirdim, böylece eklentimden başlatılabilirdi, ama büyük bir kod. Çok teşekkürler! – dclowd9901

+0

jQuery için tokatlama eklentisi burada bulunabilir http://plugins.jquery.com/project/swipe –

5

en küçük ve en jQuery vari çözüm altındadır jQuery.touchwipe var iphone

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { 
    if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "path to iphone page"; 
} 
+0

Harika, teşekkürler! – CodeVirtuoso

İlgili konular