如何與Rails的button_to一起使用Twitter Bootstrap的glyphicons

Question

我有幾個按鈕可以提交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>"

有什么想法可以將glyphicon變成提交表單的按鈕嗎？

更新

我嘗試了這個：

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

Answer 1

使用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 %>

Answer 2

這不是超級性感，但可以！！

<%= 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 />類的自閉合元素，因此您需要一個按鈕。 不幸的是，Rails的button_to還會生成一個<input /> （在表單內部）。 您可以使用a手寫表單，但是會遇到Rails內置的防偽系統的問題（您需要真實性令牌）。 因此，我將form_tag和button_tag與相應的類結合在一起，我們很高興。

Answer 3

嘗試這個：

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

Answer 4

我認為.html_safe可以解決您的問題。 我會嘗試替換“ GO！” 有：

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

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

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

使用Bootstrap 3

根據有關字形圖標的Bootstrap 3文檔，可以使用以下HTML來實現一個大按鈕，該按鈕的左側有一個星形字形圖標，而文本o則位於右側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" %>

注意：不要忘了結束span標簽和按鈕文本之間的空格。

使用Bootstrap 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" %>

Answer 5

我想要一個更全面的東西……一個帶有修飾語和字形的按鈕。 我從上面的答案中混合並匹配，但這有些不同。 將片段包裹在span標簽中可以達到目的：

在HAML中

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

經過一些插值后，生成（在軌道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>