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. android在不加载图片的前提下获得图片的宽高

    public static int[] getImageWidthHeight(String path){ BitmapFactory.Options options = new BitmapFact ...

  2. Python读文本文件中文乱问题

    file_object = open('thefile.txt')try: all_the_text = file_object.read().decode("gb2312")fi ...

  3. Oracle 12C -- clone a non-cdb as a pdb

    将non-CDB置为只读模式: $ sqlplus '/as sysdba' SQL> select name, decode(cdb, 'YES', 'Multitenant Option e ...

  4. 图床神器:七牛云 + Mpic + FScapture

    概述 最近在搞Markdown的东西,遇到了一个很棘手的问题,即图片的显示:通用的图片,可以直接网上搜索,但有时候需要自己截一些图或者对下载的图片进行修改,在本地存储完全没有问题,但Markdown写 ...

  5. MySQL设置从库只读模式

    常见现象 运维工作中会经常维护MySQL主从服务器,当然Slave我们只是用于读操作. 一般权限开通也只授权只读账号,但是有时候维护工作可能不是一个人在做,你不能保证其他同事都按照这个标准操作. 有同 ...

  6. IDEA快捷键收集

    生成set 和get方法 .生产重写方法Alt+Insert 查看类的所有方法alt + 7 去掉多余的引用包alt + ctrl + O ctrl + alt + t 生成try 语句 自动导入包 ...

  7. Talend open studio如何调试代码

    Talend将设计的模型直接生成了java代码,可以直接对模型生成的java代码进行调试,排查问题比kettle灵活很多, 设计的模型如下: 生成的代码如下: 点击 Java Debug进入调试模式, ...

  8. javaweb下载文件

    //读取文件->写出文件 public static void main(String[] args) { InputStream in =null; OutputStream out = nu ...

  9. Android 架构师技能图谱(转载)

    架构与设计 设计模式 重构 技术选型 特性 可用性 性能 包大小 方法数 文档 技术支持 UI架构模式 MVC MVP MVVM 研发工具 集成开发环境 Android Studio Sublime ...

  10. golang gc 优化思路以及实例分析

    一个即将上线的go 写的高频服务,压测的时候发现 gc 特别高,高到10%-15% 左右了,本文记录下优化 gc 的过程和和思路.线上环境1.10. 首先,查看gc 是否有异常,我们可以使用 gctr ...