Bootstrap Confirmationは、Boostrapに組み込んで、JavaScriptにネイティブに備わっているwindow.confirm相当の操作をするためのプラグイン。
こんなかんじに表示されます。
更新ボタンクリック後、下の「確認」ダイアログが表示されます。
実行／キャンセルのいずれかがクリックされるまで表示されたままですが、モードレスなので、他の操作もできます。
このBootstrap Confirmationのイベントをまとめてみました。
目次
サンプルコード
<html>
<head>
<title>Bootstrap Confirmationテスト</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="./js/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<p id="messageZone" style="margin: 40px">
</p>
<div style="margin: 40px">
<button class="btn btn-large btn-primary" data-toggle="confirmation"
data-btn-ok-label="実行" data-btn-ok-class="btn-success"
data-btn-cancel-label="キャンセル" data-btn-cancel-class="btn-danger"
data-title="確認" data-content="この内容で更新します。"
data-placement="bottom">
更新
</button>
</div>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/popper.js/dist/umd/popper.min.js"></script>
<script src="./js/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="./js/bootstrap-confirmation.min.js"></script>
<script>
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
onConfirm: function () {
$('#messageZone').append('実行ボタンがクリックされました。<br />');
},
onCancel: function () {
$('#messageZone').append('キャンセルボタンがクリックされました。<br />');
}
});
$('[data-toggle=confirmation]').on('show.bs.confirmation', function () {
$('#messageZone').append('show.bs.confirmationが呼ばれました。<br />');
});
$('[data-toggle=confirmation]').on('shown.bs.confirmation', function () {
$('#messageZone').append('shown.bs.confirmationが呼ばれました。<br />');
});
$('[data-toggle=confirmation]').on('hide.bs.confirmation', function () {
$('#messageZone').append('hide.bs.confirmationが呼ばれました。<br />');
});
$('[data-toggle=confirmation]').on('hidden.bs.confirmation', function () {
$('#messageZone').append('hidden.bs.confirmationが呼ばれました。<br />');
});
$('[data-toggle=confirmation]').on('inserted.bs.confirmation', function () {
$('#messageZone').append('inserted.bs.confirmationが呼ばれました。<br />');
});
</script>
</body>
</html>
必要な参照ファイルはjsフォルダにダウンロードしています。BootstrapはPopperの後、PopperはjQueryの後(Bootstrapのドキュメントによる)。
ドキュメントによると、Popper.jsはumd配下のファイルを使用するこになります。Scriptsフォルダ直下やesmフォルダのpopper.min.jsファイルを参照したら「Uncaught SyntaxError: Unexpected token export」JavaScriptエラーが出ました。
If you want to import it with a
<script>tag, use UMD.
divタグにBootstrap Confirmationを設定したボタンがおいてあります。
Bootstrap Confirmationの初期化は、scriptタグの最後で実施しています。
各種イベントが発生すると、画面最上部のpタグに発生したイベント名を追記していくコードです。
Bootstrap Confirmationが直接提供するイベント
更新ボタンクリック後、表示される「実行」または「キャンセル」をクリックした時のイベントです。
Bootstrap Confirmation初期化時にプロパティを使って設定します。
onConfirm
初期化時のプロパティonConfirmに関数を設定すると、「実行」ボタン(オプションとしてはOKボタン)クリック時に呼ばれます。
要するに、ダイアログに対する確認に対して、ユーザがOKしたときの動作ですね。
onCancel
初期化時のプロパティonCancelに関数を設定すると、「キャンセル」ボタン(オプションとしてはCancelボタン)クリック時に呼ばれます。
要するに、ダイアログに対する確認に対して、ユーザが取りやめたときの動作ですね。
Bootstrap Popoverが提供するイベントを流用
Bootstrap Popoverのtriggerを除く全てのオプションが使えるとのこと。
Popoverでは.bs.popoverで終わっているイベント名を.bs.confirmationに変えて使うようです。
show.bs.confirmation
ダイアログを表示するメソッド(show)が呼ばれた直後に発生。
shown.bs.confirmation
ダイアログ表示後に発生。
hide.bs.confirmation
ダイアログを非表示にするメソッド(hide)が呼ばれた直後に発生。
手元で確認すると、OKボタンクリック時には2回、キャンセルクリック時には1回発生しました。何故2回発生するのかはわかりませんが……。
hidden.bs.confirmation
ダイアログ非表示後に発生。
手元で確認すると、OKボタンクリック時には2回、キャンセルクリック時には1回発生しました。
inserted.bs.confirmation
popoverのtemplateがDOMに追加された後に発生。
手元で確認すると、発生の順番は、
show > inserted > shown
と発生してダイアログでOK/キャンセルでonConfirm/onCancel
その後hide > hidden
でした。