jQueryのモバイルページイベント
jQueryのモバイルのページを処理するためのイベントは、4つのカテゴリに分類されます。
- ページの初期化 - ページ作成前に、ページが作成されたとき
- ページのロード/アンロード - 外部ページには、ロードアンロードや故障が発生したされています
- ページ遷移 - 前と後のページ遷移
- ページがへたりから変更されている、または障害が発生した - ページの変更
すべてのjQueryモバイルのイベントの完全なリファレンスについては、当社をご覧くださいjQueryのモバイルイベントのリファレンス 。
jQueryのモバイル初期化イベント
jQueryのモバイルにおける典型的なページが初期化されるとき、それは2つの段階を通過します。
- ページ作成の前に
- ページ作成
各ステージの前又は場合jQueryのモバイルページを向上させるコードを挿入または操作するために使用することができるイベントを有しています。
| イベント | 説明 |
|---|---|
| pagebeforecreate | ページが初期化されようとしているときにトリガ、とjQuery Mobileはページを高める開始する前に |
| pagecreate | ページが作成されたときにトリガーが、増強が完了する前に |
以下の例では、ページがjQueryのモバイルで作成されたときに、各イベントの発生を示しています。
例
$(document).on("pagebeforecreate",function(event){
alert("pagebeforecreate event fired!");
});
$(document).on("pagecreate",function(event){
alert("pagecreate event fired!");
}); »それを自分で試してみてください jQueryのモバイル・ロード・イベント
ページロードイベントは、外部のページのためのものです。
外部ページがDOMにロードされるたびに、2つのイベントが発火します。 最初はpagecontainerbeforeloadであり、第二は、（成功）pagecontainerloadまたは（失敗）pagecontainerloadfailedされます。
これらのイベントは、以下の表で説明されています：
| イベント | 説明 |
|---|---|
| pagecontainerbeforeload | 任意のページのロード要求が行われる前にトリガ |
| pagecontainerload | ページが正常にDOMにロードされ、挿入された後にトリガ |
| pagecontainerloadfailed | ページのロード要求が失敗した場合にトリガされます。 デフォルトでは、「エラー読み込み中ページ "というメッセージが表示されます |
次の例では、pagecontainerloadとpagecontainerloadfailedイベントがどのように動作するかを示しています。
例
$(document).on("pagecontainerload",function(event,data){
alert("pageload
event fired!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
alert("Sorry, requested page does not exist.");
}); »それを自分で試してみてください jQueryのモバイル遷移イベント
我々はまた、我々は1ページから次へと移行したときのイベントを使用することができます。
-これらの遷移は、現在アクティブなページからの変化アニメーション化"から"ページと"へ"ページ：ページ遷移は、2つのページ伴う(fromPage)新しいページへ(toPage) 。
| イベント | 説明 |
|---|---|
| pagebeforeshow | トランジションアニメーションが始まる前に、「 へ 」のページでトリガ |
| pageshow | トランジションアニメーションが完了した後、「 へ 」のページでトリガ |
| pagebeforehide | トランジションアニメーションの開始前に、「 から 」ページでトリガ |
| pagehide | トランジションアニメーションが完了した後、「 から 」ページでトリガ |
以下の例は、遷移イベントがどのように動作するかを示しています。
例
$(document).on("pagebeforeshow","#pagetwo",function(){ // When entering
pagetwo
alert("pagetwo is about to be shown");
});
$(document).on("pageshow","#pagetwo",function(){
// When entering pagetwo
alert("pagetwo is now shown");
});
$(document).on("pagebeforehide","#pagetwo",function(){
// When leaving pagetwo
alert("pagetwo is about to be hidden");
});
$(document).on("pagehide","#pagetwo",function(){
// When leaving pagetwo
alert("pagetwo is now hidden");
}); »それを自分で試してみてください