是否可以将 div 用作 Twitter 的 Popover 的内容 [英] Is it possible to use a div as content for Twitter's Popover
问题描述
我在 此处 使用了 twitter 的引导程序的弹出窗口.现在,当我滚动弹出框文本时,弹出框仅显示来自 的
data-content
属性的文本.我想知道是否可以在弹出窗口中放置一个
div
ID,但没有用.HTML:
首先,如果你想在内容里面使用 HTML 你需要将 HTML 选项设置为 true:
$('.danger').popover({ html : true});
然后你有两个选项来设置 Popover 的内容
- 使用数据内容属性.这是默认选项.
- 使用返回 HTML 内容的自定义 JS 函数.
使用数据内容:您需要转义 HTML 内容,如下所示:
点击</a>
您可以手动转义 HTML 或使用函数.我不了解 PHP,但在 Rails 中我们使用 *html_safe*.
使用 JS 函数:如果您这样做,您有多种选择.我认为最简单的方法是将您的 div 内容隐藏在您想要的任何位置,然后编写一个函数将其内容传递给 popover.像这样:
$(document).ready(function(){$('.danger').popover({html : 真的,内容:函数(){返回 $('#popover_content_wrapper').html();}});});
然后你的 HTML 看起来像这样:
希望能帮到你!
PS:我在使用 popover 而没有设置 title 属性时遇到了一些麻烦...所以,请记住始终设置标题.
I am using twitter's bootstrap's popover here. Right now, when i scroll over the popover text a popover appears with just text from the <a>
's data-content
attribute. I was wondering if there was anyway to put a <div>
inside the popover. Potentially, I would like to use php and mysql in there, but if i could get a div to work i think i can figure out the rest. I tried setting data-content to a div
ID, but it didnt work.
HTML:
<a class='danger'
data-placement='above'
rel='popover'
data-content='#PopupDiv'
href='#'>Click</a>
First of all, if you want to use HTML inside the content you need to set the HTML option to true:
$('.danger').popover({ html : true});
Then you have two options to set the content for a Popover
- Use the data-content attribute. This is the default option.
- Use a custom JS function which returns the HTML content.
Using data-content: You need to escape the HTML content, something like this:
<a class='danger' data-placement='above'
data-content="<div>This is your div content</div>"
title="Title" href='#'>Click</a>
You can either escape the HTML manually or use a function. I don't know about PHP but in Rails we use *html_safe*.
Using a JS function: If you do this, you have several options. The easiest I think is to put your div content hidden wherever you want and then write a function to pass its content to popover. Something like this:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
And then your HTML looks like this:
<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>
Hope it helps!
PS: I've had some troubles when using popover and not setting the title attribute... so, remember to always set the title.
这篇关于是否可以将 div 用作 Twitter 的 Popover 的内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!