zoukankan      html  css  js  c++  java
  • 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();
        });
    })();
  • 相关阅读:
    IOS手机 html5页面 数字变成蓝色链接的原因
    html5预加载图片的写法
    jquery取消绑定的方法
    CSS3幸运大转盘最简单的写法
    深度搜索应用之黑白图像(非递归)
    springday03-go1
    springday02-go4
    spring day02-go3
    springday02-go2
    spring da-y02-go1
  • 原文地址:https://www.cnblogs.com/tyhmj/p/3288551.html
Copyright © 2011-2022 走看看