最新的Web開發教程
 

Bootstrap JS Popover

❮上一頁 下一頁參考❯

JS Popover (popover.js)

該Popover插件是類似工具提示; 這是當用戶點擊一個元素上會出現一個彈出框。 所不同的是，該popover可包含更多的內容。

插件的依賴： Popovers需要提示插件(tooltip.js)被列入您的版本Bootstrap 。

對於有關教程Popovers ，請閱讀我們Bootstrap Popover教程 。

通過data-*屬性

該data-toggle="popover"激活popover 。

該title屬性指定的標題文字popover 。

的data-content屬性指定應的內側顯示的文本popover's身體。

例

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
試一試»

通過JavaScript

Popovers不僅是CSS-插件，因此必須用jQuery初始化：選擇指定的元素，並調用popover()方法。

例

// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();

// Select a specified element
$('#myPopover').popover();
試一試»

Popover選項

選項可以通過數據屬性或JavaScript進行傳遞。 對於數據屬性，選項名稱追加到data-在data-placement=""

名稱 類型 默認 描述 嘗試一下
animationbooleantrue

指定是否添加CSS淡入淡出過渡效果打開和關閉時popover

  • 真 - 添加漸變效果
  • 假的 - 不要添加漸變效果
嘗試一下
containerstring, or the boolean falsefalse 追加popover到一個特定的元素。
例如：容器： 'body' 		嘗試一下
contentstring"" 指定中的文本popover's body 嘗試一下
delaynumber, or object0 指定毫秒將採取打開和關閉的次數popover 。

以指定開口的延遲和另一個用於閉合，使用對象結構：

delay: {show: 500, hide: 100} -這將需要500毫秒開popover ，但只有100毫秒關閉 		嘗試一下
htmlbooleanfalse 指定是否接受HTML標籤的popover ：
  • true -接受HTML標籤
  • false -不接受HTML標籤
注：HTML必須在標題屬性中插入（或使用標題選項）。

當設置為false（默認），jQuery的text()將被使用的方法。 如果你擔心XSS攻擊使用此 		嘗試一下
placementstring"right" 指定popover位置。 可能的值：

  • "top" - Popover之上
  • "bottom" - Popover的底部
  • "left" - Popover左
  • "right" - Popover右邊
  • "auto" -讓瀏覽器決定的位置popover 。 例如，如果值是"auto left"時， popover將顯示在左側可能時，否則在右邊。 如果該值是"auto bottom" ，所述popover將顯示在可能的情況下，否則在頂
嘗試一下
selectorstring, or the boolean falsefalse 加popover到指定的選擇 嘗試一下
templatestring  基本HTML創建的酥料餅時使用。

該popover's標題將被注入到.popover標題。

的popover's內容將被注入.popover內容。

.arrow將成為popover's箭頭。

最外層的包裝元素應該有.popover類。
titlestring"" 指定的標題文字popover 嘗試一下
triggerstring"click" 指定如何popover被觸發。 可能的值：

  • "click" -激活popover用點擊
  • "hover" -激活popover懸停
  • "focus" -激活popover時，它獲得焦點（按Tab鍵或單擊.eg）
  • "manual" -激活popover手工
提示：要傳遞多個值，它們用空格分隔 		嘗試一下
viewportstring, or object{selector: "body", padding: 0} 保持popover此元素的邊界之內。

例如： viewport: '#viewport'或{selector: '#viewport', padding: 0}

Popover方法

下表列出了所有可用的popover方法。

方法 描述 嘗試一下
.popover( options ) 激活與一個選項酥料餅。 見上面的有效值選項 嘗試一下
.popover("show") 顯示popover 嘗試一下
.popover("hide") 隱藏popover 嘗試一下
.popover("toggle") 切換的酥料餅 嘗試一下
.popover("destroy") 隱藏和破壞酥料餅 嘗試一下

Popover活動

下表列出了所有可用的popover事件。

事件 描述 嘗試一下
show.bs.popover 當發生popover即將被顯示 嘗試一下
shown.bs.popover 發生時， popover盡顯（後CSS過渡已經完成） 嘗試一下
hide.bs.popover 當發生popover是要隱藏 嘗試一下
hidden.bs.popover 當發生popover被完全隱藏（CSS後過渡已經完成） 嘗試一下
例子

例子

自Popover設計

使用CSS來定制的外觀popover ：

例

 /* Popover */
.popover {
    border: 2px dotted red;
}

/* Popover Header */
.popover-title {
    background-color: #73AD21;
    color: #FFFFFF;
    font-size: 28px;
    text-align:center;
}

/* Popover Body */
.popover-content {
    background-color: coral;
    color: #FFFFFF;
    padding: 25px;
}

/* Popover Arrow */
.arrow {
    border-right-color: red !important;
}
試一試»

❮上一頁 下一頁參考❯