Kotak pop timbul Bootstrap


Bootstrap Pemalam Popover

Popover adalah serupa dengan Tooltip, memberikan paparan yang diperluaskan. Untuk mengaktifkan popover, pengguna hanya menuding pada elemen. Kandungan kotak pop timbul boleh diisi sepenuhnya menggunakan API Data Bootstrap. Kaedah ini bergantung pada petua alat.

Jika anda ingin merujuk kefungsian pemalam ini secara berasingan, maka anda perlu merujuk popover.js, yang bergantung pada pemalam Tooltip. Sebagai alternatif, seperti yang dinyatakan dalam bab Gambaran Keseluruhan Plugin Bootstrap, anda boleh merujuk bootstrap.js atau versi kecil bootstrap.min.js.

Penggunaan

Pemalam popover menjana kandungan dan markup mengikut keperluan Secara lalai, popover diletakkan di belakang elemen pencetusnya. Anda boleh menambah popover dalam dua cara berikut:

  • melalui atribut data : Untuk menambah popover, cuma tambah Just add data-togol ="popover" ke tag sauh/butang. Tajuk sauh ialah teks popover. Secara lalai, pemalam meletakkan popover di bahagian atas.

<a href="#" data-toggle="popover" title="Contoh popover">
Sila tuding di atas saya
< /a>

  • Melalui JavaScript: Dayakan popover melalui JavaScript:

$(' #identifier').popover(options)

Pemalam Popover bukanlah pemalam CSS tulen seperti menu lungsur turun dan pemalam lain yang dibincangkan sebelum ini. Untuk menggunakan pemalam, anda mesti mengaktifkannya menggunakan jquery (baca javascript). Gunakan skrip berikut untuk mendayakan semua popover pada halaman:

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

Contoh

Contoh berikut menunjukkan penggunaan pemalam popover melalui atribut data.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 弹出框（Popover）插件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.3.0/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>
</div>

</body>
</html>

Run instance »

Klik butang "Run Instance" untuk melihat instance dalam talian

Pilihan

Terdapat beberapa pilihan ditambah melalui Bootstrap Data API atau dipanggil melalui JavaScript. Pilihan disenaraikan dalam jadual di bawah:

选项名称类型/默认值Data 属性名称描述
animationboolean
默认值：true		data-animation向弹出框应用 CSS 褪色过渡效果。
htmlboolean
默认值：false		data-html向弹出框插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placementstring|function
默认值：top		data-placement规定如何定位弹出框（即 top|bottom|left|right|auto）。
当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 "auto left"，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selectorstring
默认值：false		data-selector如果提供了一个选择器，弹出框对象将被委派到指定的目标。
titlestring | function
默认值：''		data-title如果未指定 title 属性，则 title 选项是默认的 title 值。
triggerstring
默认值：'hover focus'		data-trigger定义如何触发弹出框： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。
delaynumber | object
默认值：0		data-delay延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：
delay:
{ show: 500, hide: 100 }
containerstring | false
默认值：false		data-container向指定元素追加弹出框。
实例： container: 'body'

Kaedah

Berikut ialah beberapa kaedah berguna dalam pemalam popover:

方法描述实例
Options: .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')

Contoh

Contoh berikut menunjukkan kaedah Pemalam popover:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 弹出框（Popover）插件方法</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.3.0/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>Title</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>

Run instance»

Klik butang "Run Instance" untuk melihat instance dalam talian

Acara

Jadual berikut menyenaraikan acara yang digunakan dalam pemalam popover. Acara ini boleh digunakan sebagai cangkuk dalam fungsi.

事件描述实例
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 () {
  // 执行一些动作...
})

Contoh

Contoh berikut menunjukkan peristiwa pemalam popover:

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 弹出框（Popover）插件事件</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/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>
</div>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian