イベント Events
ポップオーバーのイベントについて。
構文
構文
on( events, fn )メソッドを使う場合。
$( セレクター ).on( イベント, function () {
// 処理
} );
セレクターでポップオーバーを選択。
イベントに指定できるのは、show.bs.popover、shown.bs.popover、hide.bs.popover、hidden.bs.popover。
イベント一覧表
| イベント名 | 説明 |
|---|---|
| show.bs.popover |
ポップオーバーを表示するshowメソッドを呼び出した時のイベント。 |
| shown.bs.popover |
ポップオーバーが表示された時のイベント。 |
| hide.bs.popover |
ポップオーバーを非表示にするhideメソッドを呼び出した時のイベント。 |
| hidden.bs.popover |
ポップオーバーが非表示になった時のイベント。 |
サンプル
サンプル
show.bs.popover:
shown.bs.popover:
hide.bs.popover:
hidden.bs.popover:
ソースコード
HTML
<p>show.bs.popover: <span id="showBsPopover"></span></p> <p>shown.bs.popover: <span id="shownBsPopover"></span></p> <p>hide.bs.popover: <span id="hideBsPopover"></span></p> <p>hidden.bs.popover: <span id="hiddenBsPopover"></span></p> <p> <button type="button" id="samplePopover" class="btn btn-default" data-toggle="popover" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン</button> </p>
JavaScript
$(function () {
$('[data-toggle="popover"]').popover();
$('#samplePopover').on('show.bs.popover', function () {
$('#showBsPopover').text("showメソッドを呼び出しましたね。");
$('#hideBsPopover').text("");
});
$('#samplePopover').on('shown.bs.popover', function () {
$('#shownBsPopover').text("ポップオーバーを表示しました。");
$('#hiddenBsPopover').text("");
});
$('#samplePopover').on('hide.bs.popover', function () {
$('#hideBsPopover').text("hideメソッドを呼び出しましたね。");
$('#showBsPopover').text("");
});
$('#samplePopover').on('hidden.bs.popover', function () {
$('#hiddenBsPopover').text("ポップオーバーを非表示にしました。");
$('#shownBsPopover').text("");
});
});
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。