在,我们来深入jQuery Mobile的事件,我们可以通过jQuery Mobile的API来扩展如下的事件类型。
- Touch事件
- 方向Orientation事件
- 滚动scroll事件
Touch事件
在jQuery Mobile中,有不少关于touch的事件。其中主要的有如下5类:tap,taphold,swipe,sipeleft,swiperight,它们的含义如下:
事件名 | 含义 |
tap | 当用户点屏幕时触发 |
taphold | 当用户点屏幕且保持触摸超过1秒时触发 |
swipe | 当页面被垂直或者水平拖动时触发。这个事件有其相关联的属性,分别为scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThreshold |
swipeleft | 当页面被拖动到左边方向时触发 |
swiperight | 当页面被拖动到右边方向时触发 |
要绑定这些事件,只需要在document.ready()中进行编程即可,如下代码示例:
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Understanding the jQuery Mobile API</title>
- <link rel="stylesheet" href="jquery.mobile.css" />
- <script src="jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".tap-hold-test").bind("taphold", function(event) {
- $(this).html("Tapped and held");
- });
- });
- </script>
- <script src="jquery.mobile.js"></script>
- </head>
- <body>
- <div data-role="page" id="my-page">
- <div data-role="header">
- <h1>Header</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview" id="my-list">
- <li class="tap-hold-test">Tap and hold test</li>
- </ul>
- </div>
- </div>
- </body>
- </html>
从上面的代码可以看到,将一个list列表跟taphold事件进行了绑定,当DOM加载完毕后,当触发taphold事件后,就会显示Tapped and held的提示信息。
jQuery Mobile方向感应事件
在现在的智能手机中,都有对方向变换的自动感知功能,比如当手机方向从水平方向切换到垂直方向时,则会触发该事件。在jQuery Mobile中,可以通过
orientationchange事件进行绑定,并且可以设定是垂直方向还是水平方向,如下代码所示:
- $(document).ready(function(){
- $('body').bind('orientationchange', function(event) {
- alert('orientationchange: '+ event.orientation);
- });
- });
在上面的代码中,通过对body元素绑定orientationchange事件,并显示出当前的orientation属性。但要注意的是,即使在 DOM加载完后,还是应该重新调用该事件,因为在DOM加载时有时可能orientationchange事件还没能完全加载完毕,所以应该按如下的方法在ready加载后,再加载一次:
- $(document).ready(function(){
- $('body').bind('orientationchange', function(event) {
- alert('orientationchange: '+ event.orientation);
- });
- $('body').trigger('orientationchange');
- });
jQuery Mobile滚动事件
当用户在设备上滚动页面时,jQuery Mobile提供了滚动事件进行监听。其中首先介绍的是scrollstart事件,该事件发生在页面滚动开始时,如下代码:
- $(document).ready(function(){
- $('body').bind('scrollstart', function(event) {
- //相关的滚动开始代码
- });
- });
同样,当滚动停止后,则可以用scrollstop事件进行监听,如下代码:
- $(document).ready(function(){
- $('body').bind('scrollstop', function(event) {
- //相关滚动停止的代码
- });
- });