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 相关文章推荐
jQuery的:parent选择器定义和用法
Jul 01 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
对比分析json及XML
Nov 28 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
js实现文字选中分享功能
Jan 25 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
JQuery循环滚动图片代码
2011/12/08 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
Python中super的用法实例
2015/05/28 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
python实现kMeans算法
2017/12/21 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
python使用tornado实现登录和登出
2018/07/28 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
中青班党性分析材料
2014/02/16 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
八月一日观后感
2015/06/10 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL
Linux中如何安装并部署Redis
2022/04/18 Servers