zoukankan      html  css  js  c++  java
  • 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

    延时显示/隐藏时间

    对象结构为 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() 方法来切换生效和无效状态。

  • 相关阅读:
    cookie标准话
    thinkphp关联查询
    jq获取表单值与赋值代码
    Github使用.gitignore文件忽略不必要上传的文件 (转)
    python 库 Numpy 中如何求取向量范数 np.linalg.norm(求范数)(向量的第二范数为传统意义上的向量长度),(如何求取向量的单位向量)
    word 使用中 上标符号的实现
    python 编程中的一个关于图片的库 imageio (读取照片RGB内容,转换照片格式)
    交叉熵代价函数(作用及公式推导) ------转载
    cousera 深度学习 吴恩达 第一课 第二周 学习率对优化结果的影响
    python3 读入一个jpg格式的图片,并转换长宽像素个数,然后进行绘制
  • 原文地址:https://www.cnblogs.com/justany/p/3181128.html
Copyright © 2011-2022 走看看