jQuery Mobileで提供されているページ系イベントについてのまとメモ
Posted: Updated:
jQuery Mobileで設定できるイベントについて
jQuery Mobileではモバイル端末向けに色々なイベントが追加されています．
tap, taphold, swipe, swipleft, swiprightなどのイベントもありますが，今回はjQuery Mobileのページが切り替わったり読み込まれたりするときに配信されるページ系イベントについて紹介します．
いま気がつきましたけど、swipleftとswiperightはiOSらしいおお振りなジェスチャに対応したインタラクションを作れそうでいいですね。
bindするとき
こんな感じで，各イベントの動作をbindします．基本的には、documentに直接bindして、event.targetから絞り込めばいいかなと思っています。
$(document).bind('イベント名', function(event)
{
// event.targetでコンテキストを指定しないと，
// 現在のドキュメント全体に適用することになるので注意
$('.anyClass', event.target).each(function()
{
// 例えばeachしたり適当に
});
});
イベントのタイミングを間違えなければ、イベントごとの処理が軽くない程度にあったとしても、トランジションのエフェクトがかかってる時間があるので、ある程度は感覚時間で吸収してくれると思います。
各ページ系イベント
イメージ的なタイミングと，使い所みたいなのを含めて，簡単に説明してみます．巻末付録にpagehideイベントを題材にサンプルスクリプトも載せています．
pagebeforecreate
タイミング : 新しいHTMLページがAjaxで読み込まれた際，pageを解析して，クラスを振ったりスタイルを調整し始める前の状態への割り込み．
備考 : jQuery Mobileは要素のサイズ計測とかも行って，レイアウトを作るので，プレーンなHTMLに対して割り込み操作を行いたい場合は，このタイミング．
pagecreate
タイミング : 新しいページが読み込まれた際，jQueryMobile側でpageが解析されて，一通りの初期化が終わったとき．
備考 : 初期化済みなので，ui-*系のクラスが振られたりして，jQueryMobileらしいUIがすっかり出来あがったタイミングです．jQuery Mobileの角丸を無効化するスニペットの場合は，ちょうどココです．
ここから以下、showやhideのイベントは、createのように1ページにつき1回ポッキリの処理ではなく、表示・非表示につき毎回呼び出される処理になります。
pagebeforeshow
タイミング : ページの切り替わりのエフェクトが始まる直前．
備考 : event.targetには，これから表示されるpageが渡されます．urHistoryのactiveや prevは切り替わっていません。
pagebeforehide
タイミング : ページの切り替わりのエフェクトが始まる直前．
備考 : event.targetには，これから表示されなくなるpageが渡されます．urlHistoryのactiveやprevは切り替わっていません。
pageshow
タイミング : 切り替わりのエフェクトが終わって、表示されきったとき．
備考 : pageが完全に表示された後のイベントです．たとえば、GoogleMapsを表示するときは，このタイミングでないと表示がズレてしまったりします．どうにも先行してpagebeforeshowでやるとダメっぽい(?) この時点でurlHistoryのactiveは、showされたページに変わっています。
pagehide
タイミング : 切り替わりのエフェクトが終わって，隠れきったとき．
備考 : pageが完全に非表示になったときのイベントです．下の例にあるような、隠した直後のページについて後始末的な処理をかけるのに向いていると思います。この時点でurlHistoryのprevは、hideされたページに変わっています。
サンプル：戻るボタンを押したときの，ガコッとしたスクロールを抑制
追記．jQuery Mobile Beta1でこの挙動は改善されているため，これは古いノウハウとなりました．
$(document).bind('pagehide', function(e)
{
var prev = $.mobile.urlHistory.getPrev();
if ( prev && prev.page ) {
prev.page.jqmRemoveData('lastScroll');
}
});
ページが隠れて，urlHistoryのgetPrevで参照できるpageが完全に移り変わってから，jqmRemoveDataで，lastScrollを除去します．こうすると，戻るボタンを押したときに，"前のページの最後のY座標に自動で移動する動き"を抑止できます．
今後jQM本体なり端末スペックが改善されて，ユーザー体験に影響を及ぼさないレベルで動作してくれたら，こんな処理はいらないと思いますけど．
この自動スクロール，たしかsilentScrollというメソッドで実装されているはずですが，現時点ではページが表示されてからsilentScrollが実行される間に，間があるので「ガコッ」と動く印象がぬぐえません．
