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 とブートストラップを使用すると、次のように動作します。

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

基本的に（上記のコメントで述べたように）、問題は、グリフィコンで使用される構文が自己終了要素で使用できない<input />ため、ボタンが必要なことです。残念ながら、Railsbutton_toも<input />(フォーム内に) を生成します。を使用して手書きでフォームを作成することもできますが、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 の使用

Bootstrap 3 のglyphiconsのドキュメントによると、次の HTML を使用して、左側に星形のグリフィコンと右側に星形のテキストがある大きなボタンを実現できます。

<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 タグとボタンのテキストの間のスペースを忘れないでください。

ブートストラップ 2 の使用

Bootstrap 2 のglyphiconsのドキュメントによると、次の 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 に答える