Chinaunix首页 | 论坛 | 博客

15859020900的ChinaUnix博客

首页　| 　博文目录　| 　关于我

15859020900

  • 博客访问： 77000
  • 博文数量： 59
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 600
  • 用 户 组： 普通用户
  • 注册时间： 2016-08-22 10:54
文章分类

全部博文（59）

文章存档

2016年（59）

我的朋友
最近访客
推荐博文
HTML5移动开发之路（52）——jquerymobile中的触控交互

分类： HTML5

2016-11-22 16:19:31

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

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

一、轻击与按住

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

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >  
  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?在CODE上查看代码片派生到我的代码片
  1. >  
  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?在CODE上查看代码片派生到我的代码片
  1. >  
  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>  
阅读(922) | 评论(0) | 转发(0) |
0

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

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

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6