在 jQuery Mobile 中有一些触摸事件是可定制的。然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用。当这些事件可用时,您可以触发任何自定义java script 作为对五种不同的事件的响应tap、taphold、swipe、swipeleft 和 swiperight。
tap(轻击):一次快速完整的轻击后触发
taphold(轻击不放):轻击并不放(大约一秒)后触发
swipe(滑动):一秒内水平拖拽大于30PX,或者纵向拖曳小于20px的事件发生时触发的事件。多长时间拖拽多少px可以设置的。这个事件有其相关联的属性,分别为
swipeleft(左划):划动事件为向左的方向时触发
swiperight(右划):划动事件为向右的方向时触发
要绑定这些事件,只需要在document.ready()中进行编程即可,如下代码示例:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<style type="text/css">
.item-title {padding: 25px 10px; }
#fixed-fullscreen-content {margin-top: 0; }
</style>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind('mobileinit', function(){
$.event.special.swipe.horizontalDistanceThreshold = 100; // 修改触发 swipe 事件的最小水平拖曳距离为 100(px)
$.event.special.swipe.verticalDistanceThreshold = 120; // 修改触发 swipe 事件的最大垂直拖曳距离为 120 (px)
});
$(function(){
$("#home").live('swipeleft', function() {
$('#toPage2').click(); // 为首页绑定向左划动事件
});
$("#page-2").live('swiperight', function() {
$('#toHome').click(); // 为另一页面绑定向右划动事件
});
});
</script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>jQuery Mobile Demo</h1>
</div>
<div data-role="content">
<p>本例子中,为两个页面的 body 元素分别绑定了 swipeleft 和 swiperight ,划动后分别触发相应的链接,转到另一个页面,另外使用 data-transition="slide" 把页面过场改为“滑动”效果,从而达到 Apps 中常用的滑动换页效果。</p>
<a id="toPage2" href="#page-2" data-role="button" data-transition="slide" data-theme="b">向左滑动触发我这个链接</a>
</div>
<div data-role="footer">
<h2>Demo By </h2>
</div>
</div>
<div data-role="page" id="page-2">
<div data-role="header">
<h1>jQuery Mobile Demo</h1>
</div>
<div data-role="content">
<a id="toHome" href="#home" data-role="button" data-theme="b" data-transition="slide" data-direction="reverse" data-rel="back">向右滑动触发我这个链接</a>
</div>
<div data-role="footer">
<h2>Demo By </h2>
</div>
</div>
</body>
</html>
tap(轻击):一次快速完整的轻击后触发
$(function(){ $("#home").live('tap', function() { $('#toPage2').click(); // 为首页绑定点击事件 }); $("#page-2").live('tap', function() { $('#toHome').click(); // 为另一页面绑定点击事件 }); });
taphold(轻击不放):轻击并不放(大约一秒)后触发
$(function(){
$("#home").live('taphole', function() {
$('#toPage2').click(); // 为首页绑定长按事件
});
$("#page-2").live('taphole', function() {
$('#toHome').click(); // 为另一页面绑定长按事件
});
});
swipe(滑动) : 随便左右滑动
$(function(){
$("#home").live('swipe', function() {
$('#toPage2').click(); // 为首页绑定滑动事件
});
$("#page-2").live('swipe', function() {
$('#toHome').click(); // 为另一页面绑定滑动事件
});
});