button().popover()

自：Buttons 1.6.0 起

顯示按鈕的彈出框，允許額外的使用者輸入。
請注意 - 此屬性需要 DataTables 的 Buttons 擴充功能。

描述

按鈕非常適合快速的使用者互動和決策，但有些情況下，您可能希望隱藏進階控制項，或其他需要使用者輸入的畫面，然後在按下按鈕時顯示它們。此 button().popover() 方法透過易於使用的 API 方法提供此功能。它不是完整的功能模組，因此在某些情況下，您可能希望使用完整的功能模組程式庫，但如果您只想從使用者那裡獲取一些額外資訊，此方法非常容易使用。

只需傳入您要顯示的內容以及您可能需要的任何組態選項 (請參閱上方)。就是這樣 - 您可以使用彈出視窗來進行搜尋輸入、Editor 表單輸入、更多按鈕或任何其他操作。

重要 - 如果您在按鈕 action 函式中使用此方法，您將需要呼叫 e.stopPropagation(); 以停止點擊事件在文件中向上冒泡，並立即導致彈出視窗關閉 (它在 body 上有一個點擊事件監聽器，以了解何時隱藏彈出視窗)。

類型

function button().popover( content [, options ] )

描述

顯示附加至指定按鈕的彈出視窗。這使得能夠定義您自己的內容，以在按鈕的上下文中顯示，例如表單欄位或其他選擇選項。

參數

	名稱	類型	選用
1	`content`	`string`, `node`	否
	要在彈出視窗中顯示的內容。這應該是一個 HTML 字串 (包括包裝元素)，或您已經擁有的且希望在彈出視窗中顯示的節點。
2	`options`	`物件`	否
	組態物件，用於控制彈出視窗的具體設定。它支援以下屬性 * `-type string` `align`: The horizontal alignment of the popover relative to the button. It may be one of: * `-string button-left` - Align to the left of the activation button. * `-string button-right` - Align to the right of the activation button. * `-string dt-container` - Align to the left of the DataTables' container and span its full width (good for large content areas). * `-type boolean` `autoClose` - Indicate if the popover should close automatically when clicking on a button inside it. * `true` to auto hide * `false` to not. * `-type boolean` `background` - Show a background behind the popover to stop user interaction with the rest of the page. * `true` to show the background, * `false` to keep it from showing. * `-type string` `dt-button-background` - Class name to use for the background styling * 1-type boolean` `closeButton` - Boolean indicating whether the close button should be included at the top right of the modal. * `-type string` `contentClassName` - Class name to use for the content container * `-type string` `collectionLayout` - Class name for additional styling to be applied * `-string two-colours` - Show content in two columns * `-string three-colours` - Show content in three columns * `-string four-colours` - Show content in four columns * `-type string` `collectionTitle` - Deprecated in Favour of popoverTitle - will be removed version 3.0.0. Title text to show at the top of the popover * `-type string` `popoverTitle` - Title text to show at the top of the popover * `-type boolean` `dropup` - Show popover above or below the button * `true` - Show above the button when visible * `false` - Show below the button (default) * `-type number` `fade` Fade in / out time of the popover * Number in milli-seconds.

傳回

DataTable.API

DataTable API 實例 - 沒有變更。

範例

顯示簡單的彈出視窗

var table = new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: [
				{
					action: function (e) {
						e.stopPropagation();
						this.popover('<div>I love popovers!</div>', {
							popoverTitle: 'Hello world'
						});
					}
				}
			]
		}
	}
});