Detaillierte Erläuterung der Verwendung des mobilen JQ-Plug-Ins hammer_jquery

Ich glaube, dass viele Front-End-Belagerungsingenieure sich Sorgen um das mobile Terminal machen. Das Schreiben ursprünglicher mobiler Ereignisse hat eine Verzögerung von 300 Millisekunden. Jetzt gibt es ein relativ gutes jq-Plug-in Hammer, Hammer.js ist eine leichtgewichtige Open-Source-Javascript-Bibliothek, die Berührungen erkennen kann, ohne auf andere Dinge angewiesen zu sein. Mausereignisse unterstützen verschiedene Mobiltelefonereignisse, wie z. B. Zoomen, QQ-Linksschieben zum Löschen, Vergrößern, Drehen usw.

Im Folgenden wird ein Tabulatorschalter verwendet, um den Hammer einzuführen.

Verwendung:

1, stellen Sie zuerst jq2.0 oder höher und jquery.hammer.js vor.

2, holen Sie sich das Element, genau wie jq, fügen Sie am Ende einfach hammer hinzu var hammertime = $('.tabs a').hammer();

3. Sie können das Ereignis hammertime.on('tap', function(ev) {} direkt mit on hinzufügen. Dabei wird das Tap-Click-Ereignis in Hammer verwendet. Sie können Ihre eigenen js in Funktion schreiben.

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>

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.