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

本文为 兄弟连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="css/jquery.mobile-1.0.1.min.css"
  9. rel="stylesheet" type="text/css"/>
  10. <script src="js/jquery-1.6.4.js"
  11. type="text/javascript" ></script>
  12. <script src="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="css/jquery.mobile-1.0.1.min.css"
  9. rel="stylesheet" type="text/css"/>
  10. <script src="js/jquery-1.6.4.js"
  11. type="text/javascript" ></script>
  12. <script src="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="#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="css/jquery.mobile-1.0.1.min.css"
  9. rel="stylesheet" type="text/css"/>
  10. <script src="js/jquery-1.6.4.js"
  11. type="text/javascript" ></script>
  12. <script src="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>
时间： 2024-07-31 14:30:27

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

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

当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧!) <!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport"

HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(51)--jquerymobile中改善页面访问速度 在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响. 在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mob

HTML5移动开发之路（44）——JqueryMobile中的按钮

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(44)--JqueryMobile中的按钮 一.链接按钮 [html] view plain copy print? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <link href=

小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响. 在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mobile会对标记data-prefetch的链接地址进行预取操作.预取的详细过程如下: 注意:使用预取功能时,不建议给所有链接都添加data-pr

小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来.(程序灵活性较弱) 一.以GET方式实现页面间参数传递 <!DOCTYPE html

HTML5移动开发之路（53）——jQueryMobile页面间参数传递

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(53)--jQueryMobile页面间参数传递 在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的

HTML5移动开发之路（50）——jquerymobile页面初始化过程

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(50)--jquerymobile页面初始化过程 了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,测试代码如下: [html] view plain copy print? <!DOCTYPE html> <html> <head> <title>练习</title

HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(43)--JqueryMobile页眉.工具栏和标签栏导航 一.页眉 1.添加页眉和页脚 [html] view plain copy print? <div data-role="header"> <h1>第 1 页</h1> </div> [html] view plain copy print? <div data-role="

小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程

为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,测试代码如下: <!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport" content="width=