知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    bootstrap popover用法和popover中文api

    作者:佳明妈 来源:jquery插件 2015-10-26 人气:
    Bootstrap popover是Bootstrap3中的弹出提示层功能的插件,下面先来看popover提供的默认配置参数、方法和事件,在Bootstrap popover中文api后面会附上一些实例用法。

    Bootstrap popover中文api,通过 JavaScript 调用的。下表列出了这些选项:

    Bootstrap popover是Bootstrap3中的弹出提示层功能的插件,下面先来看popover提供的默认配置参数、方法和事件,在Bootstrap popover中文api后面会附上一些实例用法。

    Bootstrap popover的默认配置参数如下:

    选项名称 类型/默认值 Data 属性名称 描述
    animation boolean
    默认值:true
    data-animation 向弹出框应用 CSS 动画过渡效果。
    content 插入的内容 data-content 要向提示层中插入的内容,默认会把html标签直接显示出来,如果要解析html请把参数:html设为true,文章后面有例子
    html boolean
    默认值:false
    data-html 如果为true则向弹出框中插入 HTML、为 false则html标签不会被解析,直接显示了出来
    placement string|function
    默认值:top
    data-placement 弹出框定位方向(即 top|bottom|left|right|auto)。
    当指定为 auto 时,会动态调整弹出框。例如,如果 placement 是 "auto left",弹出框将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。
    selector string
    默认值:false
    data-selector 定位弹出提示层位于哪个dom节点上,也就是说,你点击一个目标其实是可以在另外一个dom对象上显示出弹出提示层的。
    title string | function
    默认值:''
    data-title 弹出提示层的title部分的内容,如果未指定 title 属性,则 title 选项是默认的 title 值。
    trigger string
    默认值:'hover focus'
    data-trigger 弹出框的触发事件: click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。如果设为focus 当按钮失去焦点提示层会消失,例如页面空白处单机提示层消失
    template string
    '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
      可以用这个自定义提示层的dom模板
    container string | false
    默认值:false
    data-container 向指定元素中追加弹出框,默认是弹出层结构追加到事件节点的后面。这会用在,你的结构中有太多的超出隐藏的时候弹出提示层可能会被挡住,这个时候就比如:
    实例: container: 'body'
    delay number | object
    默认值:0
    data-delay 延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:
    delay:{ show: 500, hide: 100 }
    viewport

    string | object | function

    { selector: 'body', padding: 0 }

      始终位于某个视窗可视范围内 { "selector": "#viewport", "padding": 0 } 用在有视窗区域有滚动条 情况

    Bootstrap popover的默认javascript如下:

    方法 描述 实例
    Options:.popover(options) 向元素集合附加弹出框句柄。
    如:var myPopover = $().popover(options)
    Toggle:.popover('toggle') 切换显示/隐藏元素的弹出框。
    $('#element').popover('toggle')
    Show:.popover('show') 显示元素的弹出框。
    $('#element').popover('show')
    Hide:.popover('hide') 隐藏元素的弹出框。
    $('#element').popover('hide')
    Destroy:.popover('destroy') 隐藏并销毁元素的弹出框。
    $('#element').popover('destroy')

    Bootstrap popover弹出层提供的事件如下(主要是做一些回调之类事情):

    事件 描述 实例
    show.bs.popover 当调用 show 实例方法时立即触发该事件。
    $('#mypopover').on('show.bs.popover', function () {
    // 执行一些动作...
    })
    
    shown.bs.popover 当弹出框对完全弹出时触发该事件(将等待 CSS 过渡效果完成)。
    $('#mypopover').on('shown.bs.popover', function () {
    // 执行一些动作...
    })
    
    hide.bs.popover 当调用 hide 实例方法时立即触发该事件。
    $('#mypopover').on('hide.bs.popover', function () {
    // 执行一些动作...
    })
    
    hidden.bs.popover 当工具提示完全隐藏时触发该事件(将等待 CSS 过渡效果完成)。
        $('#mypopover').on('hidden.bs.popover', function () {
            // 执行一些动作...
        })
    

    Bootstrap popover调用示例如下:

    //简单调用
    $(".js-btn-top").popover({
        placement:"top",    //定位方向
        title:"懒人建站-jquery插件",  //如果不需要标题就不要配置这个选项
        content:"内容:懒人建站"
    });
    
    //html:true会解析html标签
    $(".js-btn-bottom").popover({
        trigger:"focus",    //如果设为focus 当按钮失去焦点提示层会消失,例如页面空白处单机提示层消失
        placement:"bottom",
        html:true,
        content:'<p style="width: 500px;">html:true会解析html标签哦,<a href="http://www.51xuediannao.com/" target="_blank">懒人建站</a></p><p>你也试试吧!</p>'
    }); 
    
    //事件其实就是一些回调一样的东西,比如隐藏事件hidden,在提示层完全隐藏的时候会触发里面的处理逻辑
    $(".js-btn-bottom").on('hidden.bs.popover', function () {
       // 执行一些动作...
       //这里面的this就是点击的按钮自身
       alert(0);
    })
    
    ↓ 查看全文

    bootstrap popover用法和popover中文api由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    • 上一篇:没有了
    • 下一篇:没有了

    bootstrap popover用法和popover中文api-最新评论