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();
        });
    })();
  • 相关阅读:
    Git checkout on a remote branch does not work
    制作ubuntu U盘安装盘
    Angular 2.0 和 1.x比较
    图文浅谈css3
    前后端数据交互方法
    CSS实现响应式全屏背景图
    html5图片高度自适应解决方法
    2014年最后100天,想说点啥。
    js常用代码
    html5+css3开发总结
  • 原文地址:https://www.cnblogs.com/tyhmj/p/3288551.html
Copyright © 2011-2022 走看看