首页 > 代码库 > HTML5移动开发之路（52）——jquerymobile中的触控交互

HTML5移动开发之路（52）——jquerymobile中的触控交互

2024-08-22 12:43:05   224人阅读

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（52）——jquerymobile中的触控交互

当使用移动设备进行触控操作时，最常用的就是轻击、按住屏幕或者手势操作，jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为。

一、轻击与按住

直接上代码（一切皆在代码中，细细品吧！）

 

[html] view plain copy
 
 print?技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>练习</title>  
  5. <meta charset="utf-8">  
  6. <meta name="viewport" content="width=device-width,   
  7.       initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />  
  8. <link href=http://www.mamicode.com/"css/jquery.mobile-1.0.1.min.css"   
  9.       rel="stylesheet" type="text/css"/>  
  10. <script src=http://www.mamicode.com/"js/jquery-1.6.4.js"   
  11.       type="text/javascript" ></script>  
  12. <script src=http://www.mamicode.com/"js/jquery.mobile-1.0.1.js"    
  13.       type="text/javascript" ></script>  
  14. <script type="text/javascript">  
  15.     $(‘#page1‘).live(‘tap‘, function(){  
  16.         $.mobile.changePage(‘#page2‘);  
  17.     });  
  18.     $(‘#page2‘).live(‘tap‘, function(){  
  19.         $.mobile.changePage(‘#page1‘);  
  20.     });  
  21.     $(‘#page1‘).live(‘taphold‘, function(){  
  22.         alert(‘taphold事件被触发‘);  
  23.     });  
  24.     $(‘#page2‘).live(‘taphold‘, function(){  
  25.         $.mobile.changePage(‘#about‘);  
  26.     });  
  27. </script>  
  28. </head>  
  29. <body>  
  30.     <section id="page1" data-role="page">  
  31.         <header data-role="header">  
  32.             <h1>Tap事件处理</h1>  
  33.         </header>  
  34.         <div class="content" data-role="content">  
  35.             轻击页面进入下一页<br/>  
  36.             按住不放，打开关于对话框  
  37.         </div>  
  38.         <footer data-role="footer"></footer>  
  39.     </section>      
  40.     <section id="page2" data-role="page">  
  41.         <header data-role="header">  
  42.             <h1>Tap事件处理</h1>  
  43.         </header>  
  44.         <div class="content" data-role="content">  
  45.             轻击页面返回前一页  
  46.         </div>  
  47.         <footer data-role="footer">  
  48.         </footer>  
  49.     </section>  
  50.     <div id="abut" data-role="dialog">  
  51.         <div data-role="header">  
  52.             <h1>关于本程序</h1>  
  53.         </div>  
  54.         <div data-role="content">  
  55.             演示轻击触控事件响应  
  56.         </div>  
  57.     </div>  
  58. </body>  
  59. </html>  

tap：轻击事件

 

taphold:按住事件

二、轻扫

轻扫是指用手指或手写笔快速在屏幕上向左或向右快速滑动，会触发swipeleft事件或者swiperight事件。

 

[html] view plain copy
 
 print?技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>练习</title>  
  5. <meta charset="utf-8">  
  6. <meta name="viewport" content="width=device-width,   
  7.       initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />  
  8. <link href=http://www.mamicode.com/"css/jquery.mobile-1.0.1.min.css"   
  9.       rel="stylesheet" type="text/css"/>  
  10. <script src=http://www.mamicode.com/"js/jquery-1.6.4.js"   
  11.       type="text/javascript" ></script>  
  12. <script src=http://www.mamicode.com/"js/jquery.mobile-1.0.1.js"    
  13.       type="text/javascript" ></script>  
  14. <script type="text/javascript">  
  15.     $(‘#page1‘).live(‘swiperight‘, function(){  
  16.         $.mobile.changePage(‘#page2‘);  
  17.     });  
  18.     $(‘#page2‘).live(‘swiperight‘, function(){  
  19.         $.mobile.changePage(‘#page1‘);  
  20.     });  
  21.     $(‘#page1‘).live(‘swipeleft‘, function(){  
  22.         $(‘#lnkDialog‘).click();  
  23.     });  
  24.     $(‘#page2‘).live(‘swiperleft‘, function(){  
  25.         $.mobile.changePage(‘#about‘);  
  26.     });  
  27. </script>  
  28. </head>  
  29. <body>  
  30.     <section id="page1" data-role="page">  
  31.         <header data-role="header">  
  32.             <h1>swipe事件处理</h1>  
  33.         </header>  
  34.         <div class="content" data-role="content">  
  35.             向右滑动页面进入下一页<br/>  
  36.             向左滑动页面，打开关于对话框  
  37.         </div>  
  38.         <footer data-role="footer"></footer>  
  39.     </section>      
  40.     <section id="page2" data-role="page">  
  41.         <header data-role="header">  
  42.             <h1>swipe事件处理</h1>  
  43.         </header>  
  44.         <div class="content" data-role="content">  
  45.             向右滑动页面进入前一页br/>  
  46.             向左滑动页面，打开关于对话框  
  47.         </div>  
  48.         <footer data-role="footer">  
  49.         </footer>  
  50.     </section>  
  51.     <div id="abut" data-role="dialog">  
  52.         <div data-role="header">  
  53.             <h1>关于本程序</h1>  
  54.         </div>  
  55.         <div data-role="content">  
  56.             演示swipeleft&swiperight触控事件响应  
  57.         </div>  
  58.     </div>  
  59.     <a id="lnkDialog" href=http://www.mamicode.com/"#about" data-rel="dialog" data-transition="pop" style="display:none;"></a>  
  60. </body>  
  61. </html>  

上面代码中用到了一个技巧，在界面切换过程中如果需要改变切换效果，则必须使用超级链接了实现，将该链接的display属性设为none，在监听函数中调用click()方法执行界面切换，然后在链接中添加data-transition进行切换效果设置。

 

三、虚拟鼠标事件

 

事件 含义
vmouseover 触控或者滑动DOM容器之上
vmoseout 触控或者滑动离开
vmousedown 触摸或者按下
vmoseup 触摸结束或者鼠标按键释放
vclick 触摸结束或鼠标按键被释放
  vclick事件通常在vmouseup事件后300ms触发
vmousecancel 触控事件中发起mousecancel事件时触发
...... ......
...... ......
[html] view plain copy
 
 print?技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>练习</title>  
  5. <meta charset="utf-8">  
  6. <meta name="viewport" content="width=device-width,   
  7.       initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />  
  8. <link href=http://www.mamicode.com/"css/jquery.mobile-1.0.1.min.css"   
  9.       rel="stylesheet" type="text/css"/>  
  10. <script src=http://www.mamicode.com/"js/jquery-1.6.4.js"   
  11.       type="text/javascript" ></script>  
  12. <script src=http://www.mamicode.com/"js/jquery.mobile-1.0.1.js"  type="text/javascript" ></script>  
  13. <script type="text/javascript">  
  14.     $(‘#page1‘).live(‘vmouseup‘, function(event, ui){  
  15.         alert("当前点击位置" + "\n" +  
  16.             "\npageX:" + event.pageX +   //当前HTML页面横坐标  
  17.             "\npageY:" + event.pageY +   //当前HTML页面纵坐标  
  18.             "\nscreenX:" + event.screenX +  //当前屏幕横坐标  
  19.             "\nscreenY:" + event.screenY +  //当前屏幕纵坐标  
  20.             "\nclientX:" + event.clientX +  //当前窗口区域横坐标  
  21.             "\nclientY:" + event.clientY);  //当前窗口区域纵坐标  
  22.     });  
  23. </script>  
  24. </head>  
  25. <body>  
  26.     <section id="page1" data-role="page">  
  27.         <header data-role = "header">  
  28.             <h1>vMouse事件处理</h1>  
  29.         </header>  
  30.         <div class="content" data-role="content">  
  31.             轻击页面，显示点击位置  
  32.         </div>  
  33.         <div style="height: 500px;"></div>  
  34.         内容底部  
  35.         <footer data-role="footer"></footer>  
  36.     </section>  
  37. </body>  
  38. </html>  

HTML5移动开发之路（52）——jquerymobile中的触控交互


联系
我们