Bootstrap每天必學(xué)之彈出框（Popover）插件
Bootstrap彈出框插件，提供了一個(gè)擴(kuò)展的視圖，彈出框（Popover）插件根據(jù)需求生成內(nèi)容和標(biāo)記，默認(rèn)情況下是把彈出框（popover）放在它們的觸發(fā)元素后面。
彈出框（Popover）與工具提示（Tooltip）類似，提供了一個(gè)擴(kuò)展的視圖。如需激活彈出框，用戶只需把鼠標(biāo)懸停在元素上即可。彈出框的內(nèi)容完全可使用 Bootstrap 數(shù)據(jù) API（Bootstrap Data API）來填充。該方法依賴于工具提示（tooltip）。
如果您想要單獨(dú)引用該插件的功能，那么您需要引用 popover.js，它依賴于 工具提示（Tooltip）插件。或者，正如 Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。
一、用法
彈出框（Popover）插件根據(jù)需求生成內(nèi)容和標(biāo)記，默認(rèn)情況下是把彈出框（popover）放在它們的觸發(fā)元素后面。您可以有以下兩種方式添加彈出框（popover）：
通過 data 屬性：如需添加一個(gè)彈出框（popover），只需向一個(gè)錨/按鈕標(biāo)簽添加 data-toggle="popover" 即可。錨的 title 即為彈出框（popover）的文本。默認(rèn)情況下，插件把彈出框（popover）設(shè)置在頂部。
<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(); });
二、實(shí)例
彈出框即點(diǎn)擊一個(gè)元素彈出一個(gè)包含標(biāo)題和內(nèi)容的容器。
//基本用法
<button class="btn btn-lg btn-danger"
type="button"
data-toggle="popover"
title="彈出框"
data-content="這是一個(gè)彈出框插件">
點(diǎn)擊彈出/隱藏彈出框
</button>
//JavaScript 初始化
$('button').popover();
彈出框插件有很多屬性來配置提示的顯示，具體如下：
$('button').popover({
container : 'body',
viewport : {
selector : '#view',
padding : 10,
}
});
通過 JavaScript 執(zhí)行的方法有四個(gè)。
//顯示
$('button').popover('show');
//隱藏
$('button').popover('hide');
//反轉(zhuǎn)顯示和隱藏
$('button').popover('toggle');
//隱藏并銷毀
$('button').popover('destroy');
Popover 插件中事件有四種：
//事件，其他雷同
$('button').on('show.bs.tab', function() {
alert('調(diào)用 show 方法時(shí)觸發(fā)！');
});
以上就是本文的全部內(nèi)容，希望對(duì)大家學(xué)習(xí)Bootstrap彈出框插件有所幫助。
相關(guān)文章
在js中判斷checkboxlist(.net控件客戶端id)是否有選中
添加或修改內(nèi)容時(shí)，需要對(duì)關(guān)鍵數(shù)據(jù)進(jìn)行判空處理，checkboxlist是否有選擇項(xiàng)如何使用js判斷實(shí)現(xiàn)，接下來為大家詳細(xì)介紹下實(shí)現(xiàn)方法，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要介紹了JavaScript 對(duì)象不變性，對(duì)象不變性在任何編程語言中都是一個(gè)重要的概念。它會(huì)限制對(duì)象修改并防止不需要的更改。簡而言之，對(duì)象的不變性就是將它的狀態(tài)變?yōu)橹蛔x的下面詳細(xì)內(nèi)容，需要的小伙伴可以參考一下2022-02-02
這篇文章主要為大家詳細(xì)介紹了JS代碼實(shí)現(xiàn)頁面切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
js實(shí)現(xiàn)千分符和保留幾位小數(shù)的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)千分符和保留幾位小數(shù)的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
淺析JavaScriptSerializer類的序列化與反序列化
本篇文章主要介紹了JavaScriptSerializer類 對(duì)象序列化與反序列化的方法、屬性以及實(shí)例代碼，有需要的朋友可以參考一下2016-11-11
這篇文章主要介紹了淺談jQuery中setInterval()方法，十分的簡單實(shí)用，有需要的小伙伴可以參考下。2015-07-07
如果我們希望在頁面引入圖片。當(dāng)我們基于webpack進(jìn)行開發(fā)時(shí)，引入圖片會(huì)遇到一些問題，這篇文章主要介紹了webpack之引入圖片的實(shí)現(xiàn)及問題，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
js對(duì)table的td進(jìn)行相同內(nèi)容合并示例詳解
正如標(biāo)題所言如何對(duì)table的td進(jìn)行相同內(nèi)容合并，下面為大家詳細(xì)介紹下使用js是如何做到的，感興趣的朋友不要錯(cuò)過2013-12-12
這篇文章主要介紹了JS仿百度自動(dòng)下拉框模糊匹配提示 的相關(guān)資料,需要的朋友可以參考下2016-07-07
JS實(shí)現(xiàn)圖片垂直居中顯示小結(jié)
本文給大家分享了4中圖片垂直居中顯示的效果，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-12-12