2008年7月23日水曜日

Facebox: facebook風のモーダルダイアログを簡単に導入できるjQueryプラグイン


Facebox
(http://famspam.com/facebox)

ダイアログ系のプラグインはたくさんありますが、これはfacebook風の角丸デザインでかわいらしい感じです。

jQuery:bind/triggerの使い方メモ

こういうモーダルダイアログというのは、ダイアログが開いている間はダイアログの周りの部分にオーバーレイがかけられて、その部分を操作することができなくなります。
「close」「閉じる」ボタンを押したり、オーバーレイの部分をクリックするとダイアログが閉じてオーバーレイも消えるようになっているのが普通です。
このFaceboxではその「閉じる」処理をどうやっているのか気になったので、ソースをちょっと見てみました。

基本的に「閉じる」処理を行う時は、document に登録されている close.facebox というイベントをtriggerで実行しているようです。

$(document).trigger('close.facebox')

例: オーバーレを表示する関数。オーバーレイの要素をクリックすると close.faceboxイベントを実行するようにclickイベントを登録しています。
function showOverlay() {
if (skipOverlay()) return

if ($('facebox_overlay').length == 0)
$("body").append('<div id="facebox_overlay" class="facebox_hide"></div>')

$('#facebox_overlay').hide().addClass("facebox_overlayBG")
.css('opacity', $.facebox.settings.opacity)
.click(function() { $(document).trigger('close.facebox') })
.fadeIn(200)
return false
}

肝心のclose.facebox
$(document).bind('close.facebox', function() {
$(document).unbind('keydown.facebox')
$('#facebox').fadeOut(function() {
$('#facebox .content').removeClass().addClass('content')
hideOverlay()
$('#facebox .loading').remove()
})
})


気になったのは close っていうイベントをtriggerで実行できるの?というかそんなイベント登録できるの?ということ。(.facebookの部分はこの前話題にした名前空間ですよね)

jQueryのドキュメントを読んでみると、冒頭にこんな記述があります。
Binds a handler to one or more events (like click) for each matched element. Can also bind custom events.
この「カスタムイベントも登録できるよ」という部分はこれまで完全に無視していましたが、つまりこういうことなんですね。勉強になります。

0 件のコメント: