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