bootstrap popover用法和popover中文api
作者：佳明妈 来源：jquery插件 2015-10-26 人气：23556Bootstrap popover是Bootstrap3中的弹出提示层功能的插件，下面先来看popover提供的默认配置参数、方法和事件，在Bootstrap 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 '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
可以用这个自定义提示层的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:'<p style="width: 500px;">html:true会解析html标签哦，<a href="http://www.51xuediannao.com/" target="_blank">懒人建站</a></p><p>你也试试吧！</p>'
});
//事件其实就是一些回调一样的东西，比如隐藏事件hidden，在提示层完全隐藏的时候会触发里面的处理逻辑
$(".js-btn-bottom").on('hidden.bs.popover', function () {
// 执行一些动作...
//这里面的this就是点击的按钮自身
alert(0);
})
↓ 查看全文
bootstrap popover用法和popover中文api由懒人建站收集整理，您可以自由传播，请主动带上本文链接
懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
- 上一篇：没有了
- 下一篇：没有了
bootstrap popover用法和popover中文api-最新评论