| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
9年前发布

移动端那些事;hammer不错的jq插件。

原文  http://www.cnblogs.com/Sunshine-boy/p/4617043.html
 

从pc端到移动端相信很多前端攻城师为移动端发愁,写原声的手机端事件是非常费力的, 而jq的click有300毫秒延迟,现在有了比较不错的jq插件hammer,Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件支持各种手机事件,比如缩放 ,qq左滑动删除,  放大, 旋转等。

下面用一个tab切换来介绍hammer。

用法:

1,首先引入jq2.0以上版本和jquery.hammer.js.

2,获取元素,和jq一样,在后面加上hammer就可以了    var hammertime = $('.tabs a').hammer();

3,可以直接用on直接添加事件hammertime.on('tap', function(ev) {} 这样用了hammer中的tap点击事件。function里可以写自己的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 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();     })    })


 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1435888950341.html
hammer jQuery Ajax框架