zTouch-移動端觸屏開發利器(zepto touch擴充)

標籤：

* Zepto.js v1.0.1 touch extend (Zepto.js v1.0.1 的swipe touch擴充)js-處理手機移動端web觸屏手勢動作。

Zepto.js v1.0.1版本的touch.js模組引入使用後會導致頁面很卡的情況，所以開發了一個新的擴充外掛程式來替換其touch.js。已經過Android/ios測試。

github
* zTouch特點：

    zTouch.js只包含核心功能函數，不包含任何效果，簡潔輕巧;
    提供豐富的回調參數，可由使用者自訂擴充效果（可參考Demo）;
    支援多種回呼函數，方便及時監控及事件處理（執行個體化前/後回調，touch start/move/end回調）;
    支援使用者自訂手勢標準定義(X-Y軸滑動限定，角度限定);
    支援BOX邊界檢測，touch超出邊界後自動停止回調操作;
    提供內部屬性設定介面，可在內部tPoint中加入使用者自訂屬性;
    支援手勢橫向滑動，同時保證瀏覽器縱向正常滑動;
    不會阻止BOX內的其它綁定事件(onclick等);
    支援多點觸摸監控（縮放，旋轉）;

 

由於手機瀏覽器會阻止JS對gesture手勢事件的監聽zTouch.js中對gesture監聽介面雖然可以調用，但無法實現手勢操作(Android裝置測試，IOS裝置應該支援)。我們會在後續進行多點touch事件類比解決。 (最新版zTouch已經去除對gesture事件的監聽方法，採用e.touches對多點觸摸進行監控，支援兩點監控的縮放和旋轉操作)
github
zTouch.js中為事件監聽的核心檔案。所有的特殊效果可以在回呼函數進行個人化定製。
* 主要提供以下回呼函數：

beforeCallback (執行個體化之前觸發的回呼函數),
sCallback (start callback,touchstart時觸發的回呼函數),
mCallback (move callback,touchmove時觸發的回呼函數),
eCallback (end callback,touchend時觸發的回呼函數)
afterCallback (執行個體化之後觸發的回呼函數),
* 回呼函數中會傳入touch事件相關回調參數：

self:執行個體化的BOX,
startX:觸點起始X,
startY:觸點起始Y,
bL:(Box Left) 相對於文檔的left位移,
bT:(Box Top)相對於文檔的top位移,
bW:(Box Width)BOX的寬度,
bH:(Box Height)BOX的高度,
bRb:(Box Right Border)BOX的右邊界,
bBb:(Box Bottom Border)BOX的下邊界,
endX:觸點結束X;
endY:觸點結束Y;
mX:(move x distance)X方向滑動距離;
mY:(move y distance)Y方向滑動距離;
direction:手勢滑動方向(left/right/false);
angle:單點手勢滑動角度;
duration:手勢期間;
vendor:瀏覽器首碼(-moz/-webkit/-o/-ms);

tPoint.multiTouch:是否多點觸摸(touchmove時可監控);
tPoint.gStartDis:(gisture start distance)手勢起始距離;
tPoint.gEndDis:(gisture end distance)手勢結束距離;
tPoint.scale:手勢縮放比例;
tPoint.rotation:手勢旋轉角度;
* 同時在外部回呼函數中提供修改內部tPoint資料的介面:

 

 

tPoint.setAttr(name,value);

* 調用方法:

 

 

<script type="text/javascript">//傳入args初始化參數對象args={    iniL:30,//X方向滑動的最小距離    iniT:50,//Y方向滑動的最大距離    eCallback:function(tPoint){        switch(tPoint.direction){            case "left":                alert("left");                break;            case "right":                alert("right");        }    }}$("body").Swipe(args); </script>

* 項目地址:

http://chinatjnet.github.io/zTouch/
* Github地址:

https://github.com/chinatjnet/zTouch/
* 示範地址:

http://chinatjnet.github.io/zTouch/demo.html

原文地址：http://blog.baiwand.com/?post=207

zTouch-移動端觸屏開發利器(zepto touch擴充)