Zepto.js swipe implement touch screen tab menu

Today we say Zepto.js, interested friends can advanced this site "http://zeptojs.com/", this can be said to be a mobile phone jquery, but it canceled the hover, plus the swipe and tap the two touch screen features. A few days ago, a friend told me that Baidu based on Zepto.js did a WebApp UI, we can also look at: "http://gmu.baidu.com/", a bit like jquery ui things, we are interested to learn ah ...

Today, we use zepto.js swipe to realize the tab menu of Sina mobile phone network, we can first look at Sina's mobile phone version of "http://sina.cn/".

We can see that Sina navigation there, is not a percentage, but write a good width, so that it can add as many as necessary, and I began to divide the code into four, so, our tab number in percent, divided into four display ...

Here, I added the zepto.js tap function, mainly in I use the click on the ipad, the results found that the civil curtain will flash, good dizzy ...

See swipeleft This, you will not think of before the TouchSwipe writing, interested can look at this article: "TouchSwipe realize 3G Phoenix Phone touch Screen tab menu". However, there is no tap this function in TouchSwipe ...

Well, here to mention, we this zepto.js is modified, the original version, on the ipad and mobile phone when sliding, the page will scroll, I touchmove in the source file written on E,preventdefault (), the results even scroll bar can not move, dizziness ah ...

In Zepto.js, we can also know the principle that swipe this function realizes:

As we can see, it is the distance between the touch screen of two points to determine whether it is left or right or up and down swipe ...

These are the results I made:

The following I provide source files, welcome to have the needs of friends download using:

Preview Address: http://www.163css.net/net163/cssjs/2013/01/zeptotab/index.html

: Zepto.js Swipe implements touch Screen tab menu. rar

Zepto.js swipe implement touch screen tab menu