0

我正在尝试将两列数据放在引导弹出窗口中。我希望它看起来像这样：

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

我想在“：”之间有空格，所以它是一个两列布局。此弹出框在悬停时显示在剑道网格中。我展示了该网格的基本弹出框：

$('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 并将数据推入。所以我想知道如何在任一内容中使用模板我拥有所有这些 ???? 的字段，或者如何正确格式化我的数据内容以具有两列。提前致谢！

4

2 回答 2

1

您不能使用模板。您可以将html选项设置为 true 并在 data-content 属性中设置您的 html，例如：

<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选项。您可以将其用作操作数据内容属性的函数，例如：

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