JS Sanjiaojiuliu series-zepto.js-for mobile-developed class libraries

Zepto.js's API Address http://www.css88.com/doc/zeptojs_api/

Class Library Source code download http://www.zeptojs.cn/Scroll the current page, see this section click to download

As with jquery, we just need to introduce an HTML page.
Zepto API is almost the same as JQ, at the same time the name of each interface is the same, we just write the JQ like to write Zepto, since this, why we use the Zepto, mainly zepto provide when the touch event, for the development of mobile end of the better processing.

JQ is a class library supported for multiple browsers and does not encapsulate the touch event, if our project is PC or although it is mobile, but not many touch event effects, we choose JQ can, we can see, we use zepto time

The development of mobile phone projects requires touch events.

Zepto's support is advanced browser, Ie10 above.

HelloWorld output of 1.zepto.js

Before we study, we need to ensure that we have a very skilled use of JQ, we use Zepto, the basic call is as follows

<! DOCTYPE html>
Zeopt code we're putting in
Zepto (function ($) {
Code
});
Of the interior, compared to JQ, but replaced $ zepto.
Basic use of 2.zepto.js
We get the div content, click the Modify button, modify the div content, the code is as follows
<! DOCTYPE html>
is perfect, but we listen to the event, while Zepto is recommended by on processing, we use on processing, the code is as follows
<! DOCTYPE html>
Use the recommended wording to reduce the occurrence of problems. Through this test, we know that Zepto uses JQ almost the same
3.zepto.js Touch Event Usage
That's why we choose Zepto instead of JQ, which is to use it to provide a good touch module, we first understand these interfaces
The "touch" module adds the following events,
tap-triggers when the element taps.
singleTap and doubleTap -This pair of events can be used to detect clicks and double clicks on elements. (If you don't need to detect clicks, double-click, use tap instead). 
longTap-When an element is pressed, the trigger is more than 750ms.
swipe, swipeLeft , swipeRight , swipeUp , swipeDown -Triggers when the element is crossed out of date. (You can select a given direction)
We add event handling to the element to see the difference between each touch event, the code is as follows ( need to reference the Zepto class library )
<! doctype html>
Other events I will not introduce, JQ we have already learned that we use Zepto to provide the touch event, do some mobile Web page commonly used effect;
4.zepto.js using Touch Event development examples
Example 1: tab Toggle with sliding events
We learned that the frontal tab toggle, which is in the click Options content is, toggles the content below, on the basis of this feature, we swipe the content area to the left, swipe to the right, or switch the content area, and the tab automatically gets the focus, zepto tab switch code is as follows:
<! doctype html>
 This is the most basic tab switch, we also want to add touch events to the content area, the operation of sliding switch, the code is as follows 
 
<! doctype html>
Example 2: a circular navigation with CSS3 rotation
We have seen such a navigation, a circle, separated by the specified angle, as follows
Click the Circle content can link to a new page, a single hit between the circle area, according to the gesture around the turntable switch
Click the left and right button, you can also switch the turntable
The sample code is as follows:
<! doctype html>
Example 3: Focus graph implementation of touch events
We have already done the tab switch effect with sliding, actually the effect is very much like, we are adding the animation processing to be good!!!!!!


JS Sanjiaojiuliu series-zepto.js-for mobile-developed class libraries