給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是記住頁面狀態的標誌


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章