モバイルJQプラグインhammer_jqueryの使い方の詳細説明

PC からモバイルまで、多くのフロントエンド シージ エンジニアはモバイル端末について心配していると思います。オリジナルのモバイル イベントを記述するのは非常に手間がかかり、JQ のクリックには 300 ミリ秒の遅延があります。現在は比較的優れた JQ プラグインがあります。ハンマー、Hammer.js は、他のものに依存せずにタッチを認識できるオープンソースの軽量 JavaScript ライブラリです。マウス イベントは、ズーム、QQ 左スライドによる削除、ズームイン、回転などのさまざまな携帯電話イベントをサポートします。

以下ではタブスイッチを使用してハンマーを導入しています。

使用法:

1、まず jq2.0 以降のバージョンと jquery.hammer.js を導入します。

2、jqと同じように要素を取得します。最後にhammerを追加するだけです varhammertime = $('.tabs a').hammer();

3. on を使用して、イベント Hammertime.on('tap', function(ev) {} を直接追加できます。これは、ハンマーでタップ クリック イベントを使用します。関数に独自の JS を記述することができます。

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>

体験リンク: http://hammerjs.github.io/

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

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。