php show.bs.popover,bootstrap popover用法和popover中文api

Bootstrap popover中文api，通过 JavaScript 调用的。下表列出了这些选项：

Bootstrap popover是Bootstrap3中的弹出提示层功能的插件，下面先来看popover提供的默认配置参数、方法和事件，在Bootstrap popover中文api后面会附上一些实例用法。

Bootstrap popover的默认配置参数如下：

选项名称

类型/默认值

Data 属性名称

描述

animation

boolean

默认值：true

data-animation

向弹出框应用 CSS 动画过渡效果。

content

插入的内容

data-content

要向提示层中插入的内容，默认会把html标签直接显示出来，如果要解析html请把参数：html设为true，文章后面有例子

html

boolean

默认值：false

data-html

如果为true则向弹出框中插入 HTML、为 false则html标签不会被解析，直接显示了出来

placement

string|function

默认值：top

data-placement

弹出框定位方向(即 top|bottom|left|right|auto)。

当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 "auto left"，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。

selector

string

默认值：false

data-selector

定位弹出提示层位于哪个dom节点上，也就是说，你点击一个目标其实是可以在另外一个dom对象上显示出弹出提示层的。

title

string | function

默认值：''

data-title

弹出提示层的title部分的内容，如果未指定 title 属性，则 title 选项是默认的 title 值。

trigger

string

默认值：'hover focus'

data-trigger

弹出框的触发事件： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。如果设为focus 当按钮失去焦点提示层会消失，例如页面空白处单机提示层消失

template

string

'

可以用这个自定义提示层的dom模板

container

string | false

默认值：false

data-container

向指定元素中追加弹出框，默认是弹出层结构追加到事件节点的后面。这会用在，你的结构中有太多的超出隐藏的时候弹出提示层可能会被挡住，这个时候就比如：

实例： container: 'body'

delay

number | object

默认值：0

data-delay

延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：

delay:{ show: 500, hide: 100 }

viewport

string | object | function

{ selector: 'body', padding: 0 }

始终位于某个视窗可视范围内 { "selector": "#viewport", "padding": 0 } 用在有视窗区域有滚动条 情况

Bootstrap popover的默认javascript如下：

方法

描述

实例

Options:.popover(options)

向元素集合附加弹出框句柄。

如：var myPopover =$().popover(options)

Toggle:.popover('toggle')

切换显示/隐藏元素的弹出框。

$('#element').popover('toggle')

Show:.popover('show')

显示元素的弹出框。

$('#element').popover('show')

Hide:.popover('hide')

隐藏元素的弹出框。

$('#element').popover('hide')

Destroy:.popover('destroy')

隐藏并销毁元素的弹出框。

$('#element').popover('destroy')

Bootstrap popover弹出层提供的事件如下(主要是做一些回调之类事情)：

事件

描述

实例

show.bs.popover

当调用 show 实例方法时立即触发该事件。

$('#mypopover').on('show.bs.popover', function () {

// 执行一些动作...

})

shown.bs.popover

当弹出框对完全弹出时触发该事件(将等待 CSS 过渡效果完成)。

$('#mypopover').on('shown.bs.popover', function () {

// 执行一些动作...

})

hide.bs.popover

当调用 hide 实例方法时立即触发该事件。

$('#mypopover').on('hide.bs.popover', function () {

// 执行一些动作...

})

hidden.bs.popover

当工具提示完全隐藏时触发该事件(将等待 CSS 过渡效果完成)。

$('#mypopover').on('hidden.bs.popover', function () {

// 执行一些动作...

})

Bootstrap popover调用示例如下：

//简单调用

$(".js-btn-top").popover({

placement:"top", //定位方向

title:"懒人建站-jquery插件", //如果不需要标题就不要配置这个选项

content:"内容：懒人建站"

});

//html:true会解析html标签

$(".js-btn-bottom").popover({

trigger:"focus", //如果设为focus 当按钮失去焦点提示层会消失，例如页面空白处单机提示层消失

placement:"bottom",

html:true,

content:'

html:true会解析html标签哦，懒人建站

你也试试吧！

'

});

//事件其实就是一些回调一样的东西，比如隐藏事件hidden，在提示层完全隐藏的时候会触发里面的处理逻辑

$(".js-btn-bottom").on('hidden.bs.popover', function () {

// 执行一些动作...

//这里面的this就是点击的按钮自身

alert(0);

})

↓ 查看全文