jquery.mobile-1.2.0.jsjquery mobile (현재 1.2.0 버젼)에서 터치와 관련되어 제공되는 기본 이벤트는 다음과 같다.
touchstart, touchmove, touchend, tap, taphold, swipe, swipeleft, swiperight, scrollstart, scrollstop
이중에 swipeleft 와 swiperight 이벤트는 터치를 좌우로 할 경우 발생하는 이벤트인데, 기본 jquery mobile 에서는 위 아래에 대한 이벤트가 없다. 따라서, jquery mobile 소스를 다음과 같이 변경하면 swipeup 과 swipedown 을 직접 구현하여 작성할 수 있다.
jquery.mobile-1.2.0.js 파일을 다음과 같이 수정한다.
다음 소스를 찾아서
$.each( ( "touchstart touchmove touchend " +
"tap taphold " +
"swipe swipeleft swiperight " +
"scrollstart scrollstop" ).split( " " ), function( i, name ) {
$.fn[ name ] = function( fn ) {
return fn ? this.bind( name, fn ) : this.trigger( name );
};
// jQuery < 1.8
if ( $.attrFn ) {
$.attrFn[ name ] = true;
}
});
다음과 같이 바꾼다.
$.each( ( "touchstart touchmove touchend " +
"tap taphold " +
"swipe swipeleft swiperight swipeup swipedown" +
"scrollstart scrollstop" ).split( " " ), function( i, name ) {
$.fn[ name ] = function( fn ) {
return fn ? this.bind( name, fn ) : this.trigger( name );
};
// jQuery < 1.8
if ( $.attrFn ) {
$.attrFn[ name ] = true;
}
});
또 다음 소스를 찾아서
$.each({
scrollstop: "scrollstart",
taphold: "tap",
swipeleft: "swipe",
swiperight: "swipe"
}, function( event, sourceEvent ) {
$.event.special[ event ] = {
setup: function() {
$( this ).bind( sourceEvent, $.noop );
}
};
});
다음과 같이 바꾼다.
$.each({
scrollstop: "scrollstart",
taphold: "tap",
swipeleft: "swipe",
swiperight: "swipe",
swipeup: "swipe",
swipedown: "swipe"
}, function( event, sourceEvent ) {
$.event.special[ event ] = {
setup: function() {
$( this ).bind( sourceEvent, $.noop );
}
};
});
마지막으로 다음 소스를
$this.bind( touchMoveEvent, moveHandler )
.one( touchStopEvent, function( event ) {
$this.unbind( touchMoveEvent, moveHandler );
if ( start && stop ) {
if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold && Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
start.origin.trigger( "swipe" )
.trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
}
}
start = stop = undefined;
});
다음과 같이 바꾼다.
$this.bind( touchMoveEvent, moveHandler )
.one( touchStopEvent, function( event ) {
$this.unbind( touchMoveEvent, moveHandler );
if ( start && stop ) {
var x = Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ),
y = Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ),
callback = '';
if ( stop.time - start.time < $.event.special.swipe.durationThreshold) {
if(x > 30 && y < 75) {
callback = ( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
}else if( x < 75 && y > 30 ) {
callback = start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown";
}
}
if(callback) start.origin.trigger( "swipe" ).trigger( callback );
}
start = stop = undefined;
});
이글은 http://forum.jquery.com/topic/add-swipe-up-down-to-jquerymobile-1-0-1-my-method 이 글에서 참조되었다.