イベント処理

前回、ナビゲーションバー、スライダー、セレクトメニュー、トグルスイッチのコンポーネント作成方法をご紹介しましたが、 今回はタップ・タップホールド・スワイプなどのイベント処理についてです。 また前回まではonclick属性を使ってイベントの設定を行っていましたが、今回からはlive()を使っていきます。
※詳しい説明などは他サイト・書籍を見てください。

 

イベント処理の基本、タップ(tap)

  • 画像1の「ここを」をタップすると「タップしました」というテキストがでる(画像2)
  • 画像1のボタンをタップするとダイアログが出る(画像3)

というイベント内容です。



画像1

画像2

画像3

 

【HTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
								<script type="text/javascript" src="test6.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
							</head>
							<body>
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>テスト</h1>
									</div>
									<div data-role="content">
										<p id="test">ここを</p>
										<p>&nbsp;</p>
										<div data-role="fieldcontain">
											<label for="test1">危険なので押さないでください</label>
											<input type="button" id="test1" value="ボタン" >
										</div>
									</div>
								</div>

								<!---ダイアログ-------->
								<div id="dialog1" data-role="dialog">
									<div data-role="header">
										<h1>メッセージ</h1>
									</div>
									<div data-role="content">
										<p id="d_content"></p>
									</div>
								</div>
							</body>
						</html>
					

 

【test6.jsファイルに記述するコード】

						//「home」ページ内のイベント処理内容
						$("#home").live("pageinit",function(){

							//「ここを」をタップして文字を出す
							$("#test").live("tap",function(){
								$(this).text( $(this).text() + "タップしました。");
							});

							//ボタン押してダイアログを出す
							$("#test1").live("tap",function(){
								var str = $(this).val();
								$("#d_content").text("その" + str + "は押しちゃいけないやつです!");
								$.mobile.changePage("#dialog1", { transition:"pop" });
							});
						});
					

※作成したjavascript外部ファイル(test6.js)は、htmlファイルのhead内(jQueryとjQueryMobileの間)に読み込ませておいてください。

 

【jQueryMobileページ初期化について】
各イベント内容を記述する前に、まず記述しなければいけないのが下記のコードです。

$("ページid").live("pageinit", イベント内容);

これは「ページが読み込まれ準備完了したので、このページ内のイベント実行できます」というものです。
jQueryでは$(document).ready()を使用し初期化することが推奨されていますが、jQueryMobileでは上記コードを使用することが推奨されてます。 (※初期化する際に以前はpagecreateイベントが使われていた様ですが、今はpageinitを使用することが推奨されてます。)


【イベント処理の記述方法、イベントのバインド】

$(操作するオブジェクト).live( イベント名 , そのイベント内容);

ダイアログ作成方法の時にも書きましたがjQueryの基本は$()関数です。
$()の引数に対象のIDをすることで、その対象を操作するためのオブジェクトを作成できます。
あとはそのオブジェクトに対し、何をすると、どんな内容が起こるのかをlive()で設定します。

  • (1)画像1の「ここを」をタップすると「タップしました」というテキストがでる(画像2)について
    →HTMLコード18行目、test6.jsファイル5~7行目
    id="test"を追加したpタグで囲まれた部分を操作したいので、$("#test")とし、live()でイベントの設定を行います。
    今回はタップを使ったイベントなので、イベント名はtap。イベント内容部分の「$(this)」は「操作するオブジェクト」を指すので、ここでは「$("#test")」のことです。

  • (2)画像1のボタンをタップするとダイアログが出る(画像3)について
    →HTMLコード20~23行目と28~35行目、test6.jsファイル10~14行目
    前回まではonclick属性を使ってダイアログを出していましたが、live()でイベントの設定をする部分以外は全く同じです。
    ボタンを操作したいので、$("#test1")とし、live()でイベント設定。また、$(this).val()でinput要素の中のValue値を取り出し、変数strに格納しています。あとはいつも通りの方法でダイアログを表示させています。

次回もlive()を使ってイベントのバインドをしていきます。

 

 

CSSの操作、タップホールド(taphold)

  • 画像4の「ここを長押ししてください」を長押し(タップホールド)すると、テキストが変更される(画像5)
  • 画像4の黒色エリアを長押しすると、背景色・テキスト・テキスト色が変更される(画像6)

というイベント内容です。



画像4

画像5

画像6

 

【HTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
								<link rel="stylesheet" href="test6.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
								<script type="text/javascript" src="test6.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
							</head>
							<body>
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>テスト</h1>
									</div>
									<div data-role="content">
										<p id="test">ここを長押ししてください。</p>
										<p>&nbsp;</p>
										<div id="test1">
											<p>ここも長押ししてください。</p>
										</div>
									</div>
								</div>
							</body>
						</html>
					

 

【test6.cssファイルに記述するコード】

						#test1{
							color:#FFFFFF;
							background:#000000;
							width:100%;
							height:100px;
						}
					

 

【test6.jsファイルに記述するコード】

						$("#home").live("pageinit",function(){
							//長押ししてテキスト表示
							$("#test").live("taphold",function(){
								$(this).text("タップホールド成功です。");
							});

							//長押ししてCSS操作する
							$("#test1").live("taphold",function(){
								$(this).css("background","#fcf304");
								$(this).css("color","#000000");
								$(this).text("黄色に変わりました。");
							});
						});
					

※test6.css、test6.jsファイルを作成し、上記コードを記述した後、htmlファイルのhead内に読み込ませておいてください。
javascript外部ファイル(test6.js)は必ずhead内の「jQueryとjQueryMobileの間」に置くようにしてください。

 

前回の「イベント処理の基本、タップ」と同様、
$(操作するオブジェクト).live( イベント名 , そのイベント内容);」のかたちで記述します。

長押し(タップホールド)するイベントの時はイベント名がtapholdとなります。
また、長押しして背景色等が変わるイベントでは下記の記述でCSSの操作を行っています。

$('操作するオブジェクト').css("プロパティ名","値");

今回、id="test"を追加したdivで囲まれている部分のCSSを操作したいので、$("test")を指す$(this)とします。
背景とテキストカラーを操作するので「background、color」と「その値(色)」をそれぞれcss()の引数に指定。
テキストも変えるのでtext()を使い、引数にテキストをいれます。
長押しして背景色・テキスト・テキストカラーが変わるのを確認してみてください。


 

 

$.mobile.changePage()の確認、スワイプ(swipe,swiperight,swipeleft)

  • 画像7の「ここをスワイプしてください」をスワイプすると、画像表示・テキスト変更される(画像8)
  • 画像7の「右へスワイプしてください」の黒色エリアを右へスワイプすると、ページ2へ遷移する(画像9)。ページ2の「今度は左へスワイプしてください」のピンク色エリアを左へスワイプすると、テストページ(home)へ戻る。

というイベント内容です。



画像7

画像8

画像9

 

【HTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
								<link rel="stylesheet" href="test6.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
								<script type="text/javascript" src="test6.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
							</head>
							<body>
								<!---home--------------------->
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>テスト</h1>
									</div>
									<div data-role="content">
										<div id="test">ここをスワイプしてください。</div>

										<div id="test1">
											<p>右へスワイプしてください。</p>
										</div>
									</div>
								</div>

								<!---ページ2------------------>
								<div id="page2" data-role="page">
									<div data-role="header">
										<h1>ページ2</h1>
									</div>
									<div data-role="content">
										<div id="test2">
											<p>今度は左へスワイプしてください。</p>
										</div>
									</div>
								</div>
							</body>
						</html>
					

 

【test6.cssファイルに記述するコード】

						#test{
							height:200px;
						}

						#test1{
							color:#FFFFFF;
							background:#000000;
							width:100%;
							height:100px;
						}

						#test2{
							color:#FFFFFF;
							background:#eb6363;
							width:100%;
							height:100px;
						}
					

 

【test6.jsファイルに記述するコード】

						//homeのイベント
						$("#home").live("pageinit",function(){
							//スワイプして画像が出る
							$("#test").live("swipe",function(){
								$(this).text("スワイプ成功です。");
								$(this).css("background","url(sumaho.png) 0px 30px no-repeat");
							});
							//右へスワイプ
							$("#test1").live("swiperight",function(){
								$.mobile.changePage("#page2", { transition:"slide"});
							});
						});

						//page2のイベント
						$("#page2").live("pageinit",function(){
							//左へスワイプ
							$("#test2").live("swipeleft",function(){
								$.mobile.changePage("#home",{ transition:"slide", reverse: true, changeHash:true } );
							});
						});
					

※test6.css、test6.jsファイルを作成し、上記コードを記述した後、htmlファイルのhead内に読み込ませておいてください。
javascript外部ファイル(test6.js)は必ずhead内の「jQueryとjQueryMobileの間」に置くようにしてください。
※画像はテキトーに用意してください。今回使用した画像(sumaho.png)のサイズは100×160pxのものです。

 

タップ・タップホールド同様、イベント処理部分は各ページごと初期化後、
$(操作するオブジェクト).live( イベント名 , そのイベント内容);」のかたちで記述します。

今回のタッチイベントはスワイプなのでイベント名はswipeになります。
swipeは左右どちらからでもオッケーですが、swiperightは左から右へ、swipeleftは右から左へ指を滑らせる操作になります。

また、今回もCSS()を使ってCSSの操作をしてます。 画像はテキトーなものを用意して頂いて、css("background","url( 画像の置き場所) no-repeat" );のかたちで表示させてみてください。

で、$.mobile.changePage()は今までダイアログを表示させるときなどに使ってきたのでもう完全に慣れてると思いますが、
一応再度確認していきたいと思います。$.mobile.changePage()の記述方法と引数は下記の通りです。

$.mobile.changePage("移動ページid",{"切替効果",reverse,changeHash});

  • 第1引数:移動先のページid
  • 第2引数:ページの切替効果
  • 第3引数:切替える方向を逆に(戻る感じに)するかどうか(true:逆、false:逆にしない、デフォルトはfalse)
  • 第4引数:遷移前ページの履歴を保持するかどうか(true:履歴を残す、false:履歴を残さない、デフォルトはtrue)
  • 第2から第4引数までは{ }で囲むのを忘れないでください。

具体的にはtest6.jsファイル記述コードの18行目のように記述し、この場合「homeページへスライドして戻る(履歴を残す)」となります。 ちなみに10行目のように引数を全部記述しなくても大丈夫です。

 

 

ページ切替イベント

ページ切替イベントとは切替効果(transition)を使いつつページの切り替えが行われるときに発生するイベントです。
今回は「ボタンを押すとポップアップしてpage2に切替わりつつ、ヘッダーの色がシルバーから緑に変化」というイベント内容です。



画像10(最初)

画像11(切替り中)

画像12(切替り完了)

 

【HTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
								<script type="text/javascript" src="test6.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
							</head>
							<body>
								<!---home--------->
								<div id="home" data-role="page">
									<div id="h_home" data-role="header">
										<h1>テスト</h1>
									</div>
									<div data-role="content">
										<input type="button" id="btn1" value="ページ2へ">
									</div>
								</div>
								<!---page2-------->
								<div id="page2" data-role="page">
									<div id="h_page2" data-role="header">
										<h1>ページ2</h1>
									</div>
									<div data-role="content">
										<p>ページ2です</p>
									</div>
								</div>
							</body>
						</html>
					

 

【test6.jsファイルに記述するコード】

						//homeのイベント
						$("#home").live("pageinit",function(){
							//popでページ2へ切替える
							$("#btn1").live("tap",function(){
								$.mobile.changePage("#page2",{transition:"pop"});
							});
							//切替効果の実行直前
							$(this).live("pagebeforehide",function(){
								$("#h_home").css("background","#c0c0c0");
							});
						});

						//page2のイベント
						$("#page2").live("pageinit",function(){
							//切替効果の実行直前
							$(this).live("pagebeforeshow",function(){
								$("#h_page2").css("background","#c0c0c0");
							});
							//切替効果が完了
							$(this).live("pageshow",function(){
								$("#h_page2").css("background","#68c18c");
							});
						});
					

※作成したjavascript外部ファイル(test6.js)は、htmlファイルのhead内(jQueryとjQueryMobileの間)に読み込ませておいてください。

 

各ページ初期化後、いつも通りの
$(操作するオブジェクト).live( イベント名 , そのイベント内容);」のかたちで記述します。
今回はページ切替イベントになります。ページ切替効果を伴って切替が行われるときに発生するイベントで、 イベント名には下記のものが入ります。

  • pagebeforeshow:移動先ページ(page2)上で、ページ切替効果が実行される直前に発生。
  • pagebeforehide:移動前ページ(home)上で、ページ切替が実行される直前に発生。
  • pageshow:移動先ページ(page2)上で、ページ切替効果が完了後に発生。
  • pagehide:移動前ページ(home)上で、ページ切替が完了後に発生。

今回のイベントは、ページが切替わってる間はヘッダーがシルバー、切替わり完了後はヘッダーが緑色に変化という内容です。
発生の流れ的には、まずhome上でpagebeforehide(シルバー)、次にpage2上でpagebeforeshow(シルバー)、最後にpage2上でpageshow(緑色)という感じです。
いろいろ試してみて下さい。


 

 

端末回転イベント

端末回転イベントは、端末の向きを縦or横向きにした時に起こるイベントです。
今回は「端末を横向き・縦向きに回転するとそれぞれアラートが出る」というイベント内容です。



画像13(横向き)

画像14(縦向き)

 

【HTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
								<script type="text/javascript" src="test1.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
							</head>
							<body>
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>端末回転イベント</h1>
									</div>
									<div data-role="content">
										<p>端末を縦向きか横向きにしてください。</p>
									</div>
								</div>
							</body>
						</html>
					

 

【test1.jsファイルに記述するコード】

						$(document).ready(function(){
							$(window).bind("orientationchange",function(e){
							        if (e.orientation=="portrait"){
							            alert("縦向きにしましたね");
							        } else {
							            alert("横向きにしましたね");
							        }
							});
						});
					

※作成したjavascript外部ファイル(test1.js)は、htmlファイルのhead内(jQueryとjQueryMobileの間)に読み込ませておいてください。

 

タップ・スワイプなどのイベント処理ではボタンやページ内のある部分に対してlive()でイベントのバインドをしてきましたが、 今回は端末回転イベントとなるので、ウィンドウに対してバインドしていきます。

$(window).bind(イベント名,function(e){ 縦向きor横向きの時のイベント処理 });

端末回転イベントなのでイベント名はorientationchangeになります。
またjQueryMobileのいつものイベント処理の様にlive()でバインドするとうまくいきません。 なのでjQueryの時のように$(document).ready(function(){イベント処理})を使いつつ、$(window)に対してbind()でイベントのバインドを行います。

function(e){}のeはイベントオブジェクトで、イベントに関する情報が入ってます。
渡されたイベントオブジェクトの中のorientationプロパティで現在の向きを調べることができます。
縦向きの場合:portrait、横向きの場合:landscape」となるので、ifでそれぞれの場合のイベントを分けてください。