bootstrap中popover的使用方法记录

编辑:先生 日期:2017-06-28 浏览量:247 我要收藏

bootstrap中popover的使用方法记录

在bootstrap中的网站UI还是相当不错的,有时候需要使用点击后的状态返回弹出窗口。popover弹出窗口简单,方框不大;整理一下使用popover的记录。


1,在html中直接使用popover的效果,不需要交互的时候,可以这样。

<a tabindex="0" class="btn" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>


注意:官方有备注信息

可消失的弹出框效果时,为了更好的跨浏览器和跨平台效果,你必须使用 <a> 标签,不能使用 <button> 标签,并且,还必须包含 role="button" 和 tabindex 属性。


上面的参数挺多的,下面整理一下:

tabindex="0" 

class="btn" 

role="button"

上面这三个不多解释。

 data-toggle="popover" 

这个参数一般照写。


data-trigger="focus"

这个参数是指触发些效果的动作。

参数可以有click,hover,focus,manual

manual是指人工控制。


 title="Dismissible popover" 

是指弹出方框中的标题问题,可以为空。


data-content="And here's some amazing content. It's very engaging. Right?"

是指弹出方框中的内容部分。


备注:如果标题和内容都为空,不会产生效果。


在jquery中控制popover的触发与隐藏方法:

$(".class").popover('show')

$(".class").popover('hide')

还有几个监听popover的事件的方法:

$(".class").on('hidden.bs.popover',function(){

//code

})


五个事件分别是:

show.bs.popover

shown.bs.popover

hide.bs.popover

hidden.bs.popover

inserted.bs.popover


大概就这么多重点记录。

关键词: popover,

属分类: HtmlCssJs

1 0
留言:
登录  注册
三思而后言,谢谢。