Bootstrap 基礎教程

Bootstrap プラグイン

Bootstrap ポップオーバー（Popover）プラグイン

ポップオーバー（Popover）はツールチップ（Tooltip）に似て、拡張されたビューを提供します。ポップオーバーをアクティブにするには、ユーザーが要素にマウスをホバーするだけで十分です。ポップオーバーの内容は完全に Bootstrap データ API（Bootstrap Data API）を使用して埋め込むことができます。このメソッドはツールチップ（tooltip）に依存しています。

プラグインの機能を独立して参照したい場合は、以下を参照する必要があります： popover.js、それに依存しています。ツールチップ（Tooltip）プラグイン。または、 Bootstrap プラグイン概要の章で述べたように、以下を参照できます： bootstrap.js または圧縮版の bootstrap.min.js。

使用方法

ポップオーバー（Popover）プラグインは、必要に応じて内容とタグを生成し、デフォルトでは、ポップオーバー（popover）をトリガー要素の後ろに配置します。ポップオーバー（popover）を追加するには以下の2つの方法があります：

data属性を使用して：ポップアップボックス(popover)を追加するには、アンカーに/ボタンラベルの追加 data-toggle="popover" すぐに。アンカーのtitleはポップアップボックス(popover)のテキストです。デフォルトでは、プラグインはポップアップボックス(popover)を上部に設定します。
```
<a　href="#"　data-toggle="popover"　title="Example　popover">
　　　　上に合わせてください
</a>
```
JavaScript：JavaScriptを使用してポップアップボックス(popover)を有効にします：
```
$('#identifier').popover(options)
```

ポップアップボックス（Popover）プラグインは、以前に議論されたドロップダウンメニューや他のプラグインとは異なり、纯CSSプラグインではありません。このプラグインを使用するには、jqueryを使用してアクティベートする必要があります（javascriptを読み取ります）。ページ内のすべてのポップアップボックス（popover）を有効にするための以下のスクリプトを使用します：

$(function　()　{　$("[data-$('[toggle='popover']').popover();　});

オンラインサンプル

以下の例では、data属性を使用してポップアップボックス（Popover）プラグインの使用方法を示しています。

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　ポップアップボックス（Popover）プラグイン</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container"　style="padding:　100px　50px　10px;"　>
	<button　type="button"　class="btn　btn-default"　title="Popover　title"　　
			data-container="body"　data-toggle="popover"　data-placement="left"　
			data-content="左側の　Popover　の中の一部の内容">
		左側の　Popover
	</button>
	<button　type="button"　class="btn　btn-primary"　title="Popover　title"　　
			data-container="body"　data-toggle="popover"　data-placement="top"　
			data-content="上部の　Popover　の中の一部の内容">
		上部の　Popover
	</button>
	<button　type="button"　class="btn　btn-success"　title="Popover　title"　　
			data-container="body"　data-toggle="popover"　data-placement="bottom"　
			data-content="下部の　Popover　の中の一部の内容">
		下部の　Popover
	</button>
	<button　type="button"　class="btn　btn-warning"　title="Popover　title"　　
			data-container="body"　data-toggle="popover"　data-placement="right"　
			data-content="右側の　Popover　の中の一部の内容">
		右側の　Popover
	</button>
</div>
<script>
$(function　()　{　
	$('[data-$('[toggle='popover']').popover();
});
</script>
</body>
</html>

テストを見てみましょう ‹/›

以下の結果が表示されます：

オプション

いくつかのオプションはBootstrapデータAPI（Bootstrap Data API）を通じて追加されたり、JavaScriptを介して呼び出されます。以下のテーブルにこれらのオプションを示します：

オプション名	タイプ/デフォルト値	Data属性名	説明
animation	boolean デフォルト値：true	data-animation	ポップアップボックスにCSSフェードトランジション効果を適用します。
html	boolean デフォルト値：false	data-html	ポップオーバーにHTMLを挿入します。falseの場合、jQueryのtextメソッドがDOMに内容を挿入するために使用されます。XSS攻撃に懸念がある場合は、textを使用してください。
placement	string\|function デフォルト値：top	data-placement	ポップオーバーをどのように配置するかを指定します（top\|bottom\|left\|right\|auto）。指定された場合 auto 場合、ポップオーバーは動的に調整されます。例えば、placement が "auto left" である場合、ポップオーバーは可能な限り左に表示され、状況が許せない場合に右に表示されます。
selector	string デフォルト値：false	data-selector	選択子が提供された場合、ポップオーバーオブジェクトは指定されたターゲットにデリゲートされます。
title	string \| function デフォルト値：''	data-title	指定されていない場合 title 属性が指定された場合、title オプションはデフォルトの title 値です。
trigger	string デフォルト値：'hover focus'	data-trigger	ポップオーバーをトリガーする方法を定義します： click\| hover \| focus \| manual。複数のトリガーを渡すことができます。各トリガーはスペースで区切ります。
delay	number \| object デフォルト値：0	data-delay	ポップオーバーの表示と非表示に遅延するミリ秒数 - manual 手動トリガータイプには適用されません。数字が提供された場合、表示と非表示に遅延が適用されます。オブジェクトが提供された場合、以下の構造になります： delay: {　show:　500,　hide:　100　}
container	string \| false デフォルト値：false	data-container	指定された要素にポップオーバーを追加します。例：container: 'body'

メソッド

以下は、ポップオーバー（Popover）プラグインで役立つメソッドの例です：

メソッド	説明	サンプル
オプション: .popover(options)	要素集合にポップオーバーのハンドルを追加します。	$().popover(options)
Toggle: .popover('toggle')	表示を切り替えます/要素のポップオーバーを非表示にします。	$('#element').popover('toggle')
Show: .popover('show')	要素のポップオーバーを表示します。	$('#element').popover('show')
Hide: .popover('hide')	要素のポップオーバーを非表示にします。	$('#element').popover('hide')
Destroy: .popover('destroy')	要素のポップオーバーを非表示にし、破棄します。	$('#element').popover('destroy')

オンラインサンプル

以下の例では、ポップオーバー（Popover）プラグインのメソッドを示しています：

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　ポップオーバー（Popover）プラグインのメソッド</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container"　style="padding:　100px　50px　10px;"　>
	<button　type="button"　class="btn　btn-default　popover-show"　
			title="Popover　title"　data-container="body"　
			data-toggle="popover"　data-placement="left"　
			data-content="左側の　Popover　の中の一部の内容　——　show　メソッド">
		左側の　Popover
	</button>
	<button　type="button"　class="btn　btn-primary　popover-hide"　
			title="Popover　title"　data-container="body"　
			data-toggle="popover"　data-placement="top"　
			data-content="上部の　Popover　の中の一部の内容　——　hide　メソッド">
		上部の　Popover
	</button>
	<button　type="button"　class="btn　btn-success　popover-destroy"　
			title="Popover　title"　data-container="body"　
			data-toggle="popover"　data-placement="bottom"　
			data-content="下部の　Popover　の中の一部の内容　——　destroy　メソッド">
		下部の　Popover
	</button>
	<button　type="button"　class="btn　btn-warning　popover-toggle"　
			title="Popover　title"　data-container="body"　
			data-toggle="popover"　data-placement="right"　
			data-content="右側の　Popover　の中の一部の内容　——　toggle　メソッド">
		右側の　Popover
	</button"><br><br><br><br><br><br>
	<p　class="popover-options">
		<a　href="#"　type="button"　class="btn　btn-warning"　title="<h2>タイトル</h2>"　　
		　　　data-container="body"　data-toggle="popover"　data-content="
																	　<h4>Popover　の中の一部の内容　——　options　メソッド</h4>">
			Popover
		</a>
	</p>
	<script>
		$(function () { $('.popover-show').popover('show');});
		$(function () { $('.popover-hide').popover('hide');});
		$(function () { $('.popover-destroy').popover('destroy');});
		$(function () { $('.popover-toggle').popover('toggle');});
		$(function　()　{　$(".popover-options　a").popover({html　:　true　});});
	</script>
</div>
</body>
</html>

テストを見てみましょう ‹/›

以下の結果が表示されます：

イベント

以下の表に、ポップオーバー（Popover）プラグインで使用するイベントが示されています。これらのイベントは、関数内でフックとして使用できます。

イベント	説明	サンプル
show.bs.popover	showメソッドのサンプルコールが即座にこのイベントがトリガーされます。	$('#mypopover').on('show.bs.popover',　function　()　{ 　　//　アクションを実行します... )
shown.bs.popover	ポップアップがユーザーに表示される際にこのイベントがトリガーされます（CSSのトランジション効果が完了するまで待機します）。	$('#mypopover').on('shown.bs.popover',　function　()　{ 　　//　アクションを実行します... )
hide.bs.popover	hideメソッドのサンプルコールが即座にこのイベントがトリガーされます。	$('#mypopover').on('hide.bs.popover',　function　()　{ 　　//　アクションを実行します... )
hidden.bs.popover	ツールチップがユーザーから非表示になる際にこのイベントがトリガーされます（CSSのトランジション効果が完了するまで待機します）。	$('#mypopover').on('hidden.bs.popover',　function　()　{ 　　//　アクションを実行します... )

オンラインサンプル

以下のサンプルは、弹出框(Popover)プラグインのイベントを示しています：

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　弹出框(Popover)插件イベント</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　clas="container"　style="padding:　100px　50px　10px;"　>
	<button　type="button"　class="btn　btn-primary　popover-show"　
			title="Popover　title"　data-container="body"　
			data-toggle="popover"　
			data-content="左側の　Popover　の中の一部の内容　——　show　メソッド">
		左側の　Popover
	</button>
</div>
<script>
	$(function () { $('.popover-show').popover('show');});
	$(function () { $('.popover-show').on('shown.bs.popover', function () {
		alert("表示時に警告メッセージ");
	})});
</script>
</body>
</html>

テストを見てみましょう ‹/›

以下の結果が表示されます：

Bootstrap警告ボックス Bootstrapヒントツールプラグイン