読者です 読者をやめる 読者になる 読者になる

ほんじゃら堂

めんどくさい仕事をラクにする作業自動化レシピ集

jQuery UI でダイアログ表示

IT系・技術系 jquery Javascript

別の記事でも書いたけど、個人で開発している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");
}
}
});
});
});