Standalone jQuery "touch" method?
So, I'm looking to implement the ability for a plugin I wrote to read a touch "swipe" from a touch-capable internet device, like an iPhone, iPad or android.
Is there anything out there? I'm not looking for something as full as jQtouch, though was considering reverse engineering the code I开发者_开发问答 would need out of it.
Any suggestions on the best way to approach this? A snippet of code already available?
Addendum: I realize in hindsight the solution won't strictly be jQuery, as I'm pretty sure there aren't any built-in methods to handle this. I would expect standard Javascript to find itself in the answer.
(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() },
})
and this is how you detect 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";
}
There's also jQuery.touchwipe at http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
The smallest and most jQuery-esque solution is here: https://github.com/eikes/jquery.swipe-events.js
精彩评论