popover插件
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
HTML
SCSS
CSS
JS
<button type="button" class="hui-btn hui-btn-primary radius" title="标题" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容">左侧的 Popover</button> <button type="button" class="hui-btn hui-btn-primary radius" title="标题" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容">顶部的 Popover</button> <button type="button" class="hui-btn hui-btn-primary radius" title="标题" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容">底部的 Popover</button> <button type="button" class="hui-btn hui-btn-primary radius" title="标题" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容">右侧的 Popover</button>
@mixin transform($v) { transform: $v; } @mixin borderRadius($v) { -ms-border-radius: &v; border-radius: $v; } .popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padding: 1px; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: left; white-space: normal; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .2); @include borderRadius(6px); @include boxShadow(0 5px 10px rgba(0, 0, 0, .2)); >.arrow, >.arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } >.arrow { border-width: 11px; &:after { content: ""; border-width: 10px; } } .popover-title { padding: 8px 14px; margin: 0; font-size: 14px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; @include borderRadius(5px 5px 0 0); } .popover-content { padding: 9px 14px; } &.top { margin-top: -10px; >.arrow { bottom: -11px; left: 50%; margin-left: -11px; border-top-color: #999; border-top-color: rgba(0, 0, 0, .25); border-bottom-width: 0; &:after { bottom: 1px; margin-left: -10px; content: " "; border-top-color: #fff; border-bottom-width: 0; } } } &.right { margin-left: 10px; >.arrow { top: 50%; left: -11px; margin-top: -11px; border-right-color: #999; border-right-color: rgba(0, 0, 0, .25); border-left-width: 0; &:after { bottom: -10px; left: 1px; content: " "; border-right-color: #fff; border-left-width: 0; } } } &.bottom { margin-top: 10px; >.arrow { top: -11px; left: 50%; margin-left: -11px; border-top-width: 0; border-bottom-color: #999; border-bottom-color: rgba(0, 0, 0, .25); &:after { top: 1px; margin-left: -10px; content: " "; border-top-width: 0; border-bottom-color: #fff; } } } &.left { margin-left: -10px; >.arrow { top: 50%; right: -11px; margin-top: -11px; border-right-width: 0; border-left-color: #999; border-left-color: rgba(0, 0, 0, .25); &:after { right: 1px; bottom: -10px; content: " "; border-right-width: 0; border-left-color: #fff; } } } }
.popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padding: 1px; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: left; white-space: normal; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .popover > .arrow, .popover > .arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } .popover > .arrow { border-width: 11px; } .popover > .arrow:after { content: ""; border-width: 10px; } .popover .popover-title { padding: 8px 14px; margin: 0; font-size: 14px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; } .popover .popover-content { padding: 9px 14px; } .popover.top { margin-top: -10px; } .popover.top > .arrow { bottom: -11px; left: 50%; margin-left: -11px; border-top-color: #999; border-top-color: rgba(0, 0, 0, 0.25); border-bottom-width: 0; } .popover.top > .arrow:after { bottom: 1px; margin-left: -10px; content: " "; border-top-color: #fff; border-bottom-width: 0; } .popover.right { margin-left: 10px; } .popover.right > .arrow { top: 50%; left: -11px; margin-top: -11px; border-right-color: #999; border-right-color: rgba(0, 0, 0, 0.25); border-left-width: 0; } .popover.right > .arrow:after { bottom: -10px; left: 1px; content: " "; border-right-color: #fff; border-left-width: 0; } .popover.bottom { margin-top: 10px; } .popover.bottom > .arrow { top: -11px; left: 50%; margin-left: -11px; border-top-width: 0; border-bottom-color: #999; border-bottom-color: rgba(0, 0, 0, 0.25); } .popover.bottom > .arrow:after { top: 1px; margin-left: -10px; content: " "; border-top-width: 0; border-bottom-color: #fff; } .popover.left { margin-left: -10px; } .popover.left > .arrow { top: 50%; right: -11px; margin-top: -11px; border-right-width: 0; border-left-color: #999; border-left-color: rgba(0, 0, 0, 0.25); } .popover.left > .arrow:after { right: 1px; bottom: -10px; content: " "; border-right-width: 0; border-left-color: #fff; }
用法很简单,只需要在标签添加 data-toggle="popover" title="提示标题" data-content="提示内容" data-placement="left|top|bottom|right" 这两个属性即可,然后通过$(function () { $("[data-toggle='popover']").popover()}); 激活popover工具。
调用参数
选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
---|---|---|---|
animation | boolean 默认值:true |
data-animation | 向弹出框应用 CSS 褪色过渡效果。 |
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 | 如果提供了一个选择器,弹出框对象将被委派到指定的目标。 |
title | string | function 默认值:'' |
data-title | 如果未指定 title 属性,则 title 选项是默认的 title 值。 |
trigger | string 默认值:'hover focus' |
data-trigger | 定义如何触发弹出框: click| hover | focus | manual 。您可以传递多个触发器,每个触发器之间用空格分隔。 |
delay | number | object 默认值:0 |
data-delay | 延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:
delay: { show: 500, hide: 100 } |
container | string | false 默认值:false |
data-container | 向指定元素追加弹出框。 实例: container: 'body' |
方法
方法 | 描述 | 实例 |
---|---|---|
Options: .popover(options) | 向元素集合附加弹出框句柄。 | $().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') |
事件
事件 | 描述 | 实例 |
---|---|---|
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 () { // 执行一些动作... }) |