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 ...
随机推荐
- wpf 切换资源字典的2中方式
var _1200RDUri = new Uri(String.Format(@"/aa;Component/Themes/1200Theme.xaml"), UriKind.Re ...
- 通过 listboxitem 查找属于listbox第几条数据
public override System.Windows.Style SelectStyle(object item, System.Windows.DependencyObject contai ...
- python+Eclipse+pydev环境搭建
python+Eclipse+pydev环境搭建 本文重点介绍使用Eclipse+pydev插件来写Python代码, 以及在Mac上配置Eclipse+Pydev 和Windows配置Ecli ...
- log4j使用--http://www.cnblogs.com/eflylab/archive/2007/01/11/618001.html
package log4jTest.com; import java.io.FileReader; import org.apache.log4j.BasicConfigurator; import ...
- 线程和线程池的理解与java简单例子
1.线程 (1)理解,线程是系统分配处理器时间资源的基本单元也是系统调用的基本单位,简单理解就是一个或多个线程组成了一个进程,进程就像爸爸,线程就像儿子,有时候爸爸一个人干不了活就生了几个儿子干活,会 ...
- 51Nod 1010 只包含因子2 3 5的数 Label:None
K的因子中只包含2 3 5.满足条件的前10个数是:2,3,4,5,6,8,9,10,12,15. 所有这样的K组成了一个序列S,现在给出一个数n,求S中 >= 给定数的最小的数. 例如:n = ...
- 数论 - Moon Game
Fat brother and Maze are playing a kind of special (hentai) game in the clearly blue sky which we ca ...
- 【BZOJ】3996: [TJOI2015]线性代数
题意 给出一个\(N \times N\)的矩阵\(B\)和一个\(1 \times N\)的矩阵\(C\).求出一个\(1 \times N\)的01矩阵\(A\),使得\[ D = ( A * B ...
- Android -- PopupWindow(其中嵌套ListView 可以被点击)
1. 效果图
- Odoo 二次开发教程(四)-只读、唯一性验证和ORM方法介绍
一.只读和唯一性验证 只读的设置有两种方法,一种是实在字段定义时设置为只读,第二种是在页面视图中进行设置. 接前例,我们将学生(tech.student)的名字name字段设置成只读. 方法一:字段定 ...