首页 > 代码库 > HTML5移动开发之路(52)——jquerymobile中的触控交互
HTML5移动开发之路(52)——jquerymobile中的触控交互
本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(52)——jquerymobile中的触控交互
当使用移动设备进行触控操作时,最常用的就是轻击、按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为。
一、轻击与按住
直接上代码(一切皆在代码中,细细品吧!)
[html] view plain copy
print?
- <!DOCTYPE html>
- <html>
- <head>
- <title>练习</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,
- initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
- <link href=http://www.mamicode.com/"css/jquery.mobile-1.0.1.min.css"
- rel="stylesheet" type="text/css"/>
- <script src=http://www.mamicode.com/"js/jquery-1.6.4.js"
- type="text/javascript" ></script>
- <script src=http://www.mamicode.com/"js/jquery.mobile-1.0.1.js"
- type="text/javascript" ></script>
- <script type="text/javascript">
- $(‘#page1‘).live(‘tap‘, function(){
- $.mobile.changePage(‘#page2‘);
- });
- $(‘#page2‘).live(‘tap‘, function(){
- $.mobile.changePage(‘#page1‘);
- });
- $(‘#page1‘).live(‘taphold‘, function(){
- alert(‘taphold事件被触发‘);
- });
- $(‘#page2‘).live(‘taphold‘, function(){
- $.mobile.changePage(‘#about‘);
- });
- </script>
- </head>
- <body>
- <section id="page1" data-role="page">
- <header data-role="header">
- <h1>Tap事件处理</h1>
- </header>
- <div class="content" data-role="content">
- 轻击页面进入下一页<br/>
- 按住不放,打开关于对话框
- </div>
- <footer data-role="footer"></footer>
- </section>
- <section id="page2" data-role="page">
- <header data-role="header">
- <h1>Tap事件处理</h1>
- </header>
- <div class="content" data-role="content">
- 轻击页面返回前一页
- </div>
- <footer data-role="footer">
- </footer>
- </section>
- <div id="abut" data-role="dialog">
- <div data-role="header">
- <h1>关于本程序</h1>
- </div>
- <div data-role="content">
- 演示轻击触控事件响应
- </div>
- </div>
- </body>
- </html>
tap:轻击事件
taphold:按住事件
二、轻扫
轻扫是指用手指或手写笔快速在屏幕上向左或向右快速滑动,会触发swipeleft事件或者swiperight事件。
[html] view plain copy
print?
- <!DOCTYPE html>
- <html>
- <head>
- <title>练习</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,
- initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
- <link href=http://www.mamicode.com/"css/jquery.mobile-1.0.1.min.css"
- rel="stylesheet" type="text/css"/>
- <script src=http://www.mamicode.com/"js/jquery-1.6.4.js"
- type="text/javascript" ></script>
- <script src=http://www.mamicode.com/"js/jquery.mobile-1.0.1.js"
- type="text/javascript" ></script>
- <script type="text/javascript">
- $(‘#page1‘).live(‘swiperight‘, function(){
- $.mobile.changePage(‘#page2‘);
- });
- $(‘#page2‘).live(‘swiperight‘, function(){
- $.mobile.changePage(‘#page1‘);
- });
- $(‘#page1‘).live(‘swipeleft‘, function(){
- $(‘#lnkDialog‘).click();
- });
- $(‘#page2‘).live(‘swiperleft‘, function(){
- $.mobile.changePage(‘#about‘);
- });
- </script>
- </head>
- <body>
- <section id="page1" data-role="page">
- <header data-role="header">
- <h1>swipe事件处理</h1>
- </header>
- <div class="content" data-role="content">
- 向右滑动页面进入下一页<br/>
- 向左滑动页面,打开关于对话框
- </div>
- <footer data-role="footer"></footer>
- </section>
- <section id="page2" data-role="page">
- <header data-role="header">
- <h1>swipe事件处理</h1>
- </header>
- <div class="content" data-role="content">
- 向右滑动页面进入前一页br/>
- 向左滑动页面,打开关于对话框
- </div>
- <footer data-role="footer">
- </footer>
- </section>
- <div id="abut" data-role="dialog">
- <div data-role="header">
- <h1>关于本程序</h1>
- </div>
- <div data-role="content">
- 演示swipeleft&swiperight触控事件响应
- </div>
- </div>
- <a id="lnkDialog" href=http://www.mamicode.com/"#about" data-rel="dialog" data-transition="pop" style="display:none;"></a>
- </body>
- </html>
上面代码中用到了一个技巧,在界面切换过程中如果需要改变切换效果,则必须使用超级链接了实现,将该链接的display属性设为none,在监听函数中调用click()方法执行界面切换,然后在链接中添加data-transition进行切换效果设置。
三、虚拟鼠标事件
事件 | 含义 |
vmouseover | 触控或者滑动DOM容器之上 |
vmoseout | 触控或者滑动离开 |
vmousedown | 触摸或者按下 |
vmoseup | 触摸结束或者鼠标按键释放 |
vclick | 触摸结束或鼠标按键被释放 |
vclick事件通常在vmouseup事件后300ms触发 | |
vmousecancel | 触控事件中发起mousecancel事件时触发 |
...... | ...... |
...... | ...... |
[html] view plain copy
print?
- <!DOCTYPE html>
- <html>
- <head>
- <title>练习</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,
- initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
- <link href=http://www.mamicode.com/"css/jquery.mobile-1.0.1.min.css"
- rel="stylesheet" type="text/css"/>
- <script src=http://www.mamicode.com/"js/jquery-1.6.4.js"
- type="text/javascript" ></script>
- <script src=http://www.mamicode.com/"js/jquery.mobile-1.0.1.js" type="text/javascript" ></script>
- <script type="text/javascript">
- $(‘#page1‘).live(‘vmouseup‘, function(event, ui){
- alert("当前点击位置" + "\n" +
- "\npageX:" + event.pageX + //当前HTML页面横坐标
- "\npageY:" + event.pageY + //当前HTML页面纵坐标
- "\nscreenX:" + event.screenX + //当前屏幕横坐标
- "\nscreenY:" + event.screenY + //当前屏幕纵坐标
- "\nclientX:" + event.clientX + //当前窗口区域横坐标
- "\nclientY:" + event.clientY); //当前窗口区域纵坐标
- });
- </script>
- </head>
- <body>
- <section id="page1" data-role="page">
- <header data-role = "header">
- <h1>vMouse事件处理</h1>
- </header>
- <div class="content" data-role="content">
- 轻击页面,显示点击位置
- </div>
- <div style="height: 500px;"></div>
- 内容底部
- <footer data-role="footer"></footer>
- </section>
- </body>
- </html>
HTML5移动开发之路(52)——jquerymobile中的触控交互
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。