twitter-bootstrap – 是否可以使用div作为Twitter的Popover的内容

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 是否可以使用div作为Twitter的Popover的内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用twitter的bootstrap的popover here.现在,当我滚动popover文本时,popover只显示从< a>的data-content属性的文本。我想知道如果有反正把一个< div>里面的popover。潜在的,我想使用PHPMysqL在那里,但如果我可以得到一个div工作,我想我可以找出其余的。我试着将数据内容设置为一个div ID,但它没有工作。

HTML:

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

解决方法

首先,如果你想在内部使用HTML,你需要将HTML选项设置为true:
$('.danger').popover({ html : true});

然后,您有两个选项来设置Popover的内容

>使用data-content属性。这是默认选项。
>使用返回HTML内容自定义JS函数

使用数据内容
您需要转义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内容隐藏在任何你想要的,然后写一个函数传递其内容popover。这样的东西:

$(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时遇到了一些麻烦,没有设置标题属性…所以,记住总是设置标题

猜你在找的Bootstrap相关文章