Explication détaillée de l'utilisation du plug-in JQ mobile Hammer_jquery

Du PC au mobile, je pense que de nombreux ingénieurs de siège front-end s'inquiètent du terminal mobile. L'écriture d'événements mobiles originaux est très laborieuse, et le clic de jq a un délai de 300 millisecondes. Il existe maintenant un plug-in jq relativement bon. Hammer, Hammer.js est une bibliothèque javascript open source et légère qui peut reconnaître le toucher sans compter sur d'autres éléments. Les événements de la souris prennent en charge divers événements de téléphone mobile, tels que le zoom, le glissement vers la gauche pour supprimer, le zoom avant, la rotation, etc.

Ce qui suit utilise un interrupteur à onglets pour introduire le marteau.

Utilisation :

1, introduisez d'abord la version jq2.0 ou supérieure et jquery.hammer.js.

2, récupérez l'élément, tout comme jq, ajoutez simplement un marteau à la fin var Hammertime = $('.tabs a').hammer();

3. Vous pouvez ajouter directement l'événement Hammertime.on('tap', function(ev) {} en utilisant on. Cela utilise l'événement tap click dans Hammer. Vous pouvez écrire votre propre js en fonction.

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>

Lien d'expérience : http://hammerjs.github.io/

code js

$(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(); 
　　})
})

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.