[英]How to use Twitter Bootstrap's glyphicons with Rails's button_to
I have a couple buttons that submit AJAX requests. 我有几个按钮可以提交AJAX请求。
<%= button_to 'GO!', {controller:'videos', action:'rate', id: video.hashed_id, format: 'json'}, {:remote=>true, :class=>"btn btn-default btn-sm"} %>
If I replace GO!
如果我更换
GO!
with <span class="glyphicaon glyphicon-thumbs-up"></span>
it ends up causing this value="<span class="glyphicaon glyphicon-thumbs-up"></span>"
与
<span class="glyphicaon glyphicon-thumbs-up"></span>
最终导致此value="<span class="glyphicaon glyphicon-thumbs-up"></span>"
Any ideas how I can get a glyphicon into a button that submits a form? 有什么想法可以将glyphicon变成提交表单的按钮吗?
Update 更新
I tried this: 我尝试了这个:
<%= button_to content_tag(:i, '', class: 'icon-thumbs-up'), {controller:'videos', action:'rate', id: video.hashed_id, format: 'json'}, {:remote=>true, :class=>"btn btn-default btn-sm"} %>
which created this: 这创造了这个:
<form action="/videos/rate/asdfsxsdf/no.json" class="button_to" data-remote="true" method="post">
<div><input class="btn btn-default btn-sm" type="submit" value="<i class="icon-thumbs-up"></i>" />
<input name="authenticity_token" type="hidden" value="es4wPqFr9xPBUFsbHQR/gAzofDC+ZwYsiiJ7RAQZUHk=" />
</div></form>
With Rails 3/4 and bootstrap this works: 使用Rails 3/4和bootstrap可以工作:
<%= button_to "/hubspot/new_campaign?id=tab1-2", :class=>"btn btn-default btn-icon glyphicons
message_plus", :remote => true do %>
<i></i>Create New Campaign
<% end %>
This isn't super sexy, but it works!! 这不是超级性感,但可以!!
<%= form_tag({controller:'videos', action:'rate', id: video.hashed_id, yesno:'no', format: 'json'}, {remote:true} ) do %>
<%= button_tag '', :class=>"rate-btn yes-btn btn btn-default btn-lg glyphicon glyphicon-thumbs-down" %>
<% end %>
Basically (as mentioned in the comments above), the issue is that the syntax used by glyphicon can't be used on self-closing elements like <input />
so you need a button. 基本上(如上面的评论中所述),问题在于glyphicon使用的语法不能用于诸如
<input />
类的自闭合元素,因此您需要一个按钮。 Unfortunately Rails's button_to
also generates an <input />
(inside of a form). 不幸的是,Rails的
button_to
还会生成一个<input />
(在表单内部)。 You could write the form by hand with a but you'll run into problems with Rails's built-in forgery prevention system (you need an authenticity token). 您可以使用a手写表单,但是会遇到Rails内置的防伪系统的问题(您需要真实性令牌)。 So instead, I combine the
form_tag
and the button_tag
with corresponding classes and we're good to go. 因此,我将
form_tag
和button_tag
与相应的类结合在一起,我们很高兴。
尝试这个:
<%= button_to content_tag(:i, '', class: 'icon-thumbs-up'), {controller:'videos', action:'rate', id: video.hashed_id, format: 'json'}, {:remote=>true, :class=>"btn btn-default btn-sm"} %>
I think .html_safe can solve your problem. 我认为.html_safe可以解决您的问题。 I would try replacing 'GO!'
我会尝试替换“ GO!” with:
有:
'<span class="glyphicon glyphicon-thumbs-up"></span>'.html_safe
OR if you still wanted text 或者,如果您仍然想要文本
'<span class="glyphicon glyphicon-thumbs-up"></span> GO!'.html_safe
According to the Bootstrap 3 documentation for glyphicons , a large button with a Star glyphicon on the left and the text Star to the right o can be achieved using the following HTML: 根据有关字形图标的Bootstrap 3文档,可以使用以下HTML来实现一个大按钮,该按钮的左侧有一个星形字形图标,而文本o则位于右侧o。
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
With button_tag in Rails, this is how you would create that same button: 在Rails中使用button_tag,这就是创建相同按钮的方式:
<%= button_tag '<span class="glyphicon glyphicon-star"></span> Star'.html_safe , :class=>"btn btn-default btn-lg" %>
Similarly, if you wanted the icon after the text, it would be like this: 同样,如果您想在文本后添加图标,则如下所示:
<%= button_tag 'Star <span class="glyphicon glyphicon-star"></span>'.html_safe , :class=>"btn btn-default btn-lg" %>
NB: Don't forget the space between the closing span tag and the text of the button. 注意:不要忘了结束span标签和按钮文本之间的空格。
According to the Bootstrap 2 documentation for glyphicons , a large Star button with the text Star to the right can be achieved using the following HTML: 根据glyphicons的Bootstrap 2文档,可以使用以下HTML来实现带有文本Star右边的大Star按钮。
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
With button_tag in Rails, you can create the same button using: 使用Rails中的button_tag,可以使用以下命令创建相同的按钮:
<%= button_tag '<i class="icon-star"></i> Star'.html_safe , :class=>"btn btn-large" %>
I wanted something a little more comprehensive ... a button with verbiage and the glyph on it. 我想要一个更全面的东西……一个带有修饰语和字形的按钮。 I mixed and matched from the above answers, but this is a little different.
我从上面的答案中混合并匹配,但这有些不同。 Wrapping the pieces in a span tag did the trick:
将片段包裹在span标签中可以达到目的:
In HAML 在HAML中
= button_to(rails_path(:id => id), :remote => true, class: 'btn btn-
success) do
%span
%span.glyphicon.glyphicon-star
Star!
After some interpolation, that generates (in rails 5) 经过一些插值后,生成(在轨道5中)
<form class="button_to" method="post" action="/rails/path?id=1734369" data-remote="true">
<button class="btn btn-success" type="submit">
<span>
<span class="glyphicon glyphicon-star"></span>
Star!
</span>
</button>
<input type="hidden" name="authenticity_token" value="blah" />
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.