给webapp添加侧滑的手势识别

写在前面

菜鸟领域，高手跳过。

实现主要是利用了第三方的插件，JjGestures插件，先看下实现效果，左滑下页面缩小左移，露出app菜单，右滑还原到正常页面

一、准备工作

JjGestures插件的下载

这个插件可以监听到一些事件，列表如下：

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
当检测到摇晃动作，且可以被解读为上下移动之时触发

注：其中上面标红的几个事件我简单的测试了下，似乎是要求比较严格，出发的不是太灵敏，有兴趣的朋友可以更改插件中的灵敏度和阈值等参数尝试下效果，如果有好的办法请麻烦通知我下。

二、代码实现

var userMenuOpen=false;
$(window).bind('swipeone',function(event_,data_){
    	var _a = data_.description.split(':');
    	switch(_a[2]){
	       case 'right': //向右滑动
	       	if(userMenuOpen==true){
	       		closeUserMenu();
	       		userMenuOpen=false;
	       	}
	       	break;
	       case 'left': // 向左滑动
	       	if(userMenuOpen==false){
	       		openUserMenu();
		       userMenuOpen=true;
	       	}
		    break;
	 }
 });

其中data_是对事件的描述，包含了四个参数_a[0]：事件的名称， _a[1]：竖直方向上的描述（up/down）， _a[2]：水平方向上的描述（right/left）， _a[3]：忘记了，，，

我是想监听左右滑动，所以对_a[2]做了判断。

userMenuOpen是记住页面状态的标志