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

延时显示/隐藏时间

对象结构为 delay: { show: 500, hide: 100 }

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方法的更多相关文章

  1. Bootstrap历练实例:popover插件中的方法

    方法 下面是一些弹出框(Popover)插件中有用的方法: 方法 描述 实例 Options: .popover(options) 向元素集合附加弹出框句柄. $().popover(options) ...

  2. Bootstrap Popover

    [Bootstrap Popover] 1.设置一个popover需要添加以下设置: 1)data-toggle="popover" 2)title="Example p ...

  3. bootstrap插件学习-bootstrap.popover.js

    先看bootstrap.popover.js的结构 var Popover = function ( element, options ){} //构造器 Popover.prototype = {} ...

  4. Bootstrap 提示工具(Tooltip)插件方法的用法

    方法 下面是一些提示工具(Tooltip)插件中有用的方法: 方法 描述 实例 Options: .tooltip(options) 向元素集合附加提示工具句柄. $().tooltip(option ...

  5. Bootstrap popover源码分析

    /* ======================================================================== * Bootstrap: popover.js ...

  6. 程氏CMS去掉静态页面的隐藏性版权方法

    程氏CMS去掉静态页面的隐藏性版权方法 实例如图: 因为之前自己找了好久都没找到这俩代码写在那个文件夹的,经过跟csqq8讨论了也没有得到结果,今天突然发现,原来这些代码都经过base64加密,用加密 ...

  7. QF——UI之几种常用的隐藏键盘的方法

    怎么在填写完UITextField之后,点击空白处,隐藏软键盘. 下面两个方法都可以隐藏键盘 [tf resignFirstResponder]; 停止textfield的第一响应者 [self.vi ...

  8. iOS 使用 UIMenuController 且不隐藏键盘的方法

    iOS 使用 UIMenuController 且不隐藏键盘的方法 在键盘显示的时候使用 UIMenuController 弹出菜单,保持键盘显示且可输入的状态. 实现方法有 修改响应链(推荐) 遵循 ...

  9. css之隐藏内容的方法

    css隐藏内容的方法有三种:即display:none.visibility:hidden.overflow:hidden. 1.display:none;的缺陷: 搜索引擎可能认为被隐藏的文字属于垃 ...

随机推荐

  1. is-a,has-a,like-a是什么 sql server中,N''表示什么意思? 关于SQL SERVER的N前缀的理解

    https://blog.csdn.net/ooppookid/article/details/51174122#commentBox 1.is-a,has-a,like-a是什么 在面向对象设计的领 ...

  2. org.hibernate.exception.ConstraintViolationException: could not insert:

    org.hibernate.exception.ConstraintViolationException: could not insert: 报错原由于xxx.hbm.xml文件里的主键类型设置有问 ...

  3. Loader Lock引起的一个Bug

    在Windows中,让程序模块化实现的一种方式,就是让事实上现为动态链接库. 然后在主程序启动的时候隐式或者显示的去载入动态链接库.可是假设不恰当的编写动态链接库的DllMain函数,将会引起意想不到 ...

  4. WSAAsyncSelect模型触发不了FD_Close消息?

    原帖链接: http://bbs.csdn.net/topics/330164174 楼主: Server用WSAAsyncSelect模型,Client关闭程序时(不进行shutdown与close ...

  5. MySQL 忘记root密码的两种处理方法

    [背景] 由于各个原因,我遇到过不只一次我服务的客户忘记了MySQL的root密码:如果是普通用户还好,我们可以用root用户去改它的密码,要命 的是把root给丢了! 对于MySQL来说如果你忘记了 ...

  6. cent os 6.5+ambari+HDP集群安装

    1. 搭建一个测试集群,集群有4台机器,配置集群中每一台机器的/etc/hosts文件: [root@nn .ssh]# cat /etc/hosts 127.0.0.1 localhost loca ...

  7. Processing支持中文显示

    Processing 默认不支持中文,中文显示成框框,我使用的版本是:2.2.1,进行如下设置,并且重启processing就可以支持中文了: 可以看到中文了:

  8. IOS 项目的瘦身工具

    http://maniacdev.com/2014/01/tool-a-ruby-gem-allowing-you-to-quickly-find-and-remove-unused-imports- ...

  9. 奶瓶(beini)破解无线密码流程:安装、抓包、从虚拟机(VMware)拷贝握手包(拷贝到硬盘、U盘)、跑包

    1. 环境 1). Windows 7 64位版本 2). VMware 9.0.2版本 3). 奶瓶1.2.3版本(beini-1.2.3.iso) 2. 安装 2.1 安装方式一 将beini-1 ...

  10. jQuery CSS()方法改变CSS样式实例解析

    转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一 ...