小强的HTML5移动开发之路(52)——jquerymobile中的触控交互
当使用移动设备进行触控操作时,最常用的就是轻击、按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为。
一、轻击与按住
直接上代码(一切皆在代码中,细细品吧!)
<!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="css/jquery.mobile-1.0.1.min.css"
rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.js"
type="text/javascript" ></script>
<script src="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事件。
<!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="css/jquery.mobile-1.0.1.min.css"
rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.js"
type="text/javascript" ></script>
<script src="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="#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事件时触发 |
...... | ...... |
...... | ...... |
<!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="css/jquery.mobile-1.0.1.min.css"
rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.js"
type="text/javascript" ></script>
<script src="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中的触控交互的更多相关文章
- 小强的HTML5移动开发之路(18)——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路(14)——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路(13)——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路(11)——链接,图片,表格,框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路(42)——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路(37)——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路(12)——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- 小强的HTML5移动开发之路(3)——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
- 小强的HTML5移动开发之路(1)——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...
随机推荐
- 如何应对DDOS网络攻击
650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/a ...
- NET Framework 4.5 有更加简便的方法 Task.Run()
NET Framework 4.5 有更加简便的方法 Task.Run()
- 【习题 7-7 UVA-12558】Egyptian Fractions (HARD version)
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 迭代加深搜索. 枚举最大量maxdep 在dfs里面传剩余的要凑的分子.分母 以及上一次枚举的值是多少. 然后找到最小的k,满足1/ ...
- 宏定义#define整理
一.宏定义#define 优点:一方面可以节省程序的空间上的篇幅,另外,恰当地使用宏定义可提高程序的时间效率.代码可以写的通俗易懂.可以提高程序的清晰性.可读性,使于修改移植等. 缺点:宏定义的使用实 ...
- 【】maze
[链接]点击打开链接 [题意] 小 T 被放到了一个迷宫之中,这个迷宫由 n 个节点构成,两个节点之间可能存在多条无 向边,小 T 的起点为 1 号节点,终点为 n 号节点.有 m 条无向边,对于每一 ...
- 程序员的困境 - R中国用户组-炼数成金
原文:http://www.oschina.net/news/43389/the-plight-of-programmer 在大型公司中不能腐蚀自己的学习能力和时间能力. 最近我为一个内核程序员的职位 ...
- 洛谷—— P1018 乘积最大
https://www.luogu.org/problem/show?pid=1018#sub 题目描述 今年是国际数学联盟确定的“2000――世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年 ...
- [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
Using the react-intl FormattedMessage component, we’ll learn how to render content conditionally in ...
- 动态规划求解序列问题(LIS、JLIS)
1. 最长递增子序列 不要求位置连续:要求大小严格递增(strictly increasing) 穷举法解题 首先以每个数字为单位分割寻找最长递增子序列: int lis(const vector&l ...
- 如何在vue项目中使用百度编辑器ueditor
百度编辑器官方并没有提供vue项目使用说明,目前网上也有不少人实现了相关功能,这里就不再重复,只是针对自身项目碰到的情况做个记录,就当是熟悉了一遍富文本编辑器的代码结构. 按照网上的做法,基本可以实现 ...