Rumah  >  Artikel  >  hujung hadapan web  >  Penjelasan terperinci tentang penggunaan mudah alih JQ plug-in hammer_jquery

Penjelasan terperinci tentang penggunaan mudah alih JQ plug-in hammer_jquery

WBOY
WBOYasal
2016-05-16 15:51:422045semak imbas

Daripada PC ke mudah alih, saya percaya ramai jurutera pengepungan bahagian hadapan bimbang tentang terminal mudah alih Menulis acara mudah alih asal adalah sangat sukar, dan klik jq mempunyai kelewatan 300 milisaat Kini terdapat pemalam jq yang agak baik hammer, Hammer.js ialah pustaka javascript sumber terbuka, ringan yang boleh mengecam sentuhan tanpa bergantung pada perkara lain, acara tetikus menyokong pelbagai acara telefon mudah alih, seperti zum, slaid kiri qq untuk memadam, zum masuk, berputar, dsb.

Yang berikut menggunakan suis tab untuk memperkenalkan tukul.

Penggunaan:

1, mula-mula perkenalkan versi jq2.0 ke atas dan jquery.hammer.js.

2, dapatkan elemen, sama seperti jq, cuma tambah tukul di hujung var hammertime = $('.tabs a').hammer();

3. Anda boleh terus menambah acara hammertime.on('tap', function(ev) {} menggunakan on. Ini menggunakan acara klik ketik dalam tukul. Anda boleh menulis js anda sendiri dalam fungsi.

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>

Pautan pengalaman: http://hammerjs.github.io/

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

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn