button().popover()
自:Buttons 1.6.0
显示弹出框以便按钮获得额外用户输入。
请注意 - 此属性需要使用 DataTables 的 Buttons 扩展。
说明
按钮非常适合快速的用户交互和决策,但有时您可能想要隐藏高级控件或其他要求用户输入并随后单击按钮来显示用户输入的屏幕。此 button().popover()
方法通过一个易于使用的 API 方法提供此功能。它并不是一个完全成熟的模态,因此在某些情况下,您可能希望使用一个完全成熟的模态库,但如果您只想从用户那里获取一些额外信息,则此方法非常容易使用。
只需输入您想显示的内容和您可能需要的所有配置选项(请参见上面)。就是这样 - 然后,您可以将弹出框用于搜索输入、Editor 表单输入、更多按钮或任何其他内容。
重要 - 如果您在按钮 action
函数中使用此方法,您将需要调用 e.stopPropagation();
以停止单击事件向文档中冒泡并立即导致弹出框关闭(它在 body
中有一个单击事件侦听器,以了解何时隐藏弹出框)。
类型
function button().popover( content [, options ] )
- 说明
显示一个附加到给定按钮上的弹出框。这提供了根据按钮的上下文定义您自己的内容以便显示的功能,例如表单字段或其他选择选项。
- 参数
名称 类型 可选 1 content
否 在弹出框中显示的内容。这应为 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 实例 - 无突变。
示例
显示一个简单的弹出框
var table = new DataTable('#myTable', {
layout: {
topStart: {
buttons: [
{
action: function (e) {
e.stopPropagation();
this.popover('<div>I love popovers!</div>', {
popoverTitle: 'Hello world'
});
}
}
]
}
}
});