zepto.js swipe實現觸屏tab菜單

今天咱們來講下zepto.js，有興趣的朋友能夠先進這個網站「http://zeptojs.com/」 ，這個能夠說是手機裏的jquery，可是它取消了hover，加上了swipe及tap這兩個觸屏功能。前幾天，有朋友告訴我百度基於zepto.js作了一個webapp的UI，你們也能夠看下：「http://gmu.baidu.com/」，有點像jquery ui的東西，你們有興趣能夠學習啊。。。

咱們今天，用zepto.js的swipe來實現新浪手機網的tab菜單，你們能夠先看下新浪的手機版「http://sina.cn/」。

咱們能夠看到，新浪導航那裏，並非百分比，而是寫好寬度，這樣，它能夠根據須要添加個數，而我一開始就將代碼分紅四個，所以，咱們的tab個數就按百分比，分紅四個顯示了。。。

這裏，我加上了zepto.js的tap功能，主要是在我在IPAD上用click,結果發現民間幕會閃，好暈。。。

看到swipeLeft這個，你會不會想到以前的touchSwipe的寫法，有興趣的能夠看看這文章：「touchSwipe實現3G鳳凰網手機觸屏Tab菜單」。不過，touchSwipe裏就沒有tap這個函數了。。。

那麼，這裏提一下，咱們這個zepto.js是修改過的，原來的版本，在IPAD及手機上滑動時，頁面會滾動，我在源文件裏的touchmove寫上e,preventDefault()，結果連滾動條都動不了，頭暈啊。。。

在zepto.js裏，咱們也能夠知道swipe這個功能實現的原理：

咱們能夠看到，是經過兩個點之間觸屏的距離來判斷是向左仍是右或是向上向下swipe。。。

以上是我製做的效果截圖：

如下我提供源文件，歡迎有須要的朋友下載使用：

預覽地址：http://www.163css.net/net163/cssjs/2013/01/zeptotab/index.html

下載地址：zepto.js swipe實現觸屏tab菜單.rar