Maison > Article > interface Web > Route de développement mobile HTML5 de Xiaoqiang (52) - interaction tactile dans jquerymobile

Route de développement mobile HTML5 de Xiaoqiang (52) - interaction tactile dans jquerymobile

黄舟original: 2017-02-15 14:00:161503parcourir

Lors de l'utilisation d'appareils mobiles pour des opérations tactiles, les opérations les plus couramment utilisées sont le fait d'appuyer, d'appuyer et de maintenir l'écran, ou les opérations gestuelles. jQuery Mobile peut répondre au comportement tactile spécifique de l'utilisateur via des événements tactiles liés.

1. Appuyez et maintenez

pour saisir directement le code (tout est dans le code, regardez de plus près !)

<!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">
	$(&#39;#page1&#39;).live(&#39;tap&#39;, function(){
		$.mobile.changePage(&#39;#page2&#39;);
	});
	$(&#39;#page2&#39;).live(&#39;tap&#39;, function(){
		$.mobile.changePage(&#39;#page1&#39;);
	});
	$(&#39;#page1&#39;).live(&#39;taphold&#39;, function(){
		alert(&#39;taphold事件被触发&#39;);
	});
	$(&#39;#page2&#39;).live(&#39;taphold&#39;, function(){
		$.mobile.changePage(&#39;#about&#39;);
	});
</script>
</head>
<body>
	<section id="page1" data-role="page">
		<header data-role="header">
			<h1>Tap事件处理</h1>
		</header>
		<p class="content" data-role="content">
			轻击页面进入下一页<br/>
			按住不放，打开关于对话框
		</p>
		<footer data-role="footer"></footer>
	</section>	
	<section id="page2" data-role="page">
		<header data-role="header">
			<h1>Tap事件处理</h1>
		</header>
		<p class="content" data-role="content">
			轻击页面返回前一页
		</p>
		<footer data-role="footer">
		</footer>
	</section>
	<p id="abut" data-role="dialog">
		<p data-role="header">
			<h1>关于本程序</h1>
		</p>
		<p data-role="content">
			演示轻击触控事件响应
		</p>
	</p>
</body>
</html>

appuyez : appuyez sur l'événement

taphold : appuyez et maintenez l'événement

2. Glissez

Le glissement fait référence à l'utilisation de votre doigt Ou le stylet glisse rapidement vers la gauche ou la droite sur l'écran, ce qui déclenchera l'événement swipeleft ou swiperright.

<!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">
	$(&#39;#page1&#39;).live(&#39;swiperight&#39;, function(){
		$.mobile.changePage(&#39;#page2&#39;);
	});
	$(&#39;#page2&#39;).live(&#39;swiperight&#39;, function(){
		$.mobile.changePage(&#39;#page1&#39;);
	});
	$(&#39;#page1&#39;).live(&#39;swipeleft&#39;, function(){
		$(&#39;#lnkDialog&#39;).click();
	});
	$(&#39;#page2&#39;).live(&#39;swiperleft&#39;, function(){
		$.mobile.changePage(&#39;#about&#39;);
	});
</script>
</head>
<body>
	<section id="page1" data-role="page">
		<header data-role="header">
			<h1>swipe事件处理</h1>
		</header>
		<p class="content" data-role="content">
			向右滑动页面进入下一页<br/>
			向左滑动页面，打开关于对话框
		</p>
		<footer data-role="footer"></footer>
	</section>	
	<section id="page2" data-role="page">
		<header data-role="header">
			<h1>swipe事件处理</h1>
		</header>
		<p class="content" data-role="content">
			向右滑动页面进入前一页br/>
			向左滑动页面，打开关于对话框
		</p>
		<footer data-role="footer">
		</footer>
	</section>
	<p id="abut" data-role="dialog">
		<p data-role="header">
			<h1>关于本程序</h1>
		</p>
		<p data-role="content">
			演示swipeleft&swiperight触控事件响应
		</p>
	</p>
	<a id="lnkDialog" href="#about" data-rel="dialog" data-transition="pop" style="display:none;"></a>
</body>
</html>

Une astuce est utilisée dans le code ci-dessus. Si vous devez modifier l'effet de commutation pendant le processus de changement d'interface, vous devez utiliser un lien hypertexte pour l'implémenter, et modifiez l'affichage du lien. Définissez l'attribut sur aucun, appelez la méthode click() dans la fonction d'écoute pour effectuer une commutation d'interface, puis ajoutez une transition de données au lien pour définir l'effet de commutation.

3. Événements de souris virtuelle

事件	含义
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">
	$(&#39;#page1&#39;).live(&#39;vmouseup&#39;, 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>
		<p class="content" data-role="content">
			轻击页面，显示点击位置
		</p>
		<p style="height: 500px;"></p>
		内容底部
		<footer data-role="footer"></footer>
	</section>
</body>
</html>

Ce qui précède est le chemin de développement mobile HTML5 de Xiaoqiang ( 52)——Le contenu de l'interaction tactile dans jquerymobile Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Route de développement mobile HTML5 de Xiaoqiang (51) - amélioration de la vitesse d'accès aux pages dans jquerymobileArticle suivant：Route de développement mobile HTML5 de Xiaoqiang (51) - amélioration de la vitesse d'accès aux pages dans jquerymobile

Articles Liés

Voir plus