別の記事でも書いたけど、個人で開発しているWebアプリでは、だいたいjQuery UIを使用してる。
今回はその中でもよく利用しているdialogの使い方をまとめておく。
dialog機能を使うと、割と簡単にエラーダイアログやフォーム表示用のサブウィンドウを作成することができる。
http://jqueryui.com/demos/dialog/
僕の使い方としては、あらかじめ使用するダイアログやサブウィンドウをHTML内に非表示で埋め込んでおき、
必要な時にダイアログとして表示する、という方法をとっている。
1つのファイルにまとまってると、本体のHTML、ダイアログ、サブウィンドウを区別なく編集できるので結構楽だと思う。
OKダイアログ（通知やエラー表示用）、確認ダイアログ、フォームダイアログを
それぞれ表示できるサンプルを書いておく。
よく使うOKダイアログや確認ダイアログは関数化しておくと便利。
sample.html
... <head> ... <link rel="stylesheet" href="/css/sunny/jquery-ui-1.8.custom.css" type="text/css" /> <link rel="stylesheet" href="/css/sample.css" type="text/css" /> <script type="text/javascript"> google.load("jquery", "1.4.2"); </script> <script type="text/javascript"> google.load("jqueryui", "1.8.0"); </script> <script type="text/javascript" src="/js/sample.js"></script> ... </head> <body> ... <a href="#" id="show-error-dialog-btn">エラーダイアログを表示</a> <a href="#" id="show-confirm-dialog-btn">確認ダイアログを表示</a> <a href="#" id="show-form-dialog-btn">フォームダイアログを表示</a> ... <div class="dialog" id="delete-confirm-dialog" title="メッセージ削除確認"> <div class="ui-state-highlight"> <span class="ui-icon ui-icon-info"></span> 本当にメッセージを削除してもよろしいですか？ </div> </div> <div class="dialog" id="message-update-failed-dialog" title="サーバエラー"> <div class="ui-state-error"> <span class="ui-icon ui-icon-alert"></span> メッセージの更新に失敗しました </div> </div> <div class="dialog" id="message-edit-dialog" title="メッセージを編集"> <form id="message-edit-form" method="POST"> <input type="text" id="message-field" /> </form> </div> ...
sample.css
.dialog { display: none; }
sample.js
var Page = { show_ok_dialog: function (dialog_id) { $(dialog_id).dialog({ bgiframe: true, modal: true, buttons: { "OK": function () { $(this).dialog("destroy"); } } }); }, show_confirm_dialog: function (dialog_id, ok_func, cancel_func) { $(dialog_id).dialog({ bgiframe: true, modal: true, buttons: { "OK": ok_func, "キャンセル": cancel_func } }); } }; $(document).ready(function () { $("#show-error-dialog-btn").click(function (e) { e.preventDefault(); Page.show_ok_dialog("#message-update-failed-dialog"); }); $("#show-confirm-dialog-btn").click(function (e) { e.preventDefault(); Page.show_confirm_dialog("#delete-confirm-dialog", function () { // OKボタンをクリックした時の処理 ... $(this).dialog("destroy"); // ダイアログを削除 }, function () { // キャンセルボタンをクリックした時の処理 ... $(this).dialog("destroy"); } ); }); $("#show-form-dialog-btn").click(function (e) { e.preventDefault(); $("#message-edit-dialog").dialog({ bgiframe: true, modal: true, buttons: { "更新": function () { // 更新ボタンを押した時の処理 var message = $("#message-field").val(); // 同じHTML内なのでフォームの値も取得できる // サーバに送信したり処理したり ... $(this).dialog("destroy"); }, "キャンセル": function () { // キャンセルボタンを押した時の処理 ... $(this).dialog("destroy"); } } }); }); });
