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 ...
随机推荐
- Eclipse导入到最新版Android Studio详解
说到使用AndroidStudio,除了新建的项目,我们都会面临的问题是原先Eclipse的代码该怎么导入到AndroidStudio中使用.这方面相关的资料还比较少,自己摸索了一下,总结出这篇博客, ...
- UVALive 2453 Wall (凸包)
题意:给你一个多边形的城堡(多个点),使用最短周长的城墙将这个城堡围起来并保证城墙的每个点到城堡上的每个点的距离都不小于l 题解:因为两点间的直线一定比折线短,所以这样做 先使用所有点求得一个凸包,接 ...
- JS隐形数据类型转换注意事项
alert('2'===2); //这个结果是false,首先三个等号要比较数据类型,字符串和整数不相等 alert('2'==2); //这个结果是true,因为是两个等号,所以不会比较数据类 ...
- 贝塞尔曲线(cubic bezier)
对于css3的Transitions,网上很多介绍,相信大家都比较了解,这里用最简单的方式介绍下: transition语法:transition:<transition-property> ...
- 20145223《信息安全系统设计基础》 GDB调试汇编堆栈过程分析
20145223<信息安全系统设计基础> GDB调试汇编堆栈过程分析 分析的c语言源码 生成汇编代码--命令:gcc -g example.c -o example -m32 进入gdb调 ...
- C# 完整List例子
C# List Following examples show how to create and manipulate with .NET strongly typed list List<T ...
- linux工具
sudo yum install yum-utils
- java-JDBC登录注册代码
登录: public static void main(String[] args) throws Exception{ Scanner sc = new Scanner(System.in); Sy ...
- 【noip 2016】 蚯蚓(earthworm)
100分程序,写了2天+1小时 →题目在这里← 大神就是厉害--写的程序居然看都看不懂,还有就是cena上过了但是luogu上一直是恶心的TLE 首先是考虑p=0时,数组大小开到了1100000,然后 ...
- 线程处理模型 由于 SynchronizationContext 引起的死锁问题解决
由于GUI 应用程序 不能使用线程池的线程更新UI,只能使用 GUI 线程更新,所以在 await 前后需要保证是同一个 GUI 线程 ASP.NET 程序 的线程处理客户端请求的时候,需要假定客户端 ...