animationオプション
ポップオーバー(popover.js
)におけるanimationオプションは、フェード・インのアニメーションで表示し、フェード・アウトのアニメーションで非表示にするかどうかを設定するオプション。
属性値一覧表
属性値 | 説明 |
---|---|
true | フェード・アニメーションで、表示/非表示。 |
false | フェード・アニメーションなしで、表示/非表示。 |
data-animation
属性に指定
ポップオーバーを呼び出す要素に、data-animation
属性を追加し、true
、false
の何れかを指定する。
サンプル
ソースコード
HTML
<p> <button type="button" class="btn btn-default" data-toggle="popover" data-animation="true" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン(true)</button> </p> <p> <button type="button" class="btn btn-default" data-toggle="popover" data-animation="false" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン(false)</button> </p>
JavaScript
$(function () { $('[data-toggle="popover"]').popover(); });
JavaScriptにおいてanimationオプションを指定
サンプル
ソースコード
HTML
<p> <button type="button" id="sample3popover1" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン(true)</button> </p> <p> <button type="button" id="sample3popover2" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン(false)</button> </p>
JavaScript
$(function () { $('#sample3popover1').popover( { animation: true } ); $('#sample3popover2').popover( { animation: false } ); });