代码改变世界

手机前端之jquery Mobile学习——swipe

2011-11-01 17:17  呦菜  阅读(3516)  评论(0)    收藏  举报

这是经常会在Android手机上出现的一个动作，那就是手指划过屏幕的时候执行动作。

手机上使用到的事件，可以使用live()和bind()来绑定。

swipe   在一秒钟的间隔内水平方向上拖动30px以上会触发该事件，(水平方向上拖动要保持在20px以内，否则不会触发).

swipeleft  在左边方向移动时触发该事件.

 

swiperight    在右边方向移动时触发该事件.

下面的代码以swipeleft为例：

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- 只要将当前站点配置为移动应用程序，则对 phonegap.js 的该引用将允许代码提示。
	 要将该站点配置为移动应用程序，请转至“站点”->“移动应用程序”->“配置应用程序框架...”-->
<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>
<div data-role="footer" data-theme="e" data-position="fixed">
  <h2>copy@2011</h2></div>
</div>
</body>
</html>

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