引导弹出框 - 自定义字段答案

【问题标题】：bootstrap popover - custom fields引导弹出框 - 自定义字段
【发布时间】：2015-11-26 10:16:18
【问题描述】：

bootstrap popover 允许更改弹出窗口中使用的 html 模板。我想修改原来的模板：

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

到这样的事情：

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

这样，我可以在 javascript 的选项中显式传递页脚文本：

options = {
    title: "my title",
    content: "my content",
    footer: "my footer"
}

$(".popoverElement").popover(options);

我想做这样的事情的原因是我希望能够创建一堆不同的弹出窗口，其中只有一个部分（例如页脚）在各个弹出窗口之间发生变化。但引导程序不提供这种可能性。你知道我可以使用的解决方法吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap popover

【解决方案1】：

是的，它确实提供了一种自定义弹出框模板的方法，带有template 选项。

$(document).ready(function () {
    var popoverTemplate = ['<div class="timePickerWrapper popover">',
        '<div class="arrow"></div>',
        '<div class="popover-content">',
        '</div>',
        '</div>'].join('');

    var content = ['<div class="timePickerCanvas">asfaf asfsadf</div>',
        '<div class="timePickerClock timePickerHours">asdf asdfasf</div>',
        '<div class="timePickerClock timePickerMinutes"> asfa </div>', ].join('');


    $('body').popover({
        selector: '[rel=popover]',
        trigger: 'click',
        content: content,
        template: popoverTemplate,
        placement: "bottom",
        html: true
    });
});

查看https://stackoverflow.com/a/24586543/1151408

【讨论】：