PhoneGap:Kendo UI手勢事件

Kendo UIjQuery 的擴充 API,與 jQuery Mobile 相似,但功能更多更複雜,而且介面不限手機使用。Kendo UI 的擴充功能包括許多統計圖表(Charts)、編輯器(Editor)等等,功能非常強大,有興趣可以參考他們的DEMO網頁。由於 Kendo UI 完全以 HTML5 撰寫,因此對 PhoneGap 有良好的支援性,寫好的HTML5網頁透過 PhoneGap 編譯後仍然可以使用,不像某些私人提供的 API,使用瀏覽器可以執行,但編譯成.apk後就完全失去功用。比起 jQuery Mobile,Kendo UI 所提供的手勢事件更多,而且有許多細節可設定,相信可以滿足大部份的需求。

載入 Kendo UI

使用 Kendo UI 前,請先到官方網站申請帳號並下載。它有分成免費版(可從GitHub下載)和專業版,未付費的帳號有30天的期限可以下載專業版,但是已經下載的檔案仍然可以使用(因為重點只是JS檔)。本文使用的手勢功能(Touch Events)兩種版本都有提供,所以無論使用那一種版本都可以。

ZIP解壓縮之後,我們可以在 src 資料夾裡看到很多 kendo.xxxx.js 檔,每個 JS 對應它的一個功能。本篇所需要的是「kendo.touch.js」這個檔案。如果你覺得每使用一種功能,就要載入一個 JS 很麻煩,可以找專業版裡面的「kendo.all.min.js」和「kendo.all.min.js.map」,複製到自己的專案裡,這樣所有的功能就都在裡面了。接下來我們一樣要在 HTML5 裡載入這個 JS 檔,我的習慣會在根目錄下建立一個library資料夾,把這些 API 都丟進去(參考相對路徑)。另外,別忘記要載入 jQuery,才能夠正常執行。




上面第 10 行是 Kendo UI mobile 功能會用到的語法,將應用程式初始化。第 9、11 行則是 jQuery 的語法,表示裡面的程式要在網頁載入後執行。如果你參考官方DEMO,它是把這段語法寫在網頁的最下面。

Kendo UI Touch Events

我們該如何呼叫Touch Events呢?首先一樣要使用 jQuery 語法抓取作用的物件(參考jQuery 的物件選擇器)。這個物件可以是整個window示窗,也以是自己用DIV畫的範圍(可以製作沒有任何顏色圖案的”感應區”)。接著再使用下面的語法呼叫即可(參考官網說明文件),我們可以在DEMO裡看到不同事件的效果,把不需要的設定與事件刪掉即可。

$("#ID").kendoTouch({
        filter: ".touch",       //指定jQuery選擇器
                        //表示下列事件只有 #ID 下的 .touch 子物件有作用

        //以下參數均為預設值
        multiTouch: false,      //是否開啟 gesturestart, gesturechange, & gestureend 事件
        enableSwipe: false,     //是否開啟 swipe 事件
                        //若為true,則 dragstart, drag, & dragend 將不會觸發
        minXDelta: 30,          //指定 swipe 水平最小滑動的距離
        maxYDelta: 20,          //指定 swipe 垂直最大誤差距離,超過時會被丟棄
        maxDuration: 1000,      //swipe 花費最大時間(milliseconds),滑太慢會被丟棄
        minHold: 800,           //多少秒會觸發 hold 事件
        doubleTapTimeout: 400,      //雙點擊 doubletap 間隔最大時間(milliseconds),間隔太久會被丟棄


        touchstart:function(e) {    //物件開始被觸碰
            alert("touch x=" + e.touch.x.location + " y=" + e.touch.y.location);    //取得碰觸的x、y坐標
        },
        dragstart:function(e) {     //物件開始被拖移
            alert("dragstart detected.");
        },
        drag:function(e) {      //物件被拖移
            alert("drag detected.");
        },
        dragend:function(e) {       //物件拖移結束
            alert("touch from x=" + e.touch.x.startLocation + " y=" + e.touch.y.startLocation); //取得touch start的x、y坐標
        },
        tap:function(e) {       //物件被點擊
            alert("tap detected.");
        },
        doubletap:function(e) {     //物件被雙點擊,兩次點擊的距離不可超過3px
            alert("doubletap detected.");
        },
        hold:function(e) {      //物件被按住不放
            alert("hold detected.");
        },
        swipe:function(e) {     //使用者滑動過此物件
            alert("swipe detected.");
        },
        gesturestart:function(e) {  //物件被兩隻手指碰觸
            alert("gesturestart detected.");
        },
        gesturechange:function(e) { //觸碰物件的兩隻手指移動
            //拖移結束時觸發dragend
            alert("gesturechange detected.");
        },
        gestureend:function(e) {    //兩隻手指的事件觸發結束
            alert("gestureend detected.");
        }
    });

第 1 行就是 jQuery 的物件選擇器,請把ID改成自己的物件;2-49 行是我們要的事件設定,不需要全部寫出來,保留需要的即可。這裡 19-27 行的拖移事件適用在原本就能拖移的物件上,或是使用 jQuery UI 的 Draggable 功能。Kendo UI 也有提供讓物件可拖移的功能,保留在下一篇做說明。