0

ブートストラップ ポップオーバーに 2 つの列のデータを入れようとしています。私はそれを次のようにしたいと思います：

Name: crystal
Created On: 1/1/2000
Modified On: 1/31/2000
Owner: Bob

「:」の間にスペースを入れたいので、2段組みにしています。このポップオーバーは、カーソルを合わせると剣道グリッドに表示されます。そのグリッドの基本的なポップオーバーを次のように表示します。

$('a.hasPopover').popover({
                placement: 'bottom',
                content: '??????????????????',
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-no-title"></h3><div class="popover-content"><p></p></div></div></div>'
            });

この行のテンプレートでは、ポップオーバーとデータが接続されているかどうかを確認するために、もともとこれを持っていました。

詳細

これは機能します。ただし、各列に div を持ち、データを押し込むデータ コンテンツ テンプレートを作成する方法が (可能であっても) わかりません。これらすべての????があるフィールド、またはデータコンテンツを適切にフォーマットして2つの列を持つ方法。前もって感謝します！

4

2 に答える 2

1

テンプレートを使用することはできません。次のように、htmlオプションを true に設定し、html を data-content 属性に設定できます。

<a class="hasPopover" rel="popover" data-content="<div class='span1'>test:</div><div class='span1'>longer text gives a problem?</div><br><div class='span1'>test:</div><div class='span1'>value</div><br>">POPOVER</a>

JavaScript:

$('a.hasPopover').popover({
                placement: 'bottom',
                html : 'true',
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-no-title"></h3><div class="popover-content"><p></p></div></div></div>'
            });

これはうまくいきません。contentオプションを試してください。これを関数として使用して、次のような data-content 属性を操作できます。

            content : function(){ return $(this).attr('data-content').toUpperCase(); },
于 2013-05-28T07:43:09.930 に答える
0

実際にテンプレートを使用することは可能です。次に例を示します。

$('a.hasPopover').popover({
  placement: 'bottom',
  html: true,
  content: _.template('<h1><%= test %></h1>')({ test: 'Hello World '})
});
于 2016-08-29T23:06:14.783 に答える