webapp開發相關jquery手勢事件之jGestures

手機開發中，除了我們平時用的jquery基本事件之外，還有很多手勢，今天介紹一款jquery手勢插件jGestures，地址是：http://jgestures.codeplex.com/

這個插件的強大之處在於它可以監聽以下事件’pinch’(縮放手勢), ‘rotate’(旋轉手勢), ‘swipe’(滑動手勢), ‘tap’(輕觸) 以及 ‘orientationchange’(改變設備方向)。等等，有了這個插件，手機web開發就更加方便了。

事件簡介

orientationchange 代表設備順時針或者逆時針旋轉.此事件可以被設備觸發,可能使用的是重力傳感器.

pinch 縮放手勢(兩個手指在屏幕上的相對運動)

rotate 旋轉手勢(兩個手指順時針或者逆時針旋轉)

swipemove 在正在滑動時觸發(在設備屏幕上移動手指,比如:拖動)

swipeone 單點滑動手勢,滑動完成後觸發(一個手指在屏幕上移動)

swipetwo 兩點滑動(兩個手指在屏幕上方向一致的滑動)

swipethree 三點滑動(三個手指在屏幕上方向一致的滑動)

swipefour 四點滑動(四個手指在屏幕上方向一致的滑動)

swipeup 向上滑動,在嚴格的向上滑動手勢完成後觸發

swiperightup 向右上角滑動,在向右且向上的滑動手勢完成後觸發

swiperight 向右滑動,在嚴格的向右滑動手勢完成後觸發

swiperightdown 向右下角滑動,在向右且向下的滑動手勢完成後觸發

swipedown 向下滑動,在嚴格的向下滑動手勢完成後觸發

swipeleftdown 向左下角滑動,在向左且向下的滑動手勢完成後觸發

swipeleft 向左滑動,在嚴格的向左滑動手勢完成後觸發

swipeleftup 向左上角滑動,在向左且向上的滑動手勢完成後觸發

tapone 在單個手指輕點的手勢後觸發

taptwo 在兩個手指一起輕點的手勢後觸發

tapthree 在三個手指一起輕點的手勢後觸發

pinchopen 撐開手勢,當兩個手指撐大並離開設備時觸發.

pinchclose 捏緊手勢,當兩個手指捏緊並離開設備時觸發.

rotatecw 兩個手指順時針旋轉並且離開屏幕時觸發(two fingers rotating clockwise)

rotateccw 兩個手指逆時針旋轉並且離開屏幕時觸發 (two fingers rotating counterclockwise)

shake 當檢測到設備正在搖晃時觸發

shakefrontback 當檢測到搖晃動作，且可以被解讀爲前後移動之時觸發.

shakeleftright 當檢測到搖晃動作，且可以被解讀爲左右移動之時觸發.

shakeupdown 當檢測到搖晃動作，且可以被解讀爲上下移動之時觸發.

關於swipe，我上一篇文章已經介紹過了，http://www.haorooms.com/post/jquery_scroll_upanddown

當頁面有滾動條的時候，swipe的up,down，left,right可能會不觸發！事件會被滾動事件覆蓋掉！

事件用法

<script>
jQuery(document).ready(function () {
             jQuery(window).bind('shakeupdown',function(event_,data_){
                alert('shake: '+ data_.description)
            })
    })
</script>

官方案例如下：

<script>
function log(event_, obj) {
// ignore bubbled handlers
//        if ( obj.originalEvent.currentTarget !== obj.originalEvent.target ) { return; }
    obj.originalEvent.preventDefault();
    jQuery('#logger')
        .find('li')
            .slice(1,jQuery('#logger').find('li').size()-8)
                .animate({'opacity':'0', 'height':'0'},function(){jQuery(this).remove()})
            .end()
        .end()
        .append('<li><b>'+jQuery(obj.originalEvent.currentTarget).attr('id')+'</b>: '+obj.description+ ' : '+obj.type +'</li>')

}

function manipulate(event_, obj) {
// ignore bubbled handlers
//        if ( obj.originalEvent.currentTarget !== obj.originalEvent.target ) { return; }
    event_.preventDefault();
    obj.originalEvent.preventDefault();
    log(event_, obj)

    var _a = obj.description.split(':');

    jQuery(obj.originalEvent.currentTarget).css('zIndex','1000')
    switch(_a[0]) {
        case 'pinch':
            //jQuery(obj.originalEvent.currentTarget).css('-webkit-transform','scale('+ ( obj.direction * obj.delta[0].moved ) +')');
        break;
        case  'rotate':
             //jQuery(obj.originalEvent.currentTarget).css('-webkit-transform','rotate('+ (  obj.delta[0].moved ) +'deg)');
        break;

        case  'swipemove':
            if(_a[1] != 1) {break;}
            jQuery(obj.originalEvent.currentTarget).css('-webkit-transition','');
             jQuery(obj.originalEvent.currentTarget).css('left', parseInt(jQuery(obj.originalEvent.currentTarget).css('left')) + obj.delta[0].startX );
            jQuery(obj.originalEvent.currentTarget).css('top', parseInt(jQuery(obj.originalEvent.currentTarget).css('top')) + obj.delta[0].startY );
//            jQuery(obj.originalEvent.currentTarget).data('moving',true)
        break;

        case 'swipe' :
//            if(_a[1] != 1 || jQuery(obj.originalEvent.currentTarget).data('moving') } {break;}
             jQuery(obj.originalEvent.currentTarget).css('-webkit-transition','all 1s ease-out').css('left', parseInt(jQuery(obj.originalEvent.currentTarget).css('left')) + obj.delta[0].startX );
            jQuery(obj.originalEvent.currentTarget).css('-webkit-transition','all 1s ease-out').css('top', parseInt(jQuery(obj.originalEvent.currentTarget).css('top')) + obj.delta[0].startY );
        break;
      }
      jQuery(obj.originalEvent.currentTarget).css('zIndex','')
}

    function BlockMove(event) {
        // Tell Safari not to move the window.
        event.preventDefault() ;
    }


jQuery(document).ready(function() {


    jQuery('#tap').bind('tapone',log);
    jQuery('#tap').bind('taptwo',log);
    jQuery('#tap').bind('tapthree',log);
    jQuery('#tap').bind('tapfour',log);


    jQuery('#swipe').bind('swipeone',log);
    jQuery('#swipe').bind('swipetwo',log);
    jQuery('#swipe').bind('swipethree',log);
    jQuery('#swipe').bind('swipefour',log);

    jQuery('#swipe').bind('swipeup',log);
    jQuery('#swipe').bind('swiperightup',log);
    jQuery('#swipe').bind('swiperight',log);
    jQuery('#swipe').bind('swiperightdown',log);

    jQuery('#swipe').bind('swipedown',log);
    jQuery('#swipe').bind('swipeleftdown',log);
    jQuery('#swipe').bind('swipeleft',log);
    jQuery('#swipe').bind('swipeleftup',log);

    jQuery('#change').bind('pinchopen',manipulate);
    jQuery('#change').bind('pinchclose',manipulate);
    jQuery('#change').bind('rotatecw',manipulate);
    jQuery('#change').bind('rotateccw',manipulate);
     jQuery('#change').bind('swipeone',manipulate);

    jQuery('#livechange').bind('swipeone',manipulate);
    jQuery('#livechange').bind('swipemove',manipulate);
    jQuery('#livechange').bind('pinch',manipulate);
    jQuery('#livechange').bind('rotate',manipulate);

})
 </script>