ボタンクリック → 確認ダイアログ

jquery

「削除」ボタンクリック → 削除確認ダイアログってものを、jQuery UI Dialog を使って作ってみた。作ってみたというか、以下サイトのサンプルをパクってみたといった感じ。

参考サイト：


とりあえずソースを。

HTMLの抜粋：
ダイアログを表示するトリガーボタン。引数の ID は削除したいものの ID。

<input type="button" value="削除" onClick="deleteConfirm('${id}')" />

dialog を表示する（？）div タグ。

<div id="deleteConfirmMessage"/>


JavaScriptの抜粋：

<script type="text/javascript" src="${f:url('/js/jquery.js')}"></script>
<script type="text/javascript" src="${f:url('/js/ui.core.js')}"></script>
<script type="text/javascript" src="${f:url('/js/ui.dialog.js')}"></script>
<script type="text/javascript" src="${f:url('/js/ui.draggable.js')}"></script>
<script type="text/javascript">
function deleteConfirm(id) {
	$(document.body).addClass('flora'); // flora という skin の適用
	$("#deleteConfirmMessage").dialog({
		title: '削除確認',
		width: 300,
		modal: true,
		overlay: {
			opacity: 0.5,
			background: 'black'
		},
		open: function() {
			$('#deleteConfirmMessage').text('削除します。よろしいですか？');
		},
		buttons: {
			'削除': function() {
				window.open('delete?id=' + id, '_self'); // GET アクセスして削除を実行
			},
			'キャンセル': function() {
				$('#deleteConfirmMessage').dialog('close'); // ダイアログを閉じる
				// $(this).dialog('close'); でも同様（コメントより）
			}
		}
	});
}
</script>

たったこれだけ。すげぇ。


ちなみに flora を適用するには flora.dialog.css が必要とのこと。ダウンロードしたアーカイブにあった flora 用の画像と一緒にアプリケーションに組み込んであげればOK。