jQuery Mobile ページイベントの種類・発生タイミングと利用例
公開日：2014年10月26日
最終更新日：2014年11月9日
ページロード時や遷移時に発生するページイベントは、jQuery Mobile のイベントの中で最も重要です。種類も多くバージョンによって頻繁に仕様が変わるので理解するのがたいへんですが、現時点での種類と発生タイミングを整理してみます。
«次の特集記事» jQuery Mobile サイト全体の動作を規定するグローバル設定
«前の特集記事» jQuery Mobile イベントの概要とイベントリスト
【コンテンツ】
【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5
ページイベントの概要
ページを最初にロードしたときやページ遷移のときに、何か独自の処理を組み込みたいということがあります。そのために jQuery Mobile ではいくつかのページイベントを用意しています。
ページイベントを利用すると、サイト全体に共通の処理を加えることもできますし、特定のページだけを対象にすることもできます。
ただページイベントは種類も多いので、処理内容によって適切に使い分ける必要があります。
前回の記事でも触れたように、ページ初期化処理は ウィジェットの初期化が完了しページがDOMに生成されたときに発生する pagecreateイベントを基本として使います。そして思うような結果にならない場合に他のイベントの利用を考えます。そのために各イベントの発生する順番とタイミングを把握しておいてください。
共通処理の記述方法
サイト全体に共通の処理を追加する場合は、documentオブジェクトに対してonメソッドを適用し以下のように記述します。bind, live, delegateメソッドはすべて onメソッドに統一されましたので、今後は onメソッドを使うようにしましょう。
|
1 2 3 |
$(document).on("pagecreate", function(event, ui) { // 処理を記述 }); |
コールバック関数の第１引数はeventオブジェクトで、第２引数は uiオブジェクトです。
それらのオブジェクトを介してページURLやオプションなどを参照することができます。
どのようなプロパティが利用できるかは、
API Documentation の「Page Widget」と「Pagecontainer Widget」に記載されています。
個別処理の記述方法
特定のページだけに処理を適用したい場合は、onメソッドの第２引数にページ要素のidを指定します。
ただしこの構文がうまく動作しないイベントもありますので、その場合は処理内で要素を特定し条件分岐させるとよいでしょう。
|
1 2 3 |
$(document).on("pagecreate", "#page-id", function(event, ui) { // 処理を記述 }); |
非推奨になったイベントと今後利用が望ましいイベント
ページイベントはバージョン1.4で多くのものが非推奨になっています。
以下の表はこれまでのイベントと今後利用が望ましいイベントを発生順に並べたものです。
※はバージョン1.4で非推奨 ※pagebeforechange/pagecontainerbeforechangeは2回発生
| 発生タイミング | これまでのイベント | 今後利用が望ましいイベント |
|---|---|---|
| ページ変更前 | pagebeforechange※ | pagecontainerbeforechange |
| ページロード前 | pagebeforeload※ | pagecontainerbeforeload |
| ページロード完了後 | pageload※ | pagecontainerload |
| ページ初期化前 | pagebeforecreate | pagebeforecreate |
| ページ初期化後 | pagecreate | pagecreate |
| ページ初期化完了後 | pageinit※ | ‐ |
| ページ初期化完了後 | pagebeforechange※※ | pagecontainerbeforechange※ |
| 前ページの非表示前 | pagebeforehide※ | pagecontainerbeforehide |
| 次ページの表示前 | pagebeforeshow※ | pagecontainerbeforeshow |
| DOMから前ページの削除後 | pageremove※ | pagecontainerremove |
| 前ページの非表示後 | pagehide※ | pagecontainerhide |
| 次ページの表示後 | pageshow※ | pagecontainershow |
| ページ変更後 | pagechange※ | pagecontainerchange |
| ページロード失敗時 | pageloadfailed※ | pagecontainerloadfailed |
| ページ変更失敗時 | pagechangefailed※ | pagecontainerchangefailed |
ページロード時/遷移時/リターン時/エラー時でのイベント発生順序
初期のページロード時、ページ遷移時、遷移先からのリターン時、エラー時でそれぞれどのイベントが発生するか異なります。厳密に言えば、１ファイルに複数ページを記述した場合やキャッシュを有効にしている場合など条件によっても異なります。
以下は最初にメインのページをロードし、別のHTMLファイルのページに遷移する際に発生するイベントを示した表です。今後利用が望ましいイベントを発生順に並べています。
| イベント | ページ初期 ロード時 |
ページ 遷移時 |
遷移先から リターン |
エラー 発生時 |
|---|---|---|---|---|
| pagecontainerbeforechange | ○ | ○ | ○ | ○ |
| pagecontainerbeforeload | ○ | ○ | ||
| pagecontainerload | ○ | |||
| pagebeforecreate | ○ | ○ | ||
| pagecreate | ○ | ○ | ||
| pagecontainerbeforechange | ○ | ○ | ||
| pagecontainerbeforehide | ○ | ○ | ||
| pagecontainerbeforeshow | ○ | ○ | ○ | |
| pagecontainerremove | △ | △ | ||
| pagecontainerhide | ○ | ○ | ||
| pagecontainershow | ○ | ○ | ○ | |
| pagecontainerchange | ○ | ○ | ○ | |
| pagecontainerloadfailed | ○ | |||
| pagecontainerchangefailed | ○ |
ページイベントを利用した処理の記述例
どのタイミングでイベントが発生するか確認する
pagecontainerload, pagebeforecreate, pagecontainerbeforehide, pagecontainerchange ４つのイベントが、どういうケースでどのタイミングで発生するか確認するコードです。
初期ロード時、ページ遷移時、リターン時でそれぞれ発生するイベントが違います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery Mobile Tips</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script> $(document).on("pagecontainerload", function(e,d){ alert("pagecontainerload - ページロード完了後 - ページ遷移で発生"); }); $(document).on("pagebeforecreate", function(e,d){ alert("pagebeforecreate - ページ初期化前 - ページロード/ページ遷移で発生"); }); $(document).on("pagecontainerbeforehide", function(e,d){ alert("pagecontainerbeforehide - 前ページの非表示前 - ページ遷移/リターンで発生"); }); $(document).on("pagecontainerchange", function(e,d){ alert("pagecontainerchange - ページ変更後 - ページロード/ページ遷移/リターンで発生"); }); </script> <style type="text/css"> .ui-header .ui-title { margin: 0 10px; } .ui-footer { font-size: 13px; text-align: center; } </style> </head> <body> <div data-role="page" id="main"> <div data-role="header"> <h1>DEMOページ メイン</h1> </div> <div role="main" class="ui-content"> <p><a href="demo34-3b.html">サブページへ遷移 »</a></p> </div> <div data-role="footer"> <p>© 2014 Web Tips アーカイブ</p> </div> </div> </body> </html> |
ウィジェットにデータ属性を追加する
ヘッダーとフッターに「data-theme="b"」を追加してみます。
ウィジェットに反映させたいので、pagebeforecreateイベントのタイミングで処理を行います。フレームワークはこの後でウィジェットに対してさまざまな属性やクラスを付加します。
|
1 2 3 4 5 6 |
<script> $(document).on("pagebeforecreate", function() { $('div[data-role="header"]').attr('data-theme', 'b'); $('div[data-role="footer"]').attr('data-theme', 'b'); }); </script> |
ウィジェットのオプションを変更する
上記のヘッダーとフッターのテーマを "b" にしたのは、ツールバーの themeオプションを変更することでも実現できます。
その場合は、pagecreateイベントのタイミングで以下の処理を記述します。
|
1 2 3 |
$(document).on("pagecreate", function() { $('div[data-role="header"], div[data-role="footer"]').toolbar({ theme: "b" }); }); |
ページイベントはバージョン1.4になって多くのものが非推奨になりました。プログラミングが必要なところはただでさえ動作がシビアで分かりづらいのに、利用者は混乱してしまいますね。次のバージョンではFIXすることを望みます。
«次の特集記事» jQuery Mobile サイト全体の動作を規定するグローバル設定
«前の特集記事» jQuery Mobile イベントの概要とイベントリスト
スポンサーリンク
