如何实现jQuery mobile swipe / shake代替鼠标滑动?

时间:2015-01-25 17:23:23

标签: android jquery ios jquery-mobile touchscreen

我已经设法在一个在线教程之后构建一个简单的jQuery闪存卡游戏,产生了这个代码:

var eng2fr = {
from: null,
to: null,
suggester: {
    i: 0,
    words: [
        [ "beer", "binouze" ],
        [ "another beer", "une autre bière" ],
        [ "crazy", "fou" ],
        [ "What the heck?!", "c'est quoi ce délire" ],
        [ "whatever", "n'importe quoi"]
    ],
    next: function(){
        return this.words[ ( this.i++ ) % this.words.length ];
    }
},

init: function(el) {
    this.bindSwipe( $( "#display" ) );
    this.from = $( "#from" );
    this.to = $( "#to" );
    Events.listen( "card_next", $.proxy( this.next, this ) );
    Events.listen( "card_flip", $.proxy( this.flip, this ) );

    // Begin!
    this.next();
},

next: function() {
    var to = this.to,
        from = this.from,
        next = this.suggester.next(),
        _this = this;

    to.text( next[ 0 ] );

    to.addClass( "push in current" );
    from.addClass( "push out" ).one( "webkitAnimationEnd", function() {
        from.text( next[ 1 ] );            
        from.removeClass( "current push out" );
        to.removeClass( "push in" );
        _this.from = to;
        _this.to = from;
    });
},

flip: function() {
    var to = this.to,
        from = this.from,
        _this = this;

    to.addClass( "flip in current" );
    from.addClass( "flip out" ).one( "webkitAnimationEnd", function() {
        from.removeClass( "current flip out" );
        to.removeClass( "flip in" );
        _this.from = to;
        _this.to = from;
    });
},

bindSwipe: function( el ) {
    this.xStart = null;
    this.downEvent = 'ontouchstart' in document.documentElement && navigator.appVersion.indexOf( 'iPhone OS ' ) > -1 ? 'touchstart' : 'mousedown';
    this.upEvent =  'ontouchend' in document.documentElement && navigator.appVersion.indexOf( 'iPhone OS ' ) > -1 ? 'touchend' : 'mouseup';

    var _this = this;
    el.bind({
        "touchstart mousedown": function( e ) {
            if( e.type !== _this.downEvent ) return;
            e.preventDefault();
            _this.xStart = e.pageX && e.pageX > 0 ? e.pageX : e.originalEvent.changedTouches[ 0 ].pageX;
        },
        "touchend mouseup": function( e ) {
            if( e.type !== _this.upEvent ) return;
            var newX = e.pageX && e.pageX > 0 ? e.pageX : e.originalEvent.changedTouches[ 0 ].pageX;
            var diff = newX - _this.xStart;
            if( Math.abs( diff ) > 20) {
                if( diff > 0 ){
                    Events.trigger( "card_previous", {} );
                } else {
                    Events.trigger( "card_next", {} );
                }
            } else {
                Events.trigger( "card_flip", {} );
            }
        },
        "touchmove": function( e ) {
            e.preventDefault();
        }
    });
}

};

正如您可能看到的,此代码依赖于鼠标事件来翻转和浏览卡片。我正在寻求实施jQuery移动滑动/点按功能代替这些功能,我想知道是否有人可以帮助我,或者至少指出我正确的方向。

另外,我想知道是否有一种简单的方法可以检测到震动事件并使用它来选择一个随机的"卡" / word pair?

0 个答案:

没有答案