jQuery blockUI を使ってガジェットでメッセージや確認のダイアログを表示する

こんばんは。なかじまんです。

OpenSocial ガジェットを開発していると、メッセージボックスを表示して確認や選択を促したくなることが多々あります。が、残念ながら Gadgets API は (minimessage が微妙ですが)適切な手段を提供していません。JavaScript の alert や confirm で役立つこともありますが、それ以上の何かをしたいことが多いです。

そこで opensocial-jquery と jQuery BlockUI Plugin を使って、いろいろなダイアログを表示する実例を紹介します。

ガジェットの動画を用意しましたので、どのようなダイアログが表示できるのか見てください。"読み込み中..." のメッセージを表示するダイアログと、"はい" と "いいえ" を選択するダイアログを盛り込んでみました。



検索フォームの HTML です。

<form id="refresh">
<input type="text" name="vq" value="dog" />
<input type="submit" value="検索" />
</form>
<div id="videos"></div>

"はい" と "いいえ" を選択するダイアログです。

<div id="dialog" style="display:none;">
<div class="message">動画を検索します。よろしいですか？</div>
<input id="yes" type="button" value="はい" />
<input id="no" type="button" value="いいえ" />
</div>

YouTube Data API を使って、指定したキーワードで動画を検索しています。jQuery.getJSON という jQuery.ajax のショートカットを使っています。

function refresh(vq) {
var url = 'http://gdata.youtube.com/feeds/videos';
var data = { vq: vq, 'max-results': 25, alt: 'json' };
$.getJSON(url, data).next(function(json) {
$.each(json.feed.entry, function() {
var img = $('<img width="80" height="60" />')
.attr('src', this.media$group.media$thumbnail[0].url)
.appendTo(videos);
});
$(window).adjustHeight();
});
}

jQuery.ajax を開始したら "読み込み中..." のダイアログを表示して、jQuery.ajax が終了したら、そのダイアログを非表示にしています。

var css = {
border: '0', padding: '10px', '-moz-border-radius': '10px'
};

$('#videos')
.ajaxStart(function() {
$.blockUI({ message: '読み込み中...', css: css });
})
.ajaxStop($.unblockUI);

検索ボタンをクリックしたとき、"はい" と "いいえ" を選択するダイアログを表示しています。"はい" をクリックすると、ダイアログを非表示にして、入力したキーワードを使って、動画を検索します。"いいえ" をクリックすると、ダイアログを非表示にします(するだけ)。

$('#refresh').submit(function() {
var self = this;

$.blockUI({ message: $('#dialog'), css: css });

$('#yes').click(function() {
$.unblockUI(); refresh(self.vq.value);
});

$('#no').click(function() {
$.unblockUI();
});

return false;
});

});

ソースコード を公開しておきます。また gooホームのサンドボックス にインストールして体験できます。スタイルがチョー適当なので Firefox2 以外では、ダサダサかもしれません。

jQuery BlockUI Plugin の デモ とオプションの品揃え をひととおり見れば、何ができて何ができないかすぐに判断できるでしょう。また、軽量でシンプルなので、ソースコードを解析してしまったほうが早いかもしれません。

jQuery は有益なプラグインがたくさんありますので、何か実現したいことがあれば、まずはプラグインを探してみるとよいです。