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

Penjelasan terperinci tentang penggunaan mudah alih JQ plug-in hammer_jquery

WBOY
Lepaskan: 2016-05-16 15:51:42
asal
2107 orang telah melayarinya

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>

Salin selepas log masuk

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(); 
  })
})
Salin selepas log masuk

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan