如何在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中顯示鏈接和更多內容？

回答

相關問題