jQuery Mobile ページイベント

jQuery Mobile ページイベント

jQuery Mobileの中でページに関連するイベントは、4つのカテゴリに分類されます：

  • ページ初期化 - ページ作成前に、ページ作成時、およびページ初期化後に
  • ページロード/アンロード - 外部ページがロードされたり、アンロードされたり、エラーが発生した場合
  • ページ遷移 - ページ遷移の前後
  • ページ変更 - ページが変更されたり、エラーが発生した場合

すべてのjQuery Mobileイベントに関する詳細情報については、私たちの jQuery Mobile イベントリファレンスマニュアル。

jQuery Mobile Initialization イベント

jQuery Mobileの中で典型的なページが初期化される際には、3つの段階を経ています：

  • ページ作成前に
  • ページ作成
  • ページ初期化

各段階でトリガーされるイベントは、コードを挿入したり操作するために使用できます。

イベント 説明
pagebeforecreate ページが初期化される前に、jQuery Mobileがページを強化する前に、このイベントがトリガーされます。
pagecreate ページが作成されたが、強化が完了する前に、このイベントがトリガーされます。
pageinit ページが初期化され、jQuery Mobile がページの強化を完了した後に、このイベントがトリガーされます。

以下の例では、jQuery Mobile でページを作成する際に、どのタイミングでどのイベントがトリガーされるかを示しています：

例

$(document).on("pagebeforecreate",function(event){
  alert("pagebeforecreate イベントがトリガーされました！");
}); 
$(document).on("pagecreate",function(event){
  alert("pagecreate イベントがトリガーされました！");
});
$(document).on("pageinit",function(event){
  alert("pageinit イベントがトリガーされました！");
});

自分で試してみる

jQuery Mobile ロードイベント

ページロードイベントは外部ページに属しています。

外部ページが DOM にいつでも読み込まれると、二つのイベントがトリガーされます。最初は pagebeforeload、次に pageload（成功）または pageloadfailed（失敗）です。

以下のテーブルでは、これらのイベントを説明しています：

イベント 説明
pagebeforeload ページのロードリクエストがなされる前にトリガーされます。
pageload ページが成功してロードされ DOM に挿入された後にトリガーされます。
pageloadfailed ページのロードリクエストが失敗すると、このイベントがトリガーされます。デフォルトでは、「Error Loading Page」メッセージが表示されます。

以下は、pageload と pageloadfailed イベントの動作原理のデモです：

例

$(document).on("pageload",function(event,data){
  alert("pageload イベントがトリガーされました！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("申し訳ありません、リクエストされたページは存在しません。");
});

自分で試してみる

jQuery Mobile 遷移イベント

また、一つのページから次のページへの遷移時にもイベントを使用できます。

ページ遷移は、二つのページに関与しています：一つの「来る」ページと一つの「行く」ページ - これらの遷移は、現在アクティブなページ（「来る」ページ）から新しいページ（「行く」ページ）への変更プロセスをよりダイナミックにします。

イベント 説明
pagebeforeshow 「行く」ページでトリガーされ、遷移アニメーションの前に。
pageshow 「行く」ページでトリガーされ、遷移アニメーションが完了した後に。
pagebeforehide 「来る」ページでトリガーされ、遷移アニメーションの前に。
pagehide 「来る」ページでトリガーされ、遷移アニメーションが完了した後に。

以下は、遷移時間の動作原理のデモです：

例

$(document).on("pagebeforeshow","#pagetwo",function(){ // ページ二に入るとき
  alert("ページ二が表示されます");
});
$(document).on("pageshow","#pagetwo",function(){ // ページ二に入るとき
  alert("ページ二が表示されています");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // ページ二から離れるとき
  alert("ページ二が非表示になる前です");
});
$(document).on("pagehide","#pagetwo",function(){ // ページ二から離れるとき
  alert("ページ二が非表示になります");
});

自分で試してみる