小强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手机发展之路(51)——jquerymobile在提高页面访问速度
正在使用jQuery Mobile开发时间可以选择单页模板和多页模板,在单页模板时从一个页面跳转到另一个页面时从需要server要求.用户会感到轻微的停顿. 使用多页模板,为了改善网页之间跳跃的流畅, ...
- 萧墙HTML5手机发展之路(53)——jQueryMobile页面之间的参数传递
基于单个页面模板HTTP通过路POST和GET请求传递参数.在多页模板,并且不需要server沟通,通常有三种方式在多页模板来实现页面之间的参数传递. 1.GET道路:上一页页生成参数并传递到下一个页 ...
- 小强的HTML5移动开发之路(11)——链接,图片,表格,框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的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移动开发之路(42)——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路(37)——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- IS创新之路 -- 都昌公司赋能型HIT企业发展之路
◆◆前言 近日,上海瑞金医院对我司表示:“我院从2000年开始自主开发医院信息系统,走出了一条可持续的信息化发展之路.已建成五大系统,284个子系统.但我院仍然坚持在努力推进以电子病历为核心医院信息化 ...
随机推荐
- jQuery
代码的层定位滑动动画效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【Java收集的源代码分析】Hashtable源代码分析
Hashtable简单介绍 Hashtable相同是基于哈希表实现的,相同每一个元素是一个key-value对,其内部也是通过单链表解决冲突问题,容量不足(超过了阀值)时.相同会自己主动增长. Has ...
- Adb shell得到root才干
于Adb shell我们希望用一些文件系统文件夹时,经常有在没有痛苦Root才干,系统会提示su: Permission Denied. su不是每个手机有一个.能不能在这里下载: http://do ...
- Hibernate一个简短的引论
我们从几个方面进行阐述Hibernate When? What ? How? When? Hibernate由来是因为当时EJBBean1.1在处理entittBean架构时,花费的时间要比业务逻辑很 ...
- therefore/so/hence/then/accordingly/Thus
这几个词的区别大致可从以下几方面去看:1.therefore adv.因此, 所以=for that reason=consequently常用于连接两个并列分句,其前加“and”或分号“:”.He ...
- 简单QT应用了可实现手动布局QT应用
新建QT项目 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg==/font/5a6L5L2T/fontsize/4 ...
- Smart Framework
Smart Framework:轻量级 Java Web 框架 发表于2年前(2013-09-01 08:39) 阅读(48569) | 评论(188) 544人收藏此文章, 我要收藏 赞83 阿 ...
- 为了圣像画系统V1.0Beta版(javascript)-GIS520社区
地图标绘系统V1.0測试版 (界面比較难看,之后再统一美化!) 演示地址:http://www.gis520.com/gis/plotdemo/index.html 查看可在菜单Map--> ...
- [WebGL入门]四,渲染准备
注意:文章翻译http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外.鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家 ...
- 谈到一些传统的企业网站SEO问题领域
在网络营销中的时间越长,有时候,企业网站还是有一些传统做法不解.也许,这是它的思想的局限.比如,我最近来到了一个新的工作环境中发现,虽然公司是专业从事传统渠道已经很不错了,但对于网络营销渠道还有改进的 ...