Bootstrap kotak pop-up (Popover) widget

Sebelumnya: Bootstrap Alat Tip (Tooltip) widget

kotak pop-up (Popover) tooltip (Tooltip) Demikian pula, disediakan pandangan diperpanjang. Untuk mengaktifkan kotak pop-up, pengguna cukup arahkan kursor elemen dapat. Isi kotak pop-up dapat sepenuhnya diisi menggunakan API Bootstrap Data (API Bootstrap Data). Metode ini bergantung pada tool tip (tooltip).

Jika Anda ingin merujuk pada plug-in fitur individu, Anda perlu referensipopover.js, itu tergantung pada alat tip (Tooltip) steker .Atau, seperti Bootstrap Ikhtisar Plugin bab disebutkan, Anda bisa merujuk kebootstrap.jsatau versi kompresibootstrap.min.js.

pemakaian

Pop-up box (Popover) plug-generated content dan tag pada permintaan, adalah kotak pop-up default (popover) di belakang elemen aktif mereka. Ada dua cara Anda dapat menambahkan kotak pop-up (popover):

Melalui Data atribut: Untuk menambahkan kotak pop-up (popover), hanya menambahkan data-ubah = "popover"menjadi jangkar / tombol label. Judul adalah kotak (popover) teks pop-up anchor. Secara default, kotak pop-up plug-in (popover) diatur di bagian atas.
```
<a href="#" data-toggle="popover" title="Example popover">
	Silakan arahkan di atas saya </a>
```
Dengan JavaScript: Aktifkan kotak pop-up (popover) melalui JavaScript:
```
$ ( '# Identifier'). Popover (Pilihan)
```

kotak pop-up (Popover) pasang tidak seperti menu drop-down sebelumnya dan plug-in yang dibahas di atas, tidak plugin CSS murni. Untuk menggunakan plugin ini, Anda harus mengaktifkannya menggunakan jquery (baca javascript). Gunakan script berikut untuk mengaktifkan semua halaman kotak pop-up (popover):

$ (Fungsi () {$ ( "[Data-ubah = 'popover']") popover ();.});

contoh

Contoh berikut menunjukkan penggunaan kotak pop-up (Popover) widget oleh data atribut penggunaan.

contoh

<Div class = "container" style = "padding: 100px 50px 10px ;" > <Tombol ketik = "tombol" class = "btn btn-default" title = "Popover judul" Data-kontainer = "tubuh" Data-ubah = "popover" Data-penempatan = "kiri" Data-content = "Popover kiri beberapa konten"> Popover kiri </ button> <Tombol ketik = "tombol" class = "btn btn-utama" title = "Popover judul" Data-kontainer = "tubuh" Data-ubah = "popover" Data-penempatan = "top" Data-content = "Popover di bagian atas beberapa konten"> Popover atas </ button> <Tombol ketik = "tombol" class = "btn btn-sukses" title = "Popover judul" Data-kontainer = "tubuh" Data-ubah = "popover" Data-penempatan = "bawah" Data-content = "Popover di bagian bawah beberapa konten"> bawah Popover </ button> <Tombol ketik = "tombol" class = "btn btn-peringatan" title = "Popover judul" Data-kontainer = "tubuh" Data-ubah = "popover" Data-penempatan = "right" Data-content = "Popover kanan beberapa konten"> Popover sisi kanan </ button> </ Div> <Script>

$ (Fungsi () {$ ( "[. Data beralih = 'popover']") popover ();});

</ Script> </ Div>

Coba »

Hasilnya adalah sebagai berikut:

Pilihan

Ada beberapa pilihan melalui API Bootstrap Data (Bootstrap data API) atau dengan menambahkan panggilan JavaScript. Tabel berikut ini berisi opsi ini:

选项名称	类型/默认值	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'

cara

Berikut adalah beberapa kotak pop-up (Popover) plug-in cara yang berguna:

方法	描述	实例
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 kotak pop-up (Popover) pendekatan plug-in:

contoh

<Div class = "container" style = "padding: 100px 50px 10px ;" > <Tombol ketik = "tombol" class = "btn btn-default popover -show" title = "Popover judul" Data-kontainer = "tubuh" Data-ubah = "popover" Data-penempatan = "kiri" Data-content = - Popover "beberapa Popover konten meninggalkan metode show"> di sisi kiri </ button> <Tombol ketik = "tombol" class = "btn btn-primer popover hide" title = "Popover judul" Data-kontainer = "tubuh" Data-ubah = "popover" Data-penempatan = "top" Data-content = "beberapa elemen di Popover atas - menyembunyikan Metode"> Popover atas </ button> <Tombol ketik = "tombol" class = "btn btn-sukses popover -destroy" title = "Popover judul" Data-kontainer = "tubuh" Data-ubah = "popover" Data-penempatan = "bawah" Data-content = "beberapa konten popover bagian bawah - metode menghancurkan"> bawah Popover </ button> <Tombol ketik = "tombol" class = "btn btn-peringatan popover -toggle" title = "Popover judul" Data-kontainer = "tubuh" Data-ubah = "popover" Data-penempatan = "right" Data-content = "beberapa konten Popover kanan - metode beralih"> Popover sisi kanan </ button> Situs < br> <br> <P class = "popover-opsi"> <A href = "#" ketik = "tombol" class = "btn btn-peringatan" title = "<h2> Judul < / h2>" Data-kontainer = "tubuh" Data-ubah = "popover" Data-content = "<h4> Popover beberapa konten - Pilihan Metode </ h4>"> Popover < / a> </ P> <Script>

$ (Fungsi () {$ ( '.popover-Show' ) popover ( 'show') ;.}); (Fungsi $ () {$ ( '.popover-Hide. ') Popover ( 'menyembunyikan');}); $ (function () {$ ( '.popover-Hancurkan' ) popover ( 'menghancurkan') ;.}); $ (Fungsi () {$ ( '.popover-Beralih' ) popover ( 'beralih') ;.}); $ (Fungsi () . {$ ( ".popover-Options a") popover ({html: true });});

</ Script> </ Div>

Coba »

Hasilnya adalah sebagai berikut:

peristiwa

Tabel berikut berisi kotak pop-up (Popover) plug-in untuk digunakan dalam acara tersebut. Peristiwa ini dapat digunakan ketika fungsi hook.

事件	描述	实例
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 kotak pop-up (Popover) peristiwa widget:

contoh

$ (Fungsi () {$ ( '.popover-Show' ) popover ( 'show') ;.}); (Fungsi $ () {$ ( '.popover-Show' ). Pada ( 'shown.bs.popover', fungsi () { alert ( "Peringatan Bila pesan");}) });

</ Script> </ Div>

Coba »

Hasilnya adalah sebagai berikut: