jquery - 使Bootstrap Popover与自定义HTML模板一起使用

我正在使用输入组文本框，并且需要Bootstrap 3 pop 框才能工作，并且 pop 框模板应由我定义＆n设计。
因此，我目前拥有的html是:

<div class="row">
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="form-control jq-timePicker" value="09:30">
                <span class="input-group-addon" rel="popover">
                    <span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
</div>

我希望单击输入组图标时打开一个 pop 窗口。在这种情况下，当单击带有glyphicon-time类的跨度时，将使用以下HTML或显示一个 pop 窗口:

<div class="timePickerWrapper popover">
            <div class="arrow"></div>
            <div class="popover-content">
                <div class="timePickerCanvas"></div>
                <div class="timePickerClock timePickerHours"></div>
                <div class="timePickerClock timePickerMinutes"></div>
            </div>
        </div>

JS写道:

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


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

在这里看到 fiddle :http://www.bootply.com/4fMzxGRpik

谁能帮我纠正我正在做的错误以及显示popvhover时需要做的事情。

最佳答案

您缺少 pop 框的内容，您将需要以下内容

$(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
    });
});

Working demo

关于jquery - 使Bootstrap Popover与自定义HTML模板一起使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24580262/