2

我有几个提交 AJAX 请求的按钮。

<%= button_to 'GO!', {controller:'videos', action:'rate', id: video.hashed_id, format: 'json'}, {:remote=>true, :class=>"btn btn-default btn-sm"} %>

如果我GO!用<span class="glyphicaon glyphicon-thumbs-up"></span>它替换最终会导致这个value="<span class="glyphicaon glyphicon-thumbs-up"></span>"

任何想法如何将字形图标放入提交表单的按钮中？

更新

我试过这个：

<%= 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"} %>

这创造了这个：

<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>
4

5 回答 5

4

使用 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 %>
于 2014-04-06T19:24:01.780 回答
1

这不是超级性感，但它有效！

<%= 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 %>

基本上（如上面的评论中所述），问题在于 glyphicon 使用的语法不能用于自动关闭元素，比如<input />你需要一个按钮。不幸的是，Railsbutton_to也会生成一个<input />（在表单内部）。您可以使用 a 手动编写表单，但 Rails 的内置防伪系统会遇到问题（您需要一个真实性令牌）。所以相反，我将form_tag和button_tag与相应的类结合起来，我们就可以开始了。

于 2013-08-31T19:31:23.107 回答
0

我认为.html_safe可以解决您的问题。我会尝试替换“GO！” 和：

'<span class="glyphicon glyphicon-thumbs-up"></span>'.html_safe

或者，如果您仍然想要文本

'<span class="glyphicon glyphicon-thumbs-up"></span> GO!'.html_safe

使用引导程序 3

根据glyphicons的 Bootstrap 3 文档，可以使用以下 HTML 实现左侧带有 Star 字形图标和右侧 o 文本的大按钮：

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

使用 Rails 中的 button_tag，您可以创建相同的按钮：

<%= button_tag '<span class="glyphicon glyphicon-star"></span> Star'.html_safe , :class=>"btn btn-default btn-lg" %>

同样，如果你想要文本后面的图标，它会是这样的：

<%= button_tag 'Star <span class="glyphicon glyphicon-star"></span>'.html_safe , :class=>"btn btn-default btn-lg" %>

注意：不要忘记结束跨度标记和按钮文本之间的空格。

使用引导程序 2

根据glyphicons的 Bootstrap 2 文档，可以使用以下 HTML 实现一个带有右侧文本 Star 的大 Star 按钮：

<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>

使用 Rails 中的 button_tag，您可以使用以下方法创建相同的按钮：

<%= button_tag '<i class="icon-star"></i> Star'.html_safe , :class=>"btn btn-large" %>
于 2013-11-08T17:19:41.747 回答
0

尝试这个：

<%= 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"} %>

于 2013-08-31T10:12:23.090 回答
0

我想要一些更全面的东西......一个带有措辞和字形的按钮。我从上面的答案中混合和匹配，但这有点不同。将这些片段包装在 span 标签中起到了作用：

在 HAML 中

 = button_to(rails_path(:id => id), :remote => true, class: 'btn btn-
     success) do
   %span
     %span.glyphicon.glyphicon-star
     Star!

经过一些插值后，生成（在rails 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>
于 2017-12-02T01:43:03.790 回答