2015-06-30
1:29 PM
本次要介紹的是 Bootstrap 中的 popover 元件的客製化功能
若要在 popover 失焦時 也就是 onblur 觸發時自動淡出該如何使用呢?
在 Bootstrap 本身並沒有支援這項功能
而且 DIV 本身也不支援 blur 事件
所以我們要使用另外一種方式達成相同的效果
程式碼範例
// Part 1: 初始化 popover 元件
var button = template.find(".itemInfo button");
// 加入 class name 以便下一步使用
button.addClass("popover-toggle");
var content = $("test");
button.popover({
container:"body",
content: content,
html:true,
placement:"top",
title:"Popover title",
trigger:'click'
});
// Part 2: 加入 click 事件處理
$(document).on("click", function(event){
var target = $(event.target);
$.each( $(".popover-toggle"), function(index, value){
var _target = $(value);
// 不是點擊按鈕或 popover 本身時關閉 popover 物件
if( !target.is( _target ) && target.closest(".popover").length == 0 ){
_target.popover("hide");
}
});
});
各項資料連結
Bootstrap
