Bootstrap Popover 隐藏的Javasript方法
Bootstrap Popover是Bootstrap的弹出提示控件。我们可以通过data属性或者Javascript来调用该控件。data属性调用定制性较差这里就不细说了,我们讲一下Javascript来调用。
初始化
$().popover(options)
对于jQuery选择器选到的元素调用jQuery.fn.popover(options)完成初始化,options是一个对象可以包含以下属性:
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| animation | boolean | true | 是否开启CSS动画 |
| html | boolean | false | 是否允许内容为HTML代码,为false则将代码以文本方式显示 |
| placement | string | function | 'right' | 弹出提示相对于被选中元素的位置,可以使top | bottom | right | left 四个方向 |
| selector | string | false | 如果有selector,则弹出提示将是该特殊元素 |
| trigger | string | 'click' | 弹出提示在何时出现 - click | hover | focus | manual |
| title | string | function | '' | 标题 |
| content | string | function | '' | 提示内容 |
| delay | number | object | 0 |
延时显示/隐藏时间 对象结构为 |
| container | string | false | false |
将提示框放在特定的容器里 |
基本方法
.popover('show')
显示提示。
.popover('hide')
隐藏提示。
.popover('toggle')
显示/隐藏提示。
.popover('destroy')
销毁
更多需求
一般这些方法可以满足要求。
- 但是如果我们想对弹出提示写入HTML,并对里面的元素进行事件绑定,可能就出现问题了,因为文档没有告诉你怎么获得该弹出提示对象。
- 或者,如果我不想让该弹出提示弹出时候,除了销毁,我们也没有更好的办法,可是销毁后,想再次使用只能再次初始化……
- 又或者……
实际上Bootstrap有些隐藏的方法能满足我们的需求。
注:实际上很多方法可以使用类似于.popover('xxx')的方法调用,但某些需要获取其返回值得方法却不能使用,因为我们知道jQuery中的方法一般都会返回this,所以我们没法得到我们想要的东东。所以为了统一,我们推荐用下面的方法调用。
获取Popover对象
实际上,弹出提示是由内建的Popover对象管理的,jQuery.fn.popover方法只是调用Popover对象中的方法而已。所以首要是取出Popover对象供我们使用,而这一对象又在该元素的jQuery缓存中,我们可以这样取出:
$().data('popover');
例如:
var popoverObj = $('#element').data('popover');
然后我们就可以通过该对象的方法来完成我们想做的东西。
获取弹出提示对象
Popover.tip();
我们可以使用该方法返回jQuery包装后的弹出提示对象,然后进行事件绑定,例如:
popoverObj.tip().on('click', '#someElement', function(evt){
//do something...
})
使弹出提示有效或无效
利用Popover.enable() 和 Popover.disable() 方法可以很容易使弹出框生效或无效,而不是销毁他。
当然我们也可以用Popover.toggleEnabled() 方法来切换生效和无效状态。
Bootstrap Popover 隐藏的Javasript方法的更多相关文章
- Bootstrap历练实例:popover插件中的方法
方法 下面是一些弹出框(Popover)插件中有用的方法: 方法 描述 实例 Options: .popover(options) 向元素集合附加弹出框句柄. $().popover(options) ...
- Bootstrap Popover
[Bootstrap Popover] 1.设置一个popover需要添加以下设置: 1)data-toggle="popover" 2)title="Example p ...
- bootstrap插件学习-bootstrap.popover.js
先看bootstrap.popover.js的结构 var Popover = function ( element, options ){} //构造器 Popover.prototype = {} ...
- Bootstrap 提示工具(Tooltip)插件方法的用法
方法 下面是一些提示工具(Tooltip)插件中有用的方法: 方法 描述 实例 Options: .tooltip(options) 向元素集合附加提示工具句柄. $().tooltip(option ...
- Bootstrap popover源码分析
/* ======================================================================== * Bootstrap: popover.js ...
- 程氏CMS去掉静态页面的隐藏性版权方法
程氏CMS去掉静态页面的隐藏性版权方法 实例如图: 因为之前自己找了好久都没找到这俩代码写在那个文件夹的,经过跟csqq8讨论了也没有得到结果,今天突然发现,原来这些代码都经过base64加密,用加密 ...
- QF——UI之几种常用的隐藏键盘的方法
怎么在填写完UITextField之后,点击空白处,隐藏软键盘. 下面两个方法都可以隐藏键盘 [tf resignFirstResponder]; 停止textfield的第一响应者 [self.vi ...
- iOS 使用 UIMenuController 且不隐藏键盘的方法
iOS 使用 UIMenuController 且不隐藏键盘的方法 在键盘显示的时候使用 UIMenuController 弹出菜单,保持键盘显示且可输入的状态. 实现方法有 修改响应链(推荐) 遵循 ...
- css之隐藏内容的方法
css隐藏内容的方法有三种:即display:none.visibility:hidden.overflow:hidden. 1.display:none;的缺陷: 搜索引擎可能认为被隐藏的文字属于垃 ...
随机推荐
- 解决Clover在win 10下的兼容问题
周五闲的蛋疼,把系统升级到win10.周一早上过来,发现Clover 无法使用了,各种崩溃,查阅了官网,发现Clover确实只兼容到win8.网络上给出解决方案的确是用qttabbar,qttabba ...
- please verify the preference field with the prompt:Tomcat JDK name
使用MyEclipse的Tomcat的时候出现下面的问题: a configuration error occurred during startup. please ve ...
- 8个实用而有趣Bash命令提示行
很多人都对过命令行提示的重要性不屑一顾,甚至是一点都不关心.但是我却一点都不这么认为,一个好的命令行提示可以改变你使用命令的方式.为此,我在internet上找到一些非常实用,优秀,并有趣的bash的 ...
- Fiddler高级用法-抓取手机app数据包
在上一篇中介绍了Fiddler的基本使用方法.通过上一篇的操作我们可以直接抓取浏览器的数据包.但在APP测试中,我们需要抓取手机APP上的数据包,应该怎么操作呢? Andriod配置方法 1)确保手机 ...
- yml配置文件
1 yaml配置文件中是以空格来区分是否是同一层级.在键值对的冒号之后要有空格. 2 属性值:数值.字符串.bool 值,直接写即可.双引号会将特殊字符进行转义,例如:"nice \n go ...
- shiro 基本认知
1 shiro 的作用:安全.权限管理. 具有的功能:认证.授权.加密.会话管理.web集成.缓存 2 shiro 结构 3
- SpringBoot actuator 应用监控。
前言 : 今天在阅读 <SpringCloud微服务实战>一书时看到了SpringBoot actuator相关知识,并且自己也本地调试实践.觉得SpringBoot这一套监控还是挺有意思 ...
- Vue(二):调试神器vue-devtools安装和使用
前言 vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装. 安装 1.chrome商店直 ...
- asp.net mvc中的用户登录验证过滤器
在WEB项目中建立 类: public class LoginFilter : ActionFilterAttribute { public override voi ...
- IOS高访微信聊天对话界面(sizeWithFont:constrainedToSize和stretchableImageWithLeftCapWidth的使用)
大家好,百忙之中,抽出点空,写个微博,话说好久没写. 最近项目中有碰到写类似微信聊天界面上的效果,特整理了一下,写了一个小的Demo,希望给没头绪的同学们一个参考! 下载地址:http://files ...