Bootstrap JavaScript插件:弹出框(popover.js)

简介: Bootstrap 框架

作者:WangMin
格言:努力做好自己喜欢的每一件事

banner.png

  • 弹出提示(popover.js)是工具提示的子类,它比工具提示多了一个 content 参数,是工具提示插件的拓展,并且弹出框依赖于工具提示插件tooltip.js,如果你定制了 Bootstrap,就一定要将依赖的插件编译进去。

  • 初始化。由于性能的原因,工具提示和弹出框的 data 编程接口(data api)是必须要手动初始化的。在一个页面上一次性初始化所有弹出框的方式是通过data-toggle属性选中他们:

$(function () {
   
   
    $('[data-toggle="popover"]').popover();
})

你也可以单独初始化某个元素上的弹出提示对象。比如,以下代码就只激活 a标签的链接元素上定义的弹出提示:

<a href="#" data-toggle="popover" title="Hello" data-content="Hi, Long time no see, how are you?">Say Hello</a>
$(function(){
   
   
    $('a').popover();
})

与工具提示不同的是,默认情况下,在鼠标单击链接时,才会显示工具提示。并且,弹出提示的默认位置在目标对象的右侧。运行效果如下:

1.png

通过 data-placement 属性,可以设置提示信息的显示位置,可选值有 top | bottom | left | right。如图所示:

2.png

  • 默认情况下,弹出提示一旦显示,就不会再隐藏。如果希望点击空白区域让弹出框消失,只需设置data-trigger="focus"属性即可。为了更好的跨浏览器和跨平台效果,你必须使用<a>标签,而不能使用<button>标签,并且,还必须包含role="button"tabindex属性。
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>

设置data-trigger="focus"属性以后,在链接上点击,会弹出提示信息,点击链接和提示框之外的空白区域,提示框便自动消失。


弹出提示插件的选项

Bootstrap为工具提示插件提供了 11 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置。

名称 类型 默认值 说明
animation boolean true 为工具提示应用CSS淡入淡出过渡效果
container string false false 将提示条附加到特定元素,如 container: 'body'
content string \ function '' 如果data-content属性不存在,则使用这个默认值
delay number object 0 延迟显示和隐藏提示条的时间(毫秒)——手动触发提示条时无效如果只指定一个数值,则隐藏和显示都使用该数值。对象的结构为 delay: { show: 500, hide: 100 }
html boolean false 提示条支持插入 HTML。如果取值为 false,则使用 jQuery 的 text 方法插入文本。如果担心XSS攻击,那就使用文本
placement string function 'top' 设置提示条的位置,取值:top \ bottom \ left \ right
selector string false 如果提供了选择器,在触发该选择器时才显示提示信息
template string [1] 使用HTML面板创建工具提示。工具提示的title将被注入到.tooltip-inner中。.tooltip-arrow成为工具提示的箭头。最外层的包装元素应该拥有.tooltip类
title string function '' 如果title属性不存在,则使用默认值 '' 。要注意单引号与双引号的嵌套关系
trigger string 'hover focus' 工具提示的触发方式:click 、hover 、 focus 、manual。可以传入多个触发方式,以空格分隔。manual不能与其他触发方式组合使用
viewport string \ object \ function { selector: 'body', padding: 0 } 使工具提示始终在元素的边界之内。
表中 [1] 表示:
'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

因为弹出框是以工具提示为基础,它继承了工具提示的选项,并且多了'content'这个选项,如上表所示。
其使用选项的方式与工具提示一样,如下:

<a href="##" id="bird">小鸟</a>
$('#bird').popover({
   
   
    html: true,
    title: '<img src="../img/timg.jpg" width="200px" height="200px"/>',
    placement: 'bottom',
    delay: {
   
    show: 500, hide: 100 }
});

运行效果如下:
3.png


弹出提示插件的方法

1、.popover(options)
使用一个可选的对象参数 options调用某个页面元素的弹出提示。如:

$('某个元素').popover({
   
   
    html:true,
    title:'<p>一只小鸟</p> <img src="../img/timg.jpg" width="170px" height="170px"/>',
    placement:'bottom',
    delay:{
   
   show:500,hide:100}
})

2、.popover('show')
手动触发某个页面元素的弹出提示,如:

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

3、.popover('hide')
手动隐藏某个页面元素的弹出提示,如:

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

4、.popover('toggle')
手动打开或隐藏某个页面元素的弹出提示,如:

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

5、.popover('destroy')
手动隐藏并销毁某个页面元素的弹出提示。如:

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

弹出框插件的事件

事件 含义
show.bs.popover show方法调用之后,立即触发该事件。
shown.bs.popover 当工具提示已经对用户可见(并且过渡效果执行完毕)之后,触发该事件
hide.bs.popover hide方法调用之后,立即触发该事件
hidden.bs.popover 当工具提示已经被隐藏(并且过渡效果执行完毕)之后,触发该事件
inserted.bs.popover 当向DOM插入工具提示模板时,在模板插入完成并且show.bs.popover触发事件之后,触发该事件。
 $('#myTooltip').on('hidden.bs.popover', function () {
   
   
     alert("弹框已经隐藏。");
 });

就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
|
5月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
258 24
|
8月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
241 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
7月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
166 32
|
7月前
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
7月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
10月前
|
资源调度 前端开发 JavaScript
Bootstrap日期选择器插件bootstrap-datepicker
Bootstrap日期选择器插件bootstrap-datepicker
847 12
|
10月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象