jquery.mobile-1.2.0.js


jquery 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 이 글에서 참조되었다.

+ Recent posts