jQuery Mobileのイベント処理 (6/6)
作成:2011-06-13 07:54
更新:2012-03-29 10:25
更新:2012-03-29 10:25
■ページ移動に関するイベント
jQuery Mobileでは、１つのHTML内に「ページ」と呼ばれる複数のタグを用意し、これらを切り替えて表示させるというインターフェイスを採用しています。通常の（別のページにジャンプする）ページの切り替えと異なり、jQuery Mobileのページ切り替えは、実際にはWebページの移動などを伴わないため、非常にシームレスになめらかな移動が可能となります。
が、これは裏をかえせば、「ページの移動の際に、何も新たに表示や処理などを設定することがない」ということでもあります。例えば「ページを表示する際にこれこれの処理を実行させよう」という場合は、たとえば<body>タグのonloadや、$(document).readyなどを使って初期化処理を組み込むことができます。が、こうしたものは、ページの切替時には呼び出されません。「jQuery Mobileのページを移動するときに何らかの処理を行う」場合には、別のやり方を考える必要があります。
こうした用途のために、jQuery Mobileには「ページ移動」に関するイベントが用意されています。以下のようなものです。
pagebeforeshow――ページが表示される前に発生するイベント。そのページへの移動を開始する直前に発生する
pagebeforehide――ページが非表示にされる前に発生するイベント。そのページから他のページに移動しようとする直前に発生する
pageshow――ページが表示されたときに発生するイベント。そのページへの移動が完了してから発生する
pagehide――ページが非表示にされるときに発生するイベント。そのページから他のページに移動完了してから発生する
非常に面白いのは、ページ移動をする際、移動の「前」と「後」にそれぞれイベントが用意されている、という点でしょう。jQuery Mobileのページ移動は、常に視覚効果を伴って行われます。つまり「移動には一定の時間がかかる」のです。ですから、「移動の視覚効果が表示される前か後か」は非常に重要です。
では、簡単な利用例を以下にあげておきます。２つのページを用意し、ボタンで移動をすると、移動中だけページの背景が暗く変わります。ここでは、２つのページの<div>タグに、それぞれpageshowとpagebeforehideの２つのイベントをバインドしています。そして、pagebeforehideでページ移動の直前に背景の色を暗くし、pageshowでページ移動が完了したところで明るく戻しています。背景色の変更は、jQueryのcssメソッドを用いています。
――以上、jQuery Mobile特有のイベントについて説明を行いました。スマートフォンらしいイベントがひと通り揃っていますが、これらはほとんどがスマートフォン以外の環境でもちゃんと機能します。基本的な使い方をしっかり覚えておけば、いろいろと応用がききそうですね！
が、これは裏をかえせば、「ページの移動の際に、何も新たに表示や処理などを設定することがない」ということでもあります。例えば「ページを表示する際にこれこれの処理を実行させよう」という場合は、たとえば<body>タグのonloadや、$(document).readyなどを使って初期化処理を組み込むことができます。が、こうしたものは、ページの切替時には呼び出されません。「jQuery Mobileのページを移動するときに何らかの処理を行う」場合には、別のやり方を考える必要があります。
こうした用途のために、jQuery Mobileには「ページ移動」に関するイベントが用意されています。以下のようなものです。
pagebeforeshow――ページが表示される前に発生するイベント。そのページへの移動を開始する直前に発生する
pagebeforehide――ページが非表示にされる前に発生するイベント。そのページから他のページに移動しようとする直前に発生する
pageshow――ページが表示されたときに発生するイベント。そのページへの移動が完了してから発生する
pagehide――ページが非表示にされるときに発生するイベント。そのページから他のページに移動完了してから発生する
非常に面白いのは、ページ移動をする際、移動の「前」と「後」にそれぞれイベントが用意されている、という点でしょう。jQuery Mobileのページ移動は、常に視覚効果を伴って行われます。つまり「移動には一定の時間がかかる」のです。ですから、「移動の視覚効果が表示される前か後か」は非常に重要です。
では、簡単な利用例を以下にあげておきます。２つのページを用意し、ボタンで移動をすると、移動中だけページの背景が暗く変わります。ここでは、２つのページの<div>タグに、それぞれpageshowとpagebeforehideの２つのイベントをバインドしています。そして、pagebeforehideでページ移動の直前に背景の色を暗くし、pageshowでページ移動が完了したところで明るく戻しています。背景色の変更は、jQueryのcssメソッドを用いています。
$('#home').css("background","#999");
$('#next').css("background","#999");このような感じですね。cssメソッドは、第１引数にスタイルシートのプロパティ名を、第２引数に値を指定して呼び出すことで、特定のプロパティを変更できます。――以上、jQuery Mobile特有のイベントについて説明を行いました。スマートフォンらしいイベントがひと通り揃っていますが、これらはほとんどがスマートフォン以外の環境でもちゃんと機能します。基本的な使い方をしっかり覚えておけば、いろいろと応用がききそうですね！
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<title>Sample</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$('#home').live('pagecreate',function(){
$('#btn1').live('tap',doAction);
$('#home').live('pageshow',doStop);
$('#home').live('pagebeforehide',doStart);
$('#next').live('pageshow',doStop);
$('#next').live('pagebeforehide',doStart);
});
function doAction(){
$.mobile.changePage('#next','slide',false,true);
}
function doStart(){
$('#home').css("background","#999");
$('#next').css("background","#999");
}
function doStop(){
$('#home').css("background","#ddd");
$('#next').css("background","#ddd");
}
</script>
</head>
<body>
<!-- home page -->
<div id="home" data-role="page">
<div data-role="header">
<h1>Hello</h1>
</div>
<div data-role="content">
<p id="msg">※サンプル。</p>
<div data-role="fieldcontain">
<input type="button" name="btn1" id="btn1" value="Click" />
</div>
</div>
</div>
<!-- next page -->
<div id="next" data-role="page">
<div data-role="header">
<a data-role="button" href="#home" data-rel="back">Back</a>
<h1>Hello</h1>
</div>
<div data-role="content">
<p id="msg">※次のページ</p>
</div>
</div>
</body>
</html>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る