jQuery for JSZepto Mobile

Zepto

github address: https: //github.com/madrobby/zepto

Official address: http://zeptojs.com /

Chinese version address: http://www.css88.com/doc/zeptojs_api/

Zepto is the mobile version of jQuery, which can be regarded as a lightweight jQuery

Attention

Zepto The purpose of the design is to provide a similar API to jQuery, but not 100% coverage of jQuery

The bottom layer of jQuery is to achieve the effect through DOM, and zepto.js is realized by css3;

The zepto downloaded from the official website already contains the default modules described on the official website

The zepto module downloaded from github needs to be imported by itself

Zepto click event

Because there are many gestures on the mobile terminal and double-click and double-click, the click event on the mobile terminal has a delay of about 300ms, so the click on the mobile terminal Events use tab

$("div").tap(function(){
          …
 })

Touch related events in Zepto

touchstart

touchstart is an event triggered when a finger just touches an element

touchmove

touchmove is an event triggered when the finger moves

touchend

triggered when the finger leaves the specified element

Attention

When adding the above three events, use addEventListener

The above three events are invalid on the PC side

The object of the touch event in Zepto

touches:

Saves a list of all fingers on the screen

targetTouches

Saves a list of all fingers on an element

changedTouches

Contains the finger that just touched the screen or the finger that just left the screen

TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList}  

XY of the touch event in Zepto

client: visible area

page: content

var oDiv = document.querySelector("div");
     /*
     1. Note:
     Both touches/targetTouches/changedTouches in the event object are a pseudo-array
     So when we want to get the finger position, we need to get the finger object we need to get from the pseudo-array
      */
     oDiv. addEventListener("touchstart", function (event) {
         // Get the position of the finger from the upper left corner of the screen
         // console.log(event.targetTouches[0].screenX);
         // console.log(event.targetTouches[0].screenY);
         // Get the distance relative to the current viewport
         console.log("clientX", event.targetTouches[0].clientX);
         console.log("clientY", event.targetTouches[0].clientY);
         /*
         clientX 10
         clientY 8
         pageX 1156
         page Y 8
          */
         // Get the distance relative to the current page content
         console.log("pageX", event.targetTouches[0].pageX);
         console.log("pageY", event.targetTouches[0].pageY);
     });

Simple case: block dragging

The point-through problem of touch events in Zepto

If two elements are overlapping (one on top of the other), and the above one listens to touchstart Event, the next one listens to the click event, so if the upper element disappears after triggering the touchstart event, then there will be a point-through problem

Solution: fastclick framework

Note: The framework must be called in front, and all elements are registered with fastclick events, and all subsequent click events are fastclick click events

zepto swipe Event

Event triggered by finger sliding on the element

$("div").swipeLeft(function ()  {
         // console.log("Swipe left");
         $(this).animate({left: "0px"}, 1000);
     });
     $("div"). swipeRight(function () {
         // console.log("Swipe right");
         $(this).animate({left: "100px"}, 1000);
     });
     $("div"). swipeUp(function () {
         // console.log("Swipe up");
         $(this).animate({top: "0px"}, 1000);
     });
     $("div"). swipeDown(function () {
         // console.log("Swipe down");
         $(this).animate({top: "100px"}, 1000);

Mobile hover event

The mobile terminal can only use mouseenter and mouseleave to monitor the movement in and out

iscroll framework

When we make the sidebar of the mobile terminal, it may be buggy or troublesome to implement it ourselves , At this time, you can use the iscroll framework

github address: https://github.com/cubiq/iscroll

Implementation steps

Build a framework according to the needs of the framework Three-layer structure

Introduce the iscroll.js framework

Create an IScroll object and give it the container that needs to be scrolled

var myScroll = new IScroll('.test', {
         mouseWheel: true, // enable mouse scrolling
         scrollbars: true // Turn on the scrollbar, but the container must be positioned, otherwise the position of the scrollbar is wrong
     });
     // relevantThe callback function used by
     myScroll.on("beforeScrollStart", function () {
         console.log("finger touch, scrolling has not started yet");
     });
     myScroll.on("scrollStart", function () {
         console.log("start scrolling");
     });
     myScroll.on("scrollEnd", function () {
         console.log("end scrolling");
     });

swiper framework

Swiper is a sliding effect plug-in made of pure Javascript, oriented to mobile terminals such as mobile phones and tablets.

Swiper can realize common effects such as touch screen focus map, touch screen Tab switching, touch screen multi-picture switching, etc.

Swiper is open source, free, stable, easy to use, and powerful. It is an important choice for building mobile terminal websites!

How to use:

Introduce the corresponding css and js files

Build a three-layer structure according to the requirements of the framework

Create a Swiper object , pass the container element to it, and the second parameter receives an object

     

         
slider1
         
slider2
         
slider3
     

 

Recommended tutorial: “JS Tutorial”

The above is the detailed content of jQuery in JS Zepto mobile terminal. For more, please pay attention to other related articles on 1024programmer.com!