引導酥料餅與HTML內容

我想獲得單獨從HTML引導酥料餅的內容屬性，例如您可以與其他成分做的，但我不能得到它的工作...引導酥料餅與HTML內容

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
</head> 
<body> 

    <div class="container"> 
    <h3>Popover Example</h3> 
    <p>Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the popover() method.</p> 
    <div class="popover" > 
     <a href="#" class="popover-toggle" title="Popover Header" >Toggle popover</a> 
     <div class="popover-content"> 
      Here I am 
     </div> 
    </div> 
    </div> 

<script> 
    $(document).ready(function(){ 
    $('[data-toggle="popover"]').popover(); 
    }); 
</script> 

</body> 
</html>

來源

2015-06-05 Mitch VanDuyn

你有簡單的錨點和一些不應該顯示的div。

<a href="#" id="tglr" class="popover-toggle" title="Popover Header">Toggle popover</a> 
<div id="customdiv" style="display: none"> 
    Here <b>I</b> am 
</div>

在JS，我們讓我們的錨（按id），並與2個選項在其上安裝酥料餅：第一個「HTML」 - 允許顯示HTML而不是簡單的文本，第二個參數指定的內容，這從我們的DIV獲得：

$(document).ready(function(){ 
    $('#tglr').popover({ 
     html : true, 
     content: function() { 
      return $('#customdiv').html(); 
     } 
    }); 
});

這裏就是你們的榜樣https://jsfiddle.net/DTcHh/8529/

一個代碼的問題 - 你執行$（「[數據切換=‘酥料餅’]」），將選擇與數據切換標籤，等於到「popover」），但你沒有這樣的標籤。如果你想initalize popovers這種方式，您應該聲明錨這樣的：

<a href="#" data-toggle="popover" class="popover-toggle" title="Popover Header">Toggle popover</a>

但在你的情況，你有一個自定義的酥料餅只有一個鏈接，所以它是由ID更具邏輯性選擇它。

來源

2015-06-05 23:11:05 user3479125

對於任何輸入錯誤感到抱歉，但我的觀點是，與其他引導程序組件（比如下拉菜單）中，您可以通過將這兩個元素封裝在div中來單獨指定按鈕的內容。我猜這不適用於流行音樂???? –

我明白你想要什麼，但我不明白你爲什麼要包裝它？這種方式有什麼好處？你只是想達到一致性和理解bootstrap的邏輯？至於我在實踐中是不方便的。在很多情況下，即使簡單的數據內容屬性而不是div也足夠了。 – user3479125

感謝您的理解！原因部分是理解，但主要是因爲我們正在使用Opal將Ruby與React集成在一起。 React不喜歡將DOM的一部分推入像這樣的字符串中。它可以完成，但它使反應效率較低。 –

引導酥料餅與HTML內容

回答

相關問題