bootstrap-popover的配置与灵活应用
首先罗列一下配置参数:
1、animation true/false 是否动画
2、placement 'right'/'left'/top/bottom/function(){return 'right'} 弹出提示的位置
3、selector 目标对象
4、trigger 'hover'/'click'... 触发方式
5、title 标题 如果元素没有指定data-original-title属性,则使用这个默认值
6、content 内容 如果元素没有指定data-content属性,则使用这个默认值
7、delay 显示和隐藏的时间 20/{show:200,hide:300}
然后列举一下,我们日常开发中会遇到的问题:
1、如果我要默认为鼠标点击触发事件如何处理?
$('a').popover({
trigger : 'click'
});
2、如果我要点击非目标对象关闭提示层怎么办?
说明:每个提示会生成一个class为popover的div容器,因此只需要在body上绑定一个click事件实现对class为popover的div销毁即可。值得注意的是,目标对象的click事件的冒泡要取消掉。
(function(){
$body.find('.popovers').each(function(){
$(this).click(function(e){
$('.popover').remove();
e.preventDefault();
return false;
});
$(this).popover({
trigger : 'click'
});
});
$body.click(function(){
$('.popover').remove();
});
})();
bootstrap-popover的配置与灵活应用的更多相关文章
- 气泡 弹出 bootstrap-popover的配置与灵活应用
<script src="/assets/addons/bootstrap-select/bootstrap-select.min.js"></script> ...
- Bootstrap popover弹出框
popover被挤压.遮挡的问题: 弹出框显示的时候如果贴近一个列的边沿,就会很窄或被遮挡,解决起来很简单,只需在初始化的时候添加一个container属性就可以了: $(function (){ $ ...
- bootstrap插件学习-bootstrap.popover.js
先看bootstrap.popover.js的结构 var Popover = function ( element, options ){} //构造器 Popover.prototype = {} ...
- Bootstrap Popover
[Bootstrap Popover] 1.设置一个popover需要添加以下设置: 1)data-toggle="popover" 2)title="Example p ...
- Bootstrap Popover 隐藏的Javasript方法
Bootstrap Popover是Bootstrap的弹出提示控件.我们可以通过data属性或者Javascript来调用该控件.data属性调用定制性较差这里就不细说了,我们讲一下Javascri ...
- 更改BootStrap popover的默认样式
.popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padd ...
- Bootstrap popover源码分析
/* ======================================================================== * Bootstrap: popover.js ...
- bootstrap table--面相配置、hook、适配的表格框架
bootstrap table--面相配置.hook.适配的表格框架
- Bootstrap Popover(弹出框)弹出自定义格式代码
HEAD 标签之间引入CSS:<link href="../../../public/css/bootstrap.min.css" rel="stylesheet& ...
- bootstrap popover 如何在hover状态移动到弹出上不消失
bootstrap中的popover其实就是对tooltip做了一定升级,拥有了标题和内容 概要 使用的时候依赖第三方插件 依赖tooltip插件 必须初始化 title 和 content 可以在p ...
随机推荐
- 【大数据技巧】日均2TB日志数据在线快速处理之法
[大数据技巧]日均2TB日志数据在线快速处理之法 http://click.aliyun.com/m/8958/
- 第四章 springboot + swagger
http://www.cnblogs.com/java-zhao/p/5348113.html
- 并查集+树链剖分+线段树 HDOJ 5458 Stability(稳定性)
题目链接 题意: 有n个点m条边的无向图,有环还有重边,a到b的稳定性的定义是有多少条边,单独删去会使a和b不连通.有两种操作: 1. 删去a到b的一条边 2. 询问a到b的稳定性 思路: 首先删边考 ...
- SparkLauncher 1.6 版本bug
背景 近期在研究使用java api的方式来调用Spark程序,通过句柄的方式来完成监控Job运行状态.及时杀死Job等功能.官方文档直接指出使用Java/Scala创建Job的方式——利用Spark ...
- 2016-2-1 Servlet细节
Servlet的一些细节(韩顺平老师视频讲解)(1)由于客户端是通过URL地址访问web服务器中的资源,所以Servlet程序想要被外界访问,必须把servlet程序映射到一个URL地址上.这个工作在 ...
- 未能加载文件或程序集“Microsoft.ReportViewer.WinForms 解决办法
异常信息: 未能加载文件或程序集“Microsoft.ReportViewer.WinForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken= ...
- VB6与VB.NET对照表
VB6与VB.NET对照表 VB6.0 VB.NET AddItem Object名.AddItem Object名.Items.Add ListBox1.Items.Add ComboBox1.It ...
- excel使用总结
单元格拆分:选中列-->数据-->分列 常用函数: clean 清除文本中不能打印的字符 countif,countifs,在指定区域中按指定条件对单元格进行计数(单条件计数,多条件计数) ...
- HDU 2087 KMP模板题
1.HDU 2087 2.题意:一个主串,一个子串,求子串在主串里出现了几次. 3.总结:看了题解,还是不太懂.. //#include<iostream>#include<cmat ...
- [转]FINDSTR正则表达式小结
前言:最近写了一个bat用于快速编译swf至目标目录,想利用FINDSTR命令通过匹配目标目录名称,匹配数量大概600多个,发现匹配耗时比较久,大概花费10余秒,因此还是放弃字符匹配,乖乖拼出全称来定 ...