Bootstrap Popover 隱藏的Javasript方法

Bootstrap Popover是Bootstrap的彈出提示控件。我們可以通過data屬性或者Javascript來調用該控件。data屬性調用定制性較差這里就不細說了，我們講一下Javascript來調用。

 

初始化

$().popover(options)

對於jQuery選擇器選到的元素調用jQuery.fn.popover(options)完成初始化，options是一個對象可以包含以下屬性：

名稱	類型	默認值	描述
animation	boolean	true	是否開啟CSS動畫
html	boolean	false	是否允許內容為HTML代碼，為false則將代碼以文本方式顯示
placement	string | function	'right'	彈出提示相對於被選中元素的位置，可以使top | bottom | right | left 四個方向
selector	string	false	如果有selector，則彈出提示將是該特殊元素
trigger	string	'click'	彈出提示在何時出現 - click | hover | focus | manual
title	string | function	''	標題
content	string | function	''	提示內容
delay	number | object	0	延時顯示/隱藏時間 對象結構為 delay: { show: 500, hide: 100 }
container	string | false	false	將提示框放在特定的容器里

 

基本方法

.popover('show')

顯示提示。

.popover('hide')

隱藏提示。

.popover('toggle')

顯示/隱藏提示。

.popover('destroy')

銷毀 

 

更多需求

一般這些方法可以滿足要求。

• 但是如果我們想對彈出提示寫入HTML，並對里面的元素進行事件綁定，可能就出現問題了，因為文檔沒有告訴你怎么獲得該彈出提示對象。
• 或者，如果我不想讓該彈出提示彈出時候，除了銷毀，我們也沒有更好的辦法，可是銷毀后，想再次使用只能再次初始化……
• 又或者……

實際上Bootstrap有些隱藏的方法能滿足我們的需求。

注：實際上很多方法可以使用類似於.popover('xxx')的方法調用，但某些需要獲取其返回值得方法卻不能使用，因為我們知道jQuery中的方法一般都會返回this，所以我們沒法得到我們想要的東東。所以為了統一，我們推薦用下面的方法調用。 

 

獲取Popover對象

實際上，彈出提示是由內建的Popover對象管理的，jQuery.fn.popover方法只是調用Popover對象中的方法而已。所以首要是取出Popover對象供我們使用，而這一對象又在該元素的jQuery緩存中，我們可以這樣取出：

$().data('popover');

例如：

var popoverObj = $('#element').data('popover');

然后我們就可以通過該對象的方法來完成我們想做的東西。

 

獲取彈出提示對象

Popover.tip(); 

我們可以使用該方法返回jQuery包裝后的彈出提示對象，然后進行事件綁定，例如：

popoverObj.tip().on('click', '#someElement', function(evt){
    //do something...
})

 

使彈出提示有效或無效

利用Popover.enable() 和 Popover.disable() 方法可以很容易使彈出框生效或無效，而不是銷毀他。

當然我們也可以用Popover.toggleEnabled() 方法來切換生效和無效狀態。