jqMobi 1.0のはじめかた（jqUIイベント編）

jqUIのイベント関連を見てみる。

ページ読み込みイベント

$.ui.ready

jQuery Mobileだと初期ページのpageinitあたりに該当するか。
(普通のDOM構築完了のほうはjqMobiの$.readyを使えばよい。)
違うのは、このイベントの発行をユーザ自身が決められるということ。

$.ui.autoLaunch

準備完了かを自動で処理するかどうかのフラグ。デフォルトtrue。
falseにしておくと$.ui.launch()を呼ぶまで$.ui.readyを呼ばない。初期処理とかそのへんに使うんだと思う。
サンブルではスプラッシュスクリーンとか出したりしてる。

$.ui.launch()

「初期処理終わったんで、$.ui.readyに処理移しちゃってくださいな」メソッド。

panel単位のイベント

jQuery Mobileみたいなpageshow/pagehideとかのイベントあるんだろうなー、と思ったけどない。イベントではなく、

<div class="panel" data-load="load" data-unload="unload">
hello!
</div>

といったように、data-load/data-unload属性に関数名を文字列で指定してあげる必要がある。

( ﾟдﾟ)ﾎﾟｶｰﾝ

文字列指定とかダサいのでイベントで処理したい

まぁ、これはきっと中の人の意地悪で、必要な人は自分でイベント投げろや、ってことだと思うことにする。

具体的にどうするか。

var panelLoad = function(panel) {
  console.log('show');
  console.log(panel);
  setTimeout(function() {
    $(panel).trigger('load');
  }, 0);
};
var panelUnload = function(panel) {
  console.log('hide');
  console.log(panel);
  setTimeout(function() {
    $(panel).trigger('unload');
  }, 0);
};
$.ui.ready(function() {
  $('.panel')
    .data('load', "panelLoad")
    .data('unload', "panelUnload");
});

とかしておけば、

$('#jQUi')
  .delegate('#foo', 'load', function() {
    console.log('#foo load');
  })
  .delegate('#bar', 'unload', function() {
    console.log('#bar unload');
  });

みたいにかけるね。ε-(´∀｀*)ﾎｯ

ちなみに、jQ.Mobiにはbind/delegate/onはあるがliveがない。なんぞ。