151

ここでは、Twitter のブートストラップのポップオーバーを使用しています。現在、ポップオーバー テキストをスクロールすると、<a>のdata-content属性のテキストだけでポップオーバーが表示されます。<div>とにかくポップオーバーの中に a を置くことができるかどうか疑問に思っていました。潜在的に、そこでphpとmysqlを使用したいのですが、divを機能させることができれば、残りを理解できると思います。data-content をdivID に設定しようとしましたが、うまくいきませんでした。

HTML:

<a class='danger' 
   data-placement='above' 
   rel='popover' 
   data-content='#PopupDiv' 
   href='#'>Click</a>
4

8 に答える 8

308

まず、コンテンツ内で HTML を使用する場合は、HTML オプションを true に設定する必要があります。

$('.danger').popover({ html : true});

次に、ポップオーバーのコンテンツを設定するための 2 つのオプションがあります

  • data-content 属性を使用します。これはデフォルトのオプションです。
  • HTML コンテンツを返すカスタム JS 関数を使用します。

data-content の使用: 次のように、HTML コンテンツをエスケープする必要があります。

<a class='danger' data-placement='above' 
   data-content="&lt;div&gt;This is your div content&lt;/div&gt;" 
   title="Title" href='#'>Click</a>

HTML を手動でエスケープするか、関数を使用できます。PHP についてはわかりませんが、Rails では *html_safe* を使用しています。

JS 関数の使用: これを行う場合、いくつかのオプションがあります。私が思う最も簡単な方法は、div コンテンツを好きな場所に非表示にしてから、そのコンテンツをポップオーバーに渡す関数を作成することです。このようなもの：

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

そして、HTML は次のようになります。

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
  <div>This is your div content</div>
</div>

それが役に立てば幸い！

PS: popover を使用して title 属性を設定しないと、いくつかの問題が発生しました...そのため、常にタイトルを設定することを忘れないでください。

于 2012-01-18T10:55:06.917 に答える
11

ポップ オーバーのルック アンド フィールだけが必要な場合の別の代替方法。次に方法です。もちろん、これは手作業ですが、うまく機能します:)

HTML - ボタン

<button class="btn btn-info btn-small" style="margin-right:5px;" id="bg" data-placement='bottom' rel="tooltip" title="Background Image"><i class="icon-picture icon-white"></i></button>

HTML - ポップオーバー

<div class="bgform popover fade bottom in">
            <div class="arrow"></div>
             ..... your code here .......
</div>

JS

$("#bg").click(function(){
        $('.bgform').slideToggle();
});
于 2012-12-17T16:52:43.487 に答える
8

他の回答に加えて。オプションで許可すると、オブジェクトをコンテンツにhtml渡すことができjQuery、すべてのイベントとバインディングとともにポップオーバーのコンテンツに追加されます。ソースコードからのロジックは次のとおりです。

  • 関数を渡すと、コンテンツ データのラップを解除するために呼び出されます
  • 許可されていない場合、htmlコンテンツ データはテキストとして適用されます
  • 許可され、コンテンツ データが文字列の場合html、次のように適用されます。html
  • それ以外の場合、コンテンツ データはポップオーバーのコンテンツ コンテナーに追加されます。
$("#popover-button").popover({
    content: $("#popover-content"),
    html: true,
    title: "Popover title"
});
于 2015-12-14T07:39:54.737 に答える
-1 
here is an another example

<a   data-container = "body" data-toggle = "popover" data-placement = "left" 
    data-content = "&lt;img src='<?php echo baseImgUrl . $row1[2] ?>' width='250' height='100' &gt;&lt;div&gt;&lt;h3&gt; <?php echo $row1['1'] ?>&lt/h3&gt; &lt;p&gt; &lt;span&gt;<?php echo $countsss ?>videos &lt;/span&gt;
&lt;span&gt;<?php echo $countsss1 ?> followers&lt;/span&gt;
&lt;/p&gt;&lt;/div&gt;
<?php echo $row1['4'] ?>   &lt;hr&gt;&lt;div&gt;
&lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt;Follow  &lt;/button&gt;  &lt;/span&gt; &lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt; Go to channel page&lt;/button&gt;   &lt;/span&gt;&lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt;Close  &lt;/button&gt;  &lt;/span&gt;

 &lt;/div&gt;">

<?php echo $row1['1'] ?>
  </a>
于 2016-09-09T19:10:33.727 に答える
-1

なぜそんなに複雑なのですか？これを置くだけです：

data-html='true'
于 2016-09-16T03:16:28.560 に答える