jQueryとjQuery UIを使った確認ダイアログボックス

JavaScriptの確認ダイアログ(confirm();)は、昔からあってシンプルで使いやすいのですが、もっとカッコ良いダイアログを表示したい。ダイアログにタイトルを付けたいと思った時に、ちょいと機能不足ですね。
そこで、jQueryとjQuery UIを使って作った、確認ダイアログをご紹介いたします。
1.準備編
ライブラリの読み込みや表示するためのHTMLの準備については、こちらをご確認ください。
2.確認ダイアログの呼び出し
ここで、確認ダイアログがどうなっているのか、確認してみましょう。
// 確認ダイアログの表示 function ShowConfirmDialog() { if (confirm("これは確認ダイアログです。")) { alert("OKボタンがクリックされました"); } else { alert("キャンセルボタンがクリックされました"); } }
はい、とてもシンプルです。confirmを呼び出しているだけですね。OKがクリックされるとtrueが返ってくるので、戻り値を見てOK、キャンセルの表示制御をしています。
それでは、これをjQuery UIで実現するにはどのように書けば良いのでしょうか。
// 確認ダイアログの表示(JQuery) function ShowJQueryConfirmDialog() { var strTitle = "確認ダイアログ"; var strComment = "これは確認ダイアログです。"; // ダイアログのメッセージを設定 $( "#show_dialog" ).html( strComment ); // ダイアログを作成 $( "#show_dialog" ).dialog({ modal: true, title: strTitle, buttons: { "OK": function() { $( this ).dialog( "close" ); ShowJQueryMessageDialog( "OKがクリックされました" ); }, "キャンセル": function() { $( this ).dialog( "close" ); ShowJQueryMessageDialog( "キャンセルがクリックされました" ); } } }); }
クリックされたボタンに対応するメッセージを表示している処理になります。
15行目や19行目でダイアログを閉じているのは、メッセージを表示するのも同じ要素に対するjQuery UIのダイアログにしているためです。
ということで、ここで呼び出しているシンプルなメッセージダイアログについても、参考ソースコードをご紹介いたします。
// メッセージダイアログの表示(JQuery) function ShowJQueryMessageDialog( strComment ) { var strTitle = "メッセージダイアログ"; // ダイアログのメッセージとタイトルを設定 $( "#show_dialog" ).html( strComment ); // ダイアログを作成 $( "#show_dialog" ).dialog({ modal: true, title: strTitle, buttons: { } }); }
ここで、一見あれ?と思われるのは12行目のbuttonsオプションの記述ですね。先程の確認ダイアログを呼び出して、続けてこのメッセージダイアログを呼び出すと、ボタンがそのまま表示されてしまいます。そこで、buttonを空にして上書きしているのですね。
この辺、もうちょっとスマートな書き方があるかもしれませんが・・・。
ということで、サンプルのソースコードをこちらにアップロードしましたので、興味がある方はご活用ください。
コメントはまだありません。