PhoneGap:jQuery Mobile手勢事件

PhoneGap是一套幫助我們用HTML5製作APP的程式(詳見用HTML5製作APP),如果你的APP單純使用 jQuery Mobile 製作行動網頁(參考行動網頁建立與連結),那麼你可以很順利地完成該APP。可是如果你的APP比較複雜,有大量自製的GUI介面(例如遊戲介面),需要判斷使用者的手勢時(非傳統”Click滑鼠點擊”),就必須靠其它API幫忙(jQuery Mobile 也是一種API)。jQuery Mobile 本身有提供幾個簡單的手勢判斷(Touch Events),但是只有點擊(Tap)與滑動(Swipe),我們就先來看看 jQuery Mobile 所提供的手勢事件吧。

載入 jQuery Mobile API

使用 jQuery Mobile 之前,一樣記得要先載入 jQuery 與 jQuery Mobile 的 JS 檔案。範例上是使用http://的網路路徑(必須連接網路才能存取),但是在製作APP時,建議到官方網站直接下載 JS 檔放入自己的 APP 中(路徑改成本機端的相對路徑),這樣才能減少不必要的網路存取。




jQuery 的物件選擇器

由於本文撰寫的時候,本站沒有 jQuery 的教學,所以先簡單說明一下 jQuery 取得指定物件的方式。所有 jQuery 的物件都是用「$()」來表示;當我們有一個物件ID時,可以使用「$(“#ID”)」來抓取這個物件;當我們有一係列的物件(擁有相同Class類別)時,可以使用「$(“.Class”)」取得所有此類別的物件。如果我要取得此網頁”所有”

標籤的物件,只要打上「$(“div”)」即可。

jQuery Mobile Touch Events

$("#ID").on("tap",function(){        //使用者輕觸此物件,類似Click
    alert("Tap detected.");
});

$("#ID").on("taphold",function(){   //使用者按下此物件後,維持約一秒後觸發Taphold事件
    alert("Taphold detected.");
});

$("#ID").on("swipe",function(){     //使用者滑動過此物件超過30px
    alert("swipe detected.");
});

$("#ID").on("swipeleft",function(){ //使用者往物件的左邊滑動超過30px
    alert("swipeleft detected.");
});

$("#ID").on("swiperight",function(){    //使用者往物件的右邊滑動超過30px
    alert("swiperight detected.");
});

$(“#ID”)可以換成自己的物件,而 alert() 則是觸發事件時所要執行的程式。觸發事件的物件可以是整個window示窗,也以是自己用DIV畫的範圍(可以製作沒有任何顏色圖案的”感應區”)。從上面的程式我們可以看到,其實語法都一樣,只有觸發事件的關鍵字不同而已。這些事件類似 onClick 一樣,必須等使用者觸發時才會有作用。程式要擺在那裡、觸發之後要做什麼事情,這些就必須讓設計者自己思考了。