8.7.3 弹出框支持的属性
8.7.3 弹出框支持的属性
当使用data-*属性定义弹出框时,Bootstrap 除了提供了data-toggle、data-placenment、data-content属性之外,Bootstrap还为弹出框提供了大量其他支持属性,下面分别介绍它们。
Bootstrap为弹出框提供的属性
| 属性 | 描述 |
|---|---|
data-animation |
boolean属性，用于指定是否对弹出框应用.fade过渡效果。 |
data-container |
指定将弹出框附加到特定元素上，该属性支持各种选择器或false值，false值表示不附加。比如container:'body'表明将弹出框附加到页面<body>元素上。 |
data-content |
指定弹出框的内容。 |
data-delay |
指定延迟多少毫秒后显示或关闭弹出框；该属性支持简单数值或形如{'show':500,'hide':200}的对象，该对象指定延迟500毫秒显示弹出框，延迟200毫秒关闭弹出框。 |
data-html |
指定是否将HTML代码直接转换为弹出框。该属性默认为false，Bootstrap先使用text()方法处理工具提示内容，然后再添加弹出框。 |
data-placement |
指定弹出框的出现位置。该属性的默认值是'right'。 |
data-selector |
如果指定了该属性,那么弹出框将会由该属性表示的HTML元素负责代理。 |
data-template |
指定弹出框的HTML模板,该属性的默认值是Bootstrap提供的HTML模板。 |
data-title |
设置默认的弹出框的标题。当title属性不存在或属性值为空时,该属性才会发挥作用。 |
data-trigger |
设置触发弹出框的方法,可选值为click、hover、focus、manual,该属性的默认值是click—这意味着需要通过鼠标单击来触发弹出框。该属性还支持多个属性值的组合。比如`click |
popover方法参数
使用JS激活弹出框时要调用弹出框的popover()方法,调用该方法时可传入如下参数。
- 字符串参数:该字符串参数支持
'show'、'hide'、'toggle'和'destroy'等字符串,分别表示显示弹出框、隐藏弹出框、切换弹出框的显示/隐藏、销毁弹出框。如果调用popover()方法时传入了'destroy'字符串,那就意味着要销毁该弹出框,因此页面以后再也不会显示该弹出框。 - JS对象参数:该JS对象支持上面介绍的以
data-开头的各种选择,只是无须使用data-前缀。在前面示例中激活弹出框时就传入了{html:true}对象作为参数