2012年05月08日

jQuery UIのダイアログを使ってみる

jQuery UIのダイアログを使おうと思ったのです。JQuery UIのダイアログの詳しい説明はこちら。基本的な使い方はこんな感じです。


$(selector).dialog({
buttons: {
"はい": function(event) {
//「はい」を押したときに実行される処理
},
"いいえ": function(event) {
//「いいえ」を押したときに実行される処理
}
}
});



で、ダイアログを表示する関数、showDialogを作ることにしました。上記の例はとても単純ですが、本当はもっといろいろオプションを設定しなくてはいけません(しなくてもいいですけど)。ダイアログを表示するのが何箇所もあると、いちいち指定するのは面倒だからな!


機能は大体こんな感じです。
・ダイアログのタイトル、文言を指定できます。
・ボタンの種類(ボタンなし、OK・キャンセル、はい・いいえ、など)を指定できます。
・ボタンを押したときに実行する処理を指定できます。


//ボタンの種類の定数
var ButtonNone = 0;
var ButtonOK = 1;
var ButtonYesNo = 2;
var ButtonYesNoCancel = 3;

//ボタンのキャプション
var ButtonCaptions = [
[],
["OK"],
["はい", "いいえ"],
["はい", "いいえ", "キャンセル"]
];

//第4引数以降はコールバック(ボタンを押したときの処理)
function showDialog(title, message, buttonType, callback) {
//jQuery UIのdialogに渡すためのオブジェクト
var buttons = {};

//showDialogの引数を逃がしておく。
var args = arguments; //(1)の説明を参照してください。

for (var i = 0; i < ButtonCaptions[buttonType].length; i++) {
(function(i){ //(2)の説明を参照してください。
var caption = ButtonCaptions[buttonType][i];
if (caption) {
buttons[caption] = function() {
if ($.isFunction(args[i + 3])) {
//ボタンを押したときの処理を実行する。
args[i + 3]();
}
//ボタンを押したらダイアログを閉じる。
$(this).dialog("close");
}
}
})(i);
}

//(3)の説明を参照してください。
$("<div>" + message + "</div>").dialog({
//その他のオプションはお好みで。
//例えばダイアログを閉じたときのアニメーションとか。
title: title,
buttons: buttons,
close: function(event) {
//ダイアログを閉じたときに、
//メッセージのDOMオブジェクトを破棄する。
$(this).dialog('destroy');
$(event.target).remove();
}
});
}

//showDialogを使ってみる。
showDialog(
"タイトル",
"メッセージ",
ButtonYesNo,
function() {
//「はい」を押したときの処理
},
function() {
//「いいえ」を押したときの処理
}
);




(1)「arguments」ってどこから湧いてきたの?


別の記事(JavaScriptの可変長引数)を参照してください。


(2)なんでそこに「function」が出てくるの?


またもや、別の記事(JavaScriptの変数のスコープ)を参照してください。


(3)「$("<div>" + message + "</div>")」ってやる意味あるの?


jQuery UIのダイアログって、要するにDOMオブジェクトをダイアログっぽく表示するだけです。素直に受け取れば、HTMLファイルにdivタグなんかを使って書いておかなきゃいけません。とても静的です。メッセージの種類だけdivタグを用意するなんて面倒すぎます。もちろん、jQueryでそのdivタグの中身を書き換えて・・・なんてこともできますが、ここではダイアログを使い捨てにするため、こんな書き方をしています。
タグ:jQueryUI
posted by ぺるたご at 00:14| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/268951958

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。