如何在twitter bootstraps popover中显示链接和更多内容？

比方说你有一个无序列表只是图标（这里只有一个）：如何在twitter bootstraps popover中显示链接和更多内容？

<ul> 
    <li class="in-row"><a href="#" id="meddelanden" data-content="Content here..." 
      data-title="Meddelanden" data-toggle="clickover" data-placement="left"> 
      <i class="icon-globe"></i></a> 
    </li> 
</ul>

有了这些包含文件到您的HTML文档：

<script type="text/javascript" src="../js/jquery.js"></script> 
    <script type="text/javascript" src="../js/bootstrap.js"></script> 
    <script> 
     $('#meddelanden').popover('animate'); 
    </script>

它似乎很好，显示的内容当我按下图标，但我想有一些链接和休息和东西在该弹出容器。我怎样才能做到这一点？

来源

2013-04-25 XT_Nova

是的，你可以。尝试使用酥料饼content和html属性... See Doc

http://jsfiddle.net/4jhzg/

HTML

<ul> 
    <li class="in-row"><a href="#" id="meddelanden" 
      data-title="Meddelanden" data-toggle="clickover" data-placement="right"> 
     <i class="icon-globe"></i></a> 
    </li> 
</ul>

脚本

var elem = '<div><a href="google.com">google</a></div>'; 
$('#meddelanden').popover({animation:true, content:elem, html:true});

来源

2013-04-25 16:40:09 PSL

我接受这个答案时，代码变得更易于阅读这个解决方案。 – 2013-04-25 21:44:48

你能看看我的其他问题吗？ [Here！]（http://stackoverflow.com/questions/16226474/how-can-i-close-a-bootstrap-popover-with-a-button-inside-the-popover）@PSCoder – 2013-04-26 00:19:37

我曾发布过回答，看看这是你想要的。 – PSL 2013-04-26 00:49:26

你不需要为此使用JavaScript。您可以使用data-html和data-content以实现此目的。

尝试设置data-html="true"并将转义的html插入到data-content属性中。就像这样：

<ul> 
    <li class="in-row"><a href="#" id="meddelanden" data-content="&lt;hr&gt;Sample html&lt;br&gt;" 
      data-title="Meddelanden" data-toggle="clickover" data-placement="left" data-html="true"> 
      <i class="icon-globe"></i></a> 
    </li> 
</ul>

一些文本编辑器提供内置的HTML逃生工具。如果你的编辑器没有，你可以使用像这样的一个在线工具： http://www.htmlescape.net/htmlescape_tool.html

更新： 另一种方法是您的标记添加到HTML文档本身（作为一个隐藏的容器）并创建工具提示使用javascript：

HTML

<div id="tooltip-content" style="display: none;"> 
    <p>Tooltip content goes here</p> 
</div>

的Javascript

$('#element').tooltip({ 
    html: true, 
    title: $('#tooltip-content').html() 
});

这是一个更好的方法（在我看来）。更易于阅读和维护 - 在您的JavaScript内或在属性data-content内部没有HTML。

来源

2013-04-25 16:51:10

我不会采用这种方法如果html很长，你的标记将难以理解并且难以维护。 – PSL 2013-04-25 17:07:33

这取决于视角。 JavaScript代码中的HTML也可能难以维护。无论如何，[bootstrap＃popovers]（http://twitter.github.io/bootstrap/javascript.html#popovers）中的文档显示了如何使用javascript设置内容。 – 2013-04-25 17:46:48

Yuo不必将html放入JS代码中。它只是一个小提琴，你可以在你自己的HTML中加入标记并使用$来获取它。你可以避免额外的开销逃离html标签。只是我的观点:) – PSL 2013-04-25 17:50:03

如何在twitter bootstraps popover中显示链接和更多内容？

回答

相关问题