HTML5入门

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

字号+ 作者:水寒 来源:csdn 2015-06-02 14:34 我要评论( )

当使用移动设备进行触控操作时,最常用的就是轻击、按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为。一、轻击与按住直接上代码(一切皆在代码中,细细品吧!)练习meta name=viewport content=width=device-width, in

当使用移动设备进行触控操作时,最常用的就是轻击、按住屏幕或者手势操作,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>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5学得好不好,看掌握多少标签

    html5学得好不好,看掌握多少标签

    2015-09-28 12:53

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

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

    2015-06-02 14:32

  • 小强的HTML5移动开发之路(51)——jquerymobile中改善页面访问

    小强的HTML5移动开发之路(51)——jquerymobile中改善页面访问

    2015-06-02 14:34

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

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

    2015-06-02 14:34

网友点评