jQuery Mobile逆引きリファレンス
ページのロード／切り替え時に初期化／後処理を実行するには？
ページを表示／切り替えするタイミングで発生するイベントにはどのようなものがあるのか。ページイベントの基本的な利用方法を説明する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前の通り、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
jQuery Mobileでは、ページを表示／切り替えするタイミングで、以下のようなイベントを発生します。ページの初期化処理／後処理を実装する際には、これらのページイベントを利用してください。
| イベント | 概要 |
|---|---|
| pagecontainerbeforechange | ページの移動前 |
| pagecontainerbeforeload | ページのロード前 |
| pagebeforecreate | 初期化処理の直前 |
| pagecreate | 初期化処理の直後 |
| pagecontainerload | ページのロード後 |
| pagecontainerbeforehide | 前のページを非表示にする前 |
| pagecontainerbeforeshow | 新しいページを表示する前 |
| pagecontainerremove | 前のページがDOMツリーから削除された後 |
| pagecontainerhide | 前のページを非表示にした後 |
| pagecontainershow | 新しいページを表示した後 |
| pagecontainerchange | ページの切り替え完了後 |
| pagecontainerloadfailed | ページの取得に失敗したとき |
| pagecontainerchangefailed | 切り替え先のページ取得に失敗したとき |
- *1 jQuery Mobile 1.3以前ではpagebeforechange（containerなし）などのイベントが用意されていましたが、1.4以降では非推奨となり、1.6では削除される予定です。新たな開発では利用しないようにしてください。
ちなみに、jQueryでよく利用していたreadyイベントは、jQuery Mobileではあまり利用することはありません。別稿でも触れたように、jQuery Mobileではページ遷移をAjax経由で行います。このため、ページ遷移のタイミングではページの読み込み終了を表すreadyイベントは発生しないのです（＝最初のページ読み込みでのみreadyイベントが発生します）。
jQuery Mobileでページロード時の初期化を行うならば、pagecreateイベントを利用してください。
ページイベントの基本
ページイベントは、以下のようにdocumentオブジェクトに対してバインドします。これによって、以降、新たなページに遷移しても、これを認識できるからです。
［構文］ページイベント
……ページイベントでの任意の処理……
})
以下は、それぞれのページイベントが発生したタイミングで、ログを出力する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
<script>
// ページイベントを登録
$(document).on('pagecontainerbeforechange', function(e, d){
console.log('pagecontainerbeforechange');
});
$(document).on('pagecontainerbeforeload', function(e, d){
console.log('pagecontainerbeforeload');
});
……中略……
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<a href="page1.html" class="ui-btn">別ページへ</a>
<a href="page_nothing.html" class="ui-btn">存在しないページへ</a>
</div>
<div id="result"></div>
<div data-role="footer">
Copyright 1998-2014, YAMADA.Yoshihiro
</div>
</div>
</body>
</html>
|
それぞれのイベントの発生順を以下にまとめます。
データオブジェクトのプロパティ
ページイベントに対応するイベントリスナーでは、第2引数としてデータオブジェクトを受け取ります（先ほどの構文ではdで表しています）。ページイベントでは、このデータオブジェクトを介して、新旧のページ情報、遷移に際して利用された（される）XMLHttpRequestオブジェクトなどにアクセスできます。以下に、データオブジェクトの主なプロパティをまとめます。
| イベント | プロパティ | 概要 |
|---|---|---|
| pagecontainerbeforechange | toPage | 遷移先のURL、ページのjQueryオブジェクト |
| prevPage | 遷移前のページのjQueryオブジェクト | |
| options | changeメソッドに渡したオプション | |
| pagecontainerbeforeload | url | 遷移先のURL |
| absUrl | 遷移先の絶対URL | |
| dataUrl | 遷移先のURLのパス部分 | |
| toPage | 遷移先のURL文字列 | |
| prevPage | 遷移前のページのjQueryオブジェクト | |
| deferred | Defferedオブジェクト | |
| options | loadメソッドに渡したオプション | |
| pagebeforecreate | － | － |
| pagecreate | － | － |
| pagecontainerload | url | 遷移先のURL |
| absUrl | 遷移先の絶対URL | |
| dataUrl | 遷移先のURLのパス部分 | |
| options | loadメソッドへ渡したオプション | |
| xhr | ページのロード時に使ったXMLHttpRequestオブジェクト | |
| textStatus | ステータス | |
| toPage | 遷移先のページのjQueryオブジェクト | |
| prevPage | 遷移前のページのjQueryオブジェクト | |
| pagecontainerbeforehide | nextPage | 遷移後のページのjQueryオブジェクト |
| toPage | 遷移先のページのjQueryオブジェクト | |
| prevPage | 遷移前のページのjQueryオブジェクト | |
| pagecontainerbeforeshow | prevPage | 遷移前のページのjQueryオブジェクト |
| toPage | 遷移先のページのjQueryオブジェクト | |
| pagecontainerremove | toPage | 遷移先のページのjQueryオブジェクト |
| prevPage | 削除されるページ | |
| pagecontainerhide | nextPage | 遷移後のページのjQueryオブジェクト |
| toPage | 遷移先のページのjQueryオブジェクト | |
| prevPage | 遷移前のページのjQueryオブジェクト | |
| pagecontainershow | toPage | 遷移先のページのjQueryオブジェクト |
| prevPage | 遷移前のページのjQueryオブジェクト | |
| pagecontainerchange | toPage | 遷移先のページのjQueryオブジェクト |
| prevPage | 遷移前のページのjQueryオブジェクト | |
| pagecontainerloadfailed | url | 遷移先のURL |
| absUrl | 遷移先の絶対URL | |
| dataUrl | 遷移先のURLのパス部分 | |
| toPage | 遷移先のページのjQueryオブジェクト | |
| prevPage | 遷移前のページのjQueryオブジェクト | |
| deffered | Defferedオブジェクト | |
| options | loadメソッドへ渡したオプション | |
| xhr | ページのロード時に使ったXMLHttpRequestオブジェクト | |
| textStatus | ステータス | |
| errorThrown | エラー情報 | |
| pagecontainerchangefailed | toPage | 遷移先のページのjQueryオブジェクト |
| option | changeメソッドへ渡したオプション | |
| prevPage | 遷移前のページのjQueryオブジェクト |
特定のページでイベントを捕捉する
特定のページでのみページイベントを捕捉するならば、以下のような構文を利用します。onメソッドの第2引数にページ要素のid値を指定します。
［構文］ページイベント（特定のページ）
……ページイベントでの任意の処理……
})
例えば以下は、page1.html（「id="page1"」のページ要素）を読み込んだタイミングでのみ、ダイアログを表示する例です。
|
$(document).on('pagecreate', '#page1', function() {
window.alert('ページpage1がロードされました。');
});
|
あるいは、以下のようにイベントオブジェクトのtargetプロパティでターゲット要素（＝イベントの発生元）を取得して、そのid値でもって処理を分岐しても構いません。
|
$(document).on('pagecreate', function(e, d) {
if (e.target.id === 'page1') {
window.alert('ページpage1がロードされました。');
}
});
|
※以下では、本稿の前後を合わせて5回分（第33回～第37回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
34. JavaScriptからjQuery Mobileページ間の移動を制御するには？
通常のページ遷移ではlocation.hrefプロパティを利用するが、jQuery Mobileのページ遷移ではchangeメソッドやloadメソッドを利用する。その基本的な使い方を説明する。
35. 【現在、表示中】≫ ページのロード／切り替え時に初期化／後処理を実行するには？
ページを表示／切り替えするタイミングで発生するイベントにはどのようなものがあるのか。ページイベントの基本的な利用方法を説明する。
37. data-defaults／data-enhanced属性でページの描画を高速化するには？
jQuery Mobileでパフォーマンスを改善する方法を解説。ウィジェットの動作パラメーターをデフォルト設定して解釈処理をスキップする方法と、文書ツリーの一部を手書きして自動生成をスキップする方法について紹介する。
