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 ...
随机推荐
- centos 研究
默认工具: yum , (Ubuntu: apt-get)
- 安卓手持智能POS端上能扫描开单的软件-店面销售开单系统
安卓移动POS终端上能扫描开单的软件: 一.登录验证,以业务员.密码登录: 二.订单列表,显示相关信息,包括日期.单据号.客户名.金额.单据状态.有新增订单及按特定条件查询订单的功能(日期.客户等). ...
- Java操作属性文件之工具类
最近空闲时间整理一下平时常用的一下工具类,重复造轮子实在是浪费时间,如果不正确或者有待改善的地方,欢迎指教... package com.hsuchan.business.utils; import ...
- Java并发编程基础--基本线程方法详解
什么是线程 线程是操作系统调度的最小单位,一个进程中可以有多个线程,这些线程可以各自的计数器,栈,局部变量,并且能够访问共享的内存变量.多线程的优势是可以提高响应时间和吞吐量. 使用多线程 一个进程正 ...
- C# 文件读写
1.文本文件读写 //读 FileStream fs = new FileStream(filepath, FileMode.Open, FileAccess.Read); StreamReader ...
- 网站开发网页广告条不显示,出现ERR_BLOCKED_BY_CLIENT
原因: 原因很简单,是因为被360浏览器的ad block给屏蔽掉了. 现象: 解决方案: 更换图片文件名,去掉ad,改成其他的字符.
- webpack 使用教程--实时刷新测试
学习webpack,基本始终是围绕: 1.如何安装webpack 2.如何使用webpack 3.如何使用loader 4.如何使用开发服务器 可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关 ...
- CODEVS1090 加分二叉树
codevs1090 加分二叉树 2003年NOIP全国联赛提高组 题目描述 Description 设一个n个节点的二叉树tree的中序遍历为(l,2,3,…,n),其中数字1,2,3,…,n为节点 ...
- 德国W家HIPP 奶粉有货播报:2014.7.8 HIPP 奶粉 1+ 4盒装有货啦!
德国W家HIPP 奶粉有货播报:2014.7.8 HIPP 奶粉 1+ 4盒装有货啦!
- ubuntu14.04 安装 hadoop2.4.0
转载:ubuntu搭建hadoop-Ver2.6.0完全分布式环境笔记 自己在搭建hadoop平台时,碰到一些困难,按照该博文解决了问题,转载一下,作为记录. 2 先决条件 确保在你集群中的每个节点上 ...