Daily Archives: 2012 年 02 月 23 日

Hello World

[转]手机前端之jquery Mobile学习——swipe

2012 年 02 月 23 日 – 下午 4:07

这是经常会在Android手机上出现的一个动作，那就是手指划过屏幕的时候执行动作。
手机上使用到的事件，可以使用live()和bind()来绑定。
swipe 在一秒钟的间隔内水平方向上拖动30px以上会触发该事件，(水平方向上拖动要保持在20px以内，否则不会触发).
swipeleft 在左边方向移动时触发该事件.
swiperight 在右边方向移动时触发该事件.
下面的代码以swipeleft为例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
<script src="/phonegap.js" type="text/javascript"></script>
    <script>
    $(document).ready(function() {
        $("#home").live("swipeleft",function(){
            alert("我是滑动过来的!");          
        });
 
     });
    </script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="e" data-position="inline"><h1>swipeleft</h1></div>
<div data-role="content" style="text-align:center" >内容</div>
</body>
</html>

在Android模拟器上鼠标迅速向左滑动，则触发事件。

——转自：http://archive.cnblogs.com/a/2232011/
ps：不仅Android，ios也可以这么玩

Tags | Permalink | Comment (0)