jQuery 使用自定义 html 模板使 bootstrap popover 工作

Make bootstrap popover work with custom html template

提问by Maninder

I am using an input group textbox and I need the Bootstrap 3 popover to work and the popover template should be defined &n designed by me. So the html I have currently with me is :

我正在使用输入组文本框，我需要 Bootstrap 3 弹出框才能工作，弹出框模板应该由我定义和设计。所以我目前随身携带的 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>

I want a popover to open when the input group icon is click. In this case when the span with class glyphicon-time is clicked a popover is or displayed with the following HTML:

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

<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 written:

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

See the fiddle here: http://www.bootply.com/4fMzxGRpik

请参阅此处的小提琴：http: //www.bootply.com/4fMzxGRpik

Can anyone please help me correcting what mistake I am doing and what needs to be done to display a popvhover.

任何人都可以帮助我纠正我正在做的错误以及需要做什么才能显示 popvhover。

回答by code-jaff

you are missing the content of the popover, you'll need something like this

你错过了弹出框的内容，你需要这样的东西

$(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

工作演示

回答by MaoD

I would prefer to have all the HTML in templates. It goes like this:

我更喜欢在模板中包含所有 HTML。它是这样的：

Something in Javascript

Javascript 中的一些东西

$(".btn").popover({
   template: $("#selector").html(),
   placement: "auto"
});

And in HTML

在 HTML 中

<div id="selector">
    Anything you want in your popovers, either dynamic or static
<div>

回答by Alejandro Plaza

@code-jaff that is a great answer, but i noticed that the Working Demo's popover doesn't look like it's coming out of the button. If this is happening to anyone else, try adding container: 'body' to the popover options. Like this:

@code-jaff 这是一个很好的答案，但我注意到工作演示的弹出窗口看起来不像是从按钮中出来的。如果其他人发生这种情况，请尝试将 container: 'body' 添加到弹出窗口选项中。像这样：

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