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