検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >Xiaoqiang の HTML5 モバイル開発ロード (52) - jquerymobile でのタッチ インタラクション

Xiaoqiang の HTML5 モバイル開発ロード (52) - jquerymobile でのタッチ インタラクション

黄舟
黄舟オリジナル
2017-02-15 14:00:161520ブラウズ

モバイル デバイスをタッチ操作に使用する場合、最も一般的に使用される方法は、画面をタップする、長押しする、またはジェスチャー操作です。jQuery Mobile は、バインドされたタッチ イベントを通じてユーザーの特定のタッチ動作に応答できます。

1. タップアンドホールド

コードに直接移動します (すべてがコードに含まれています。よく見てください!)


<!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>

タップ: イベントをタップ


タップホールド: イベントを押し続けます

2. スワイプ

スワイプとは、指またはスタイラスで画面を左右にすばやくスライドすることを意味し、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">
	$(&#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>

インターフェースの切り替えプロセス中に切り替え効果を変更する必要がある場合は、リンクの表示属性を none に設定し、 click を呼び出す必要があります。 (リスニング関数内) メソッドを使用してインターフェイスの切り替えを実行し、リンクにデータ遷移を追加して切り替え効果を設定します。


3. 仮想マウスイベント


イベント 意味
vmouseover DOM コンテナをタッチまたはスライドします
v moseout タッチまたはスライドして離してください
vmousedown タッチまたはプレス
vmoseup タッチを終了するかマウスボタンを離す
vclick タッチを終了するかマウスボタンを離す
vclickイベント通常は vmouseup イベントの後に続きます300ミリ秒でトリガー
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>

上記は、Xiaoqiang の HTML5 モバイル開発ロード (52) - jquerymobile でのタッチ インタラクションの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。


声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Xiaoqiang の HTML5 モバイル開発ロード (51) - jquerymobile でのページ アクセス速度の向上次の記事：Xiaoqiang の HTML5 モバイル開発ロード (51) - jquerymobile でのページ アクセス速度の向上

関連記事

続きを見る