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中几种去掉字串左右空格的方法
Dec 25 Javascript
javascript的对话框详解与参数
Mar 08 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 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的FTP学习(二)
2006/10/09 PHP
PHP无限分类(树形类)
2013/09/28 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
python保存字符串到文件的方法
2015/07/01 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
如何真正的了解python装饰器
2020/08/14 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
python爬虫如何解决图片验证码
2021/02/14 Python
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
外贸公司实习自我鉴定
2013/09/24 职场文书
力学专业毕业生自荐信
2013/11/17 职场文书
法律专业求职信
2014/05/24 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
北京导游词
2015/02/12 职场文书
教师继续教育反思周记
2015/06/25 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python