Bootstrap每天必学之弹出框(Popover)插件


Posted in Javascript onApril 25, 2016

Bootstrap弹出框插件,提供了一个扩展的视图,弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面。

弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充。该方法依赖于工具提示(tooltip)。

如果您想要单独引用该插件的功能,那么您需要引用 popover.js,它依赖于 工具提示(Tooltip)插件。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

一、用法

弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面。您可以有以下两种方式添加弹出框(popover):

通过 data 属性:如需添加一个弹出框(popover),只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框(popover)的文本。默认情况下,插件把弹出框(popover)设置在顶部。

<a href="#" data-toggle="popover" title="Example popover">
 请悬停在我的上面
</a>

通过 JavaScript:通过 JavaScript 启用弹出框(popover):
$('#identifier').popover(options)
弹出框(Popover)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的弹出框(popover):
$(function () { $("[data-toggle='popover']").popover(); });

二、实例

弹出框即点击一个元素弹出一个包含标题和内容的容器。

//基本用法

<button class="btn btn-lg btn-danger"
 type="button"
 data-toggle="popover"
 title="弹出框"
 data-content="这是一个弹出框插件">
 点击弹出/隐藏弹出框
</button>

//JavaScript 初始化

$('button').popover();

弹出框插件有很多属性来配置提示的显示,具体如下:

Bootstrap每天必学之弹出框(Popover)插件

$('button').popover({
 container : 'body',
 viewport : {
 selector : '#view',
 padding : 10,
 }
});

通过 JavaScript 执行的方法有四个。

//显示
$('button').popover('show');
//隐藏
$('button').popover('hide');
//反转显示和隐藏
$('button').popover('toggle');
//隐藏并销毁
$('button').popover('destroy');

Popover 插件中事件有四种:

 Bootstrap每天必学之弹出框(Popover)插件

//事件,其他雷同

$('button').on('show.bs.tab', function() {
 alert('调用 show 方法时触发!');
});

 以上就是本文的全部内容,希望对大家学习Bootstrap弹出框插件有所帮助。

Javascript 相关文章推荐
js 目录列举函数
Nov 06 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
Table冻结表头示例代码
Aug 20 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 #Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 #Javascript
第一章之初识Bootstrap
Apr 25 #Javascript
第二章之Bootstrap 页面排版样式
Apr 25 #Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 #Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 #Javascript
第四章之BootStrap表单与图片
Apr 25 #Javascript
You might like
php面向对象之反射功能与用法分析
2017/03/29 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Python 通配符删除文件的实例
2018/04/24 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
python如何制作英文字典
2019/06/25 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
python如何实现单链表的反转
2020/02/10 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
办公室前台岗位职责
2014/01/04 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
总账会计岗位职责
2014/03/13 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
2016年父亲节寄语
2015/12/04 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
一文搞懂php的垃圾回收机制
2021/06/18 PHP
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记
详解flex:1什么意思
2022/07/23 HTML / CSS