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类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
vue实现文字加密功能
2019/09/27 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
Python实现动态图解析、合成与倒放
2018/01/18 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
Python Django搭建网站流程图解
2020/06/13 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
生产现场工艺工程师岗位职责
2013/11/28 职场文书
小学教师办公室制度
2014/02/03 职场文书
经典洗发水广告词
2014/03/13 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS