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がない。なんぞ。