bootstrap里popover的相关属性、方法和事件原创 收藏


  • :
  • 04-13 21:44
  • :
  • 21次
  • :
  • 0条
  • 0赞

简介本文整理了bootstrap的popover组件的相关属性,方法及事件,通过本文可以让你快速的掌握bootstrap里popover的使用。

bootstrap里一款非常流行的css框架,站长现在做web都是用的这个,所以在使用bootstrap的时候,把会用到的一些内容做记录和整理是很有必要的,一是加深自己更深的了解,二也能帮助到其他的人。

本文站长就来整理一下bootstrap里popover组件的相关内容。

一:让自己的网页里可以使用popover组件的方法:

第一步:引入相应的JS文件,两种方案:

  1. 引入bootstrap.css 、bootstrap.js 及 Popover.js;

  2. 引入bootstrap.css 和 bootstrap.bundle.js;

站长一般用的是第二方案,一是因为CDN加速,二是只引入一个bootstrap.bundle.js后,就可以同时使用bootstrap里的其它组件:

<script language="JavaScript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript" src="//cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

第二步:配置编辑HTML:

//比如我们要在一个链接上,实现点击后弹出一个popover,就需要把它的HTML代码改成像下面这样:
<a data-toggle="popover" data-placement="top" title="popover" data-content="这里是内容">点我弹出popover</a>

属性里的data-placement 、data-content等都是对popover的一些属性上的设置,下面会有popover相关属性的介绍。

第三步:配置JS:

如果我们把相关的属性都像上面第二步那样配置在了HTML的标签属性里,那么就可以直接这样:

$("[data-toggle='popover']").popover();

我们也可以把一些对popover属性的设置写在js里:

$("[data-toggle='popover']").popover({placement:"top",html:true,trigger:"focus"});

到这里,我们就已经实现了在我们的web里使用popover组件的效果了,下面开始介绍popover的一些属性、方法和事件。

二:popover的相关属性(括号里的为在HTML里设置属性的名称):

1》animation (data-animation) :  设置popover里是否应用 CSS 褪色过渡效果

        默认值:true

2》html(data-html) : 是否允许向popover的内容里插入html

        默认值:false

3》placement(data-placement) : 设置popover的位置

        默认值:top

        取值范围:auto 、top 、left 、right 、bottom

        注意:

  1. 可以设置多个值,如:$("#ID").popover({placement:"auto left"}); 如果这样设置,表示popover会尽可能的显示在左边,不行的情况下才会显示在右边;

  2. 可以设置成function来动态定位,如:$("#ID").popover({placement:function(){return "top";}});

4》selector(data-selector) : 具体的含义下面再说,其它网站上的都不正确!!!

        默认值:false;

selector是用来选择绑定popover事件的对象,这样说,你可能不太明白,站长为了弄懂这个属性到底啥意思,真的是把搜索引擎都翻烂了,最后是在一个全英文的网站上找到了个实例,知道了它的用法,真难为我这个英语烂到渣的人了:

//为标签绑定popover,我们一般都是这样:
$("[data-toggle='popover']").popover();
//或者:
$("#ID").popover();
//而selector属性,为我们提供了一个新的方法:
$("body").popover({selector:"[data-toggle='popover']"});
//上面代码,站长已亲测!

5》title popover的标题,可以通过data-title来在HTML标签里设置,如果未设置则会直接读取title的值,如果没有就不显示,值可以通过function来动态设置

6》: trigger(data-trigger) : popover的触发事件,可设为多个值,中间有空间隔开

        默认值:hover focus ;

        可选的值有:click 、 hover 、 focus 、 manual

        *manual表示我们手动控制,就是通过JS来控制的意思。

7》delay(data-delay) :显示和隐藏的毫秒数,默认值为0

  1. 如果设为具体的数字,如:delay:300 表示延迟就应用在显示和隐藏上;

  2. 也可以用对象来分别设置显示和隐藏的延迟,如:delay:{show:400,hide:200}; 

8》: container(data-container) :设置popover追到到的位置,默认值为false;,如:

        a>:container:"body"  ,是把popover添加在body里;

        b>:container:"#ID" ,是把popover添加在#ID里。

9》template : 用来设置popover的HTLM模板,样式要参考:

<div class="popover" role="tooltip">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>

三:popover的相关方法:

1》: toggle :  $('#ID').popover('toggle')  切换popover的显示/隐藏的状态

2》: show $('#ID').popover('show') 显示

3》: hide $('#ID').popover('hide')  隐藏

4》destroy $('#ID').popover('destroy')  隐藏并删除

上面这四个方法,都非常简单!不再多作解释!

四:popoer的相关事件:

1》show.bs.popover当调用 show 实例方法时立即触发该事件

2》shown.bs.popover当弹出框对用户可见时触发该事件(也就是等待 CSS 过渡效果完成后);

3》hide.bs.popover当调用 hide 实例方法时立即触发该事件 ;

4》hidden.bs.popover当工具提示对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)

使用方法和实例:

$('#ID').on('shown.bs.popover',function () {
  // do something
})

好了,关于bootstrap里popover插件就介绍到这里了,希望能帮助到所有看到这篇文章的朋友们!



您正在找的文章可能是: