web-dev-qa-db-ja.com

カスタムhtmlテンプレートでbootstrap popoverを機能させる

入力グループのテキストボックスを使用しており、Bootstrap 3ポップオーバーが必要です。ポップオーバーテンプレートは私が定義および設計する必要があります。

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

入力グループのアイコンがクリックされたときにポップオーバーを開くようにします。この場合、クラス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：

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

ここでフィドルを参照してください： http://www.bootply.com/4fMzxGRpik

誰でも私がやっている間違いとポップフーバーを表示するために何をする必要があるかを修正するのを手伝ってくれますか？.

jqueryhtmlcsstwitter-bootstrap-3
20
Maninder

ポップオーバーのコンテンツが欠落している場合、このようなものが必要になります

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

作業デモ

21
code-jaff

すべてのHTMLをテンプレートに含めることを希望します。こんなふうになります：

Javascriptの何か

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

そしてHTMLで

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

@ code-jaffは素晴らしい答えですが、Working Demoのポップオーバーがボタンから出てくるようには見えないことに気付きました。これが他の誰かに起こっている場合は、popoverオプションにcontainer： 'body'を追加してみてください。このような：

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