모바일 JQ 플러그인 hammer_jquery 사용에 대한 자세한 설명

PC에서 모바일까지, 많은 프론트엔드 포위 엔지니어들이 모바일 터미널에 대해 걱정하고 있다고 생각합니다. 독창적인 모바일 이벤트를 작성하는 것은 매우 힘들고, jq의 클릭은 300밀리초 지연이 있습니다. 이제 비교적 좋은 jq 플러그인이 있습니다. hammer, Hammer.js는 다른 것에 의존하지 않고 터치를 인식할 수 있는 오픈 소스 경량 자바스크립트 라이브러리입니다. 마우스 이벤트는 확대/축소, qq 왼쪽 슬라이드 삭제, 확대, 회전 등과 같은 다양한 휴대폰 이벤트를 지원합니다.

다음은 탭 스위치를 사용하여 해머를 소개합니다.

사용법:

1, 먼저 jq2.0 이상 버전과 jquery.hammer.js를 소개합니다.

2, jq와 마찬가지로 요소를 가져오고 끝에 해머를 추가하면 됩니다. var hammertime = $('.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(); 
　　})
})

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.