Detailed explanation of the use of mobile JQ plug-in hammer_jquery

From PC to mobile, I believe many front-end siege engineers are worried about the mobile terminal. Writing original mobile events is very laborious, and jq’s click has a 300 millisecond delay. Now there is a relatively good jq plug-in hammer, Hammer.js is an open source, lightweight javascript library that can recognize touch without relying on other things. Mouse events support various mobile phone events, such as zoom, qq left slide to delete, zoom in, rotate, etc.

The following uses a tab switch to introduce hammer.

Usage:

1, first introduce jq2.0 or above version and jquery.hammer.js.

2, get the element, just like jq, just add hammer at the end var hammertime = $('.tabs a').hammer();

3. You can directly add the event hammertime.on('tap', function(ev) {} using on. This uses the tap click event in hammer. You can write your own js in function.

hammer.dragstart = function(ev) { };// 开始拖动</span>

hammer.drag = function(ev) { }; // 拖动中</span>
hammer.dragend = function(ev) { }; // 拖动结束</span>
hammer.onswipe = function(ev) { }; // 滑动</span>
 
hammer.tap = function(ev) { }; // 单击</span>
hammer.doubletap = function(ev) { }; //双击</span>
hammer.hold = function(ev) { };// 长按</span>
 
hammer.release = function(ev) { }; // 手指离开屏幕</span>

Experience link: http://hammerjs.github.io/

js code

$(function() {
　　var hammertime = $('.tabs a').hammer();
　　hammertime.on('tap', function(ev) {
　　　　$(this).addClass('actives').siblings().removeClass('actives');//添加一个class 同辈级移除。
　　　　var index = $('.tabs a').index(this); //索引
　　　　$('.tab-bott').eq(index).show().siblings().hide(); 
　　})
})

The above is the entire content of this article, I hope you all like it.