弹出框 - AuxUI - 模块化前端UI框架

需要加载element模块，可通过下列方式加载

//加载模块
auxui(['element'], function (){

    //初始化
    $('[data-toggle="popover"]').popover();

    //加载后执行一些动作和事件处理
    
});

<button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="" data-content="演示内容" data-original-title="标题">点我弹出/隐藏弹出框</button>

4个弹出方向

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧内容">
    右侧
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部内容">
    顶部
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部内容">
    底部
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧内容">
    左侧
</button>

点击并让弹出框消失

通过使用 focus 触发器可以在用户点击弹出框是让其消失。

实现“点击并让弹出框消失”的效果需要一些额外的代码

为了更好的跨浏览器和跨平台效果，你必须使用 <a> 标签，不能使用 <button> 标签，并且，还必须包含 role="button" 和 tabindex属性。

<a tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="点击其他地方我会消失" data-original-title="标题">可消失的弹出框</a>

用法

通过 JavaScript 代码启动弹出框：

$('#example').popover(options)

参数

可以通过 data 属性或 JavaScript 传递参数。对于 data 属性，将参数名附着到 data- 后面，例如 data-animation=""。

名称	类型默认值	Data 属性名称	描述
animation	boolean 默认值：true	data-animation	为弹出框赋予淡出的 CSS 动画效果。
container	string \| false 默认值：false	data-container	向指定元素追加弹出框。实例： container: 'body'
content	string \| function 默认：''	data-content	数据内容
delay	number \| object 默认值：0	data-delay	延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示： delay: { "show": 500, "hide": 100 }
html	boolean 默认值：false	data-html	向弹出框插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement	string\|function 默认值：top	data-placement	规定如何定位弹出框（即 top\|bottom\|left\|right\|auto）。当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 "auto left"，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector	string 默认值：false	data-selector	如果提供了一个选择器，弹出框对象将被委派到指定的目标。
template	string	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'`	html模板
title	string \| function 默认值：''	data-title	如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger	string 默认值：'click'		定义如何触发弹出框： click\| hover \| focus \| manual。您可以传递多个触发器，每个触发器之间用空格分隔。
viewport	string \| object \| function 默认值：{ selector: 'body', padding: 0 }	data-viewport	将弹出框保持在元素的边界内。例子：`viewport: '#viewport'` or `{ "selector": "#viewport", "padding": 0 }`

方法

`$().popover(options)`

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

`.popover('show')`

显示元素的弹出框

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

`.popover('hide')`

隐藏元素的弹出框

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

`.popover('toggle')`

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

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

`.popover('destroy')`

隐藏并销毁元素的弹出框

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

事件

事件类型	描述
show.bs.popover	当调用 show 实例方法时立即触发该事件
shown.bs.popover	当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）
hide.bs.popover	当调用 hide 实例方法时立即触发该事件
hidden.bs.popover	当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。
inserted.bs.popover	这个事件是在 `show.bs.popover` 事件时，弹出模板已被添加到DOM。

$(document).on('hidden.bs.popover', '#myPopover',function (e) {
  console.log(e); 
})