画面遷移イベント
script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">pagebeforechange
画面遷移が呼び出される前に呼び出されるイベント
$(document).on("pagebeforechange",function(e, data){
//イベント処理
});
dataは、
options
toPage属性をもつ
optionsは、画面遷移のオプション
toPageには、遷移先の画面のURL、もしくはDOMが入る
pagebeforeload
HTMLの読み込みがはじまる前に呼び出されるイベント
このイベント発生後、次の遷移する画面のDOMがAjaxにより読み込まれる
読み込まれるDOMは
<div data-role="page"> </div>
で指定された要素の中になる
jQueryMobileの場合、この中がページとして扱うため、ふつうのHTMLとは異なることに注意する
使い方は
$(document).on("pagebeforeload","#main",function(e, data){
//イベント処理
});
dataにふくまれる情報はかなり多く
絶対URL
ホスト内のURL
遷移元画面のDOM
遷移先画面のDOM
などがふくまれる
pagebeforecreate
DOMのロード完了時に呼ばれるイベント
この状態のDOMは
jQueryMobileで画面部分が初期化される前なので
pagebeforecreateで追加されたDOMは
jQueryMobileのスタイルが適用される
このため、
jQueryMobileのスタイルを適用する静的なDOM追加に使うことになる
<div data-role="page" id="main"> <div data-role="content"> <div id="box"></div> </div> </div>
へ
$(document).on("pagebeforecreate","#main",function(e,data){
$(#box).append("<button>ボタン追加</button>");
});
とすれば、
<div id="box"></div>
へボタンが追加される
pagecreate
pagebeforecreateイベントとほぼ同じ
違いは、beforeじゃないから
body要素へスタイルが適用された後になること
通常は
pagebeforecreateを使う
使い方は
$(document).on("pagecreate","#main",function(e){
//イベント処理
});
script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
pageinit
jQueryMobileでスタイルが適用された後に呼び出される
このタイミングでDOMはjQueryMobileにより変換される
注意点として、pageinitイベント以降に
DOMに要素を追加しても
jQueryMobileのスタイルが適用されないということ
つまり、pageinitイベントの中で要素を追加しても
jQueryMobileのボタンではなく
HTMLだけで作成したボタンになってしまう
$(document).on("pageinit","#main",function(e){
$("#box").append("<button>追加ボタン</button>");
});
これだと、ただのHTMLのボタンになる
このため、jQuerymobileのスタイルを適用するには
追加下要素へ対して
trigger(“create”)
を実行する
$(document).on("pageinit","#main",function(e){
$("#box").append("<button>追加ボタン</button>");
$(#box).trigger("create");
});
とする
pageinitイベント以後に要素を追加したときには
trigger(“create”)
を忘れないこと
また、
日付コンポーネント
jQueryMobile Validation
など、サードパーティーコンポーネントの初期化はここで行うことになる