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 相关文章推荐
JavaScript中两种链式调用实现代码
Jan 12 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 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实现的简单压缩英文字符串的代码
2008/04/24 PHP
php 一元分词算法
2009/11/30 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
办公室秘书自我鉴定
2014/01/18 职场文书
学习普通话的体会
2014/11/07 职场文书
庆六一开幕词
2015/01/29 职场文书
开幕式邀请函
2015/01/31 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
新闻报道稿范文
2015/07/23 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
SQL Server中使用表变量和临时表
2022/05/20 SQL Server