Bootstrap-popover-plugin

提供：Dev Guides
移動先:案内、検索

ブートストラップ-ポップオーバープラグイン

ポップオーバーはツールチップに似ており、見出しを備えた拡張ビューを提供します。 ポップオーバーをアクティブにするには、ユーザーがカーソルを要素の上に置くだけです。 ポップオーバーのコンテンツは、Bootstrap Data APIを使用して完全に取り込むことができます。 この方法にはツールチップが必要です。

'_このプラグイン機能を個別に含めたい場合は、 popover.js が必要で、リンクの依存関係があります：/bootstrap/bootstrap_tooltip_plugin [tooltip plugin]。 または、リンク：/bootstrap/bootstrap_plugins_overview [Bootstrap Plugins Overview]で説明されているように、_bootstrap.js_または縮小された_bootstrap.min.js_を含めることができます。_

使用法

ポップオーバープラグインは、オンデマンドでコンテンツとマークアップを生成し、デフォルトでは、トリガー要素の後にポップオーバーを配置します。 次の2つの方法でポップオーバーを追加できます-

  • Via data attributes -ポップオーバーを追加するには、アンカー/ボタンタグに data-toggle = "popover" を追加します。 アンカーのタイトルはポップオーバーのテキストになります。 デフォルトでは、ポップオーバーはプラグインによってtopに設定されています。
<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>
  • Via JavaScript -次の構文を使用してJavaScriptでポップオーバーを有効にします-
$('#identifier').popover(options)

'__ Popoverプラグインは、ドロップダウンなどのCSSプラグインや、前の章で説明した他のプラグインではありません。 このプラグインを使用するには、jquery（javascriptの読み取り）を使用してプラグインをアクティブにする必要があります。 ページ上のすべてのポップオーバーを有効にするには、このスクリプトを使用します- 

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

'__

例

次の例は、データ属性を介したポップオーバープラグインの使用を示しています。 

<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 = "Some content in Popover on left">

      Popover on left
   </button>

   <button type = "button" class = "btn btn-primary" title = "Popover title"
      data-container = "body" data-toggle = "popover" data-placement = "top"
      data-content = "Some content in Popover on top">

      Popover on top
   </button>

   <button type = "button" class = "btn btn-success" title = "Popover title"
      data-container = "body" data-toggle = "popover" data-placement = "bottom"
      data-content = "Some content in Popover on bottom">

      Popover on bottom
   </button>

   <button type = "button" class = "btn btn-warning" title = "Popover title"
      data-container = "body" data-toggle = "popover" data-placement = "right"
      data-content = "Some content in Popover on right">

      Popover on right
   </button>

</div>

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

オプション

Bootstrap Data API経由で追加したり、JavaScript経由で呼び出したりできる特定のオプションがあります。 次の表にオプションを示します-

Option Name Type/Default Value Data attribute name Description
animation boolean Default − true data-animation Applies a CSS fade transition to the popover.
html boolean Default − false data-html Inserts HTML into the popover. If false, jQuery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.
placement string function Default − top data-placement
Specifies how to position the popover (i.e., top bottom left right
auto). When auto is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right. selector string Default − false data-selector
If a selector is provided, popover objects will be delegated to the specified targets. title string function Default − "
data-title The title option is the default title value if the title attribute isn’t present. trigger string Default − 'hover focus'
data-trigger Defines how the popover is triggered − *click hover focus
manual*. You may pass multiple triggers; separate them with a space. delay number object Default − 0
data-delay

Delays showing and hiding the popover in ms — does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is − 

delay: { show: 500, hide: 100 }
 container string

方法

以下は、ポップオーバーのためのいくつかの便利な方法です-

Method Description Example
Options − .popover(options) Attaches a popover handler to an element collection. 
$().popover(options)
Toggle − .popover('toggle') Toggles an element’s popover. 
$('#element').popover('toggle')
Show − .popover('show') Reveals an element’s popover. 
$('#element').popover('show')
Hide − .popover('hide') Hides an element’s popover. 
$('#element').popover('hide')
Destroy − .popover('destroy') Hides and destroys an element’s popover. 
$('#element').popover('destroy')

例

次の例は、ポップオーバープラグインメソッドを示しています- 

<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 = "Some content in Popover with show method">

      Popover on left
   </button>

   <button type = "button" class = "btn btn-primary popover-hide"
      title = "Popover title" data-container = "body"
      data-toggle = "popover" data-placement = "top"
      data-content = "Some content in Popover-hide method">

      Popover on top
   </button>

   <button type = "button" class = "btn btn-success popover-destroy"
      title = "Popover title" data-container = "body"
      data-toggle = "popover" data-placement = "bottom"
      data-content = "Some content in Popover-destroy method">

      Popover on bottom
   </button>

   <button type = "button" class = "btn btn-warning popover-toggle"
      title = "Popover title" data-container = "body"
      data-toggle = "popover" data-placement = "top"
      data-content = "Some content in Popover-toggle method">

      Popover on right
   </button>

   <br><br><br><br><br><br>

   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning"
         title = "<h2>Title</h2>" data-container = "body"
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</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>

イベント

次の表に、ポップオーバープラグインで動作するイベントを示します。 このイベントを使用して、関数にフックすることができます。

Event Description Example
show.bs.popover This event fires immediately when the show instance method is called. 
$('#mypopover').on('show.bs.popover', function () {
  //do something
})
shown.bs.popover This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). 
$('#mypopover').on('shown.bs.popover', function () {
  //do something
})
hide.bs.popover This event is fired immediately when the hide instance method has been called. 
$('#mypopover').on('hide.bs.popover', function () {
  //do something
})
hidden.bs.popover This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). 
$('#mypopover').on('hidden.bs.popover', function () {
  //do something
})

例

次の例は、Popoverプラグインイベントを示しています- 

<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 = "Some content in Popover with show method">

      Popover on left
   </button>

</div>

<script>
   $(function () { $('.popover-show').popover('show');});

   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>
「https://www.finddevguides.com/index.php?title=Bootstrap-popover-plugin&oldid=7341」から取得
Powered by MediaWiki