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 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
简单实现js倒计时功能
Feb 13 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
vue实现文件上传读取及下载功能
Nov 17 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
JS图片预加载三种实现方法解析
May 08 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
基于mysql的论坛(3)
2006/10/09 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
学习Node.js模块机制
2016/10/17 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
简单实现python数独游戏
2018/03/30 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
django创建简单的页面响应实例教程
2019/09/06 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
学用政策心得体会
2014/09/10 职场文书
亮剑观后感600字
2015/06/05 职场文书
出生证明范本
2015/06/15 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书