**
移动端JQ插件hammer使用详解
**
用法:
1,首先引入jq2.0以上版本和jquery.hammer.js.
2,获取元素,和jq一样,在后面加上hammer就可以了
var hammertime = $('.tabsa').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>
**
用例1:
**
$(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();
})
})
**
用例2
**
<body>
31 <div id="test" class="test">事件区域</div>
32 <div id="result" class="result">事件结果:点击触发<br /></div>
33 <script type="text/javascript">
34 //创建一个新的hammer对象并且在初始化时指定要处理的dom元素
35 var hammertime = new Hammer(document.getElementById("test"));
36 //添加事件
37 hammertime.on("tap", function (e) {
38 document.getElementById("result").innerHTML += "点击触发了,长按无效<br />";
39 //控制台输出
40 console.log(e);
41 });
42 </script>
43 </body>
用例3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 轮播(Carousel)插件方法</title>
<link rel="stylesheet" href="http://cdn.bootcss/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/hammer.min.js" type="text/javascript"></script>
<script src="js/hammer.js" type="text/javascript"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="images/1.jpg" alt="First slide">
</div>
<div class="item">
<img src="images/2.jpg" alt="Second slide">
</div>
<div class="item">
<img src="images/3.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
<!-- 控制按钮 -->
<div style="text-align:center;">
<input type="button" class="btn start-slide" value="Start">
<input type="button" class="btn pause-slide" value="Pause">
<input type="button" class="btn prev-slide" value="Previous Slide">
<input type="button" class="btn next-slide" value="Next Slide">
<input type="button" class="btn slide-one" value="Slide 1">
<input type="button" class="btn slide-two" value="Slide 2">
<input type="button" class="btn slide-three" value="Slide 3">
</div>
</div>
<script>
$(function(){
// 初始化轮播
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
// 停止轮播
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
// 循环轮播到上一个项目
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
// 循环轮播到下一个项目
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
// 循环轮播到某个特定的帧
$(".slide-one").click(function(){
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function(){
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
var hammertime = new Hammer(document.getElementById("myCarousel"));
//添加事件
hammertime.on("swipeleft", function () {
/*alert('1');*/
$(this).carousel('next');
});
hammertime.on("swiperight", function () {
/*alert('2');*/
$(this).carousel('next');
});
});
</script>
</body>
</html>
更多推荐
移动端JQ插件hammer使用详解
发布评论