Javascript 我可以在 twitter-bootstrap popover data-content 中使用 html 标签吗?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8494291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I use html tags in twitter-bootstrap popover data-content?
提问by Arman
I'm using Twitter-Bootstrap within a Rails 3.1.3 application. I have numerous elements with popovers like:
我在 Rails 3.1.3 应用程序中使用 Twitter-Bootstrap。我有许多带有弹出框的元素,例如:
<a data-original-title="Quality" rel="popover" data-content="Did they do a good job? 5 for Really Nice, 4 for Good Enough, 3 for Average, 2 for Somewhat OK, 1 for Really Bad">Q</a>
I'd like to have an ordered list in the content section similar to:
我想在内容部分有一个类似于以下内容的有序列表:
<OL reversed="reversed">
<LI> for Really Nice </LI>
<LI> for Good Enough </LI>
...
</OL>
Is there a simple way to do this without modifying the JavaScript? Whatever I try, the html code is displayed on the browser instead of being interpreted as such.
有没有一种简单的方法可以在不修改 JavaScript 的情况下做到这一点?无论我尝试什么,html 代码都会显示在浏览器上,而不是被解释为这样。
UPDATE
更新
Using the following code per David's suggestion
根据大卫的建议使用以下代码
link_to 'Q', '#', options: { data-original-title: "Quality", rel: 'popover', data-content: "Did they do a good job? <ol><li> for Really Nice </li><li>...</li></ol>".html_safe }
generates a syntax error with my setup. I think this explains why: Ruby 1.9 hash with a dash in a key. So I'm using:
我的设置产生语法错误。我认为这解释了原因:Ruby 1.9 哈希在 key 中带有破折号。所以我正在使用:
<%= link_to 'Q', '#', options: { :"data-original-title" => "Quality", :rel => 'popover', :"data-content" => "Did they do a good job? <ol><li> for Really Nice </li></ol>".html_safe } %>
This doesn't work. It generates the following HTML:
这不起作用。它生成以下 HTML:
<a href="#" options="{:"data-original-title"=>"Quality", :rel=>"popover", :"data-content"=>"Did they do a good job? <ol><li> for Really Nice </li></ol>"}">Q</a>
回答by iwasrobbed
You need to create a popover instance that has the html
option enabled (place this in your javascript file after the popover JS code):
您需要创建一个html
启用了该选项的 popover 实例(将其放在您的 javascript 文件中的 popover JS 代码之后):
$('.popover-with-html').popover({ html : true });
Then the link syntax would be:
那么链接语法将是:
<%= link_to('Q', '#', :class => "popover-with-html", :title => "Quality", "data-content" => "#{some_content_object.html_safe}") %>
If you're dynamically generating the content, then you need to use html_safe
like David suggested so Rails doesn't escape the HTML code. Otherwise, you can just place HTML directly within that content attribute.
如果您动态生成内容,那么您需要html_safe
像 David 建议的那样使用,这样 Rails 就不会转义 HTML 代码。否则,您可以直接将 HTML 放置在该内容属性中。
回答by David Sulc
Yes, you can do that, but you need to call html_safe
on your string (if the string is generated by Rails)
是的,你可以这样做,但你需要调用html_safe
你的字符串(如果字符串是由 Rails 生成的)
link_to 'Q', '#', :title => "Quality", :rel => 'popover', "data-content" => "Did they do a good job? <ol><li> for Really Nice </li><li>...</li></ol>".html_safe }