blocks|key|46946|text|尝尝这个。我还没有测试过，但我认为这样做是可能的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|46947|=+f.submit+:class+=>+"btn+btn-warning+btn-mini",+"data-disable-with"=>+"Just+a+moment..."+do
++%25i.icon-heart.icon-white
++=+pluralize(@video.likes.count,+'like')
end|code-block|syntax|javascript|46948|因此，如果您使用simple_form，这是可能的。对不起。|46949|因此，另一次尝试是|46950|=+f.submit+"#{pluralize(@video.likes.count,+'like')}+<i+class='icon-heart+icon-white'/>".html_safe,+:class+=>+"btn+btn-warning+btn-mini",+"data-disable-with"=>+"Just+a+moment..."|46951|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Try this. I haven't tested but I think it's possible to do something like this.

<pre><code>= f.submit :class =&gt; "btn btn-warning btn-mini", "data-disable-with"=&gt; "Just a moment..." do
 %i.icon-heart.icon-white
 = pluralize(@video.likes.count, 'like')
end
</code></pre>

So this was possible if you where using simple_form. I'm sorry.

So another try would be

<pre><code>= f.submit "#{pluralize(@video.likes.count, 'like')} &lt;i class='icon-heart icon-white'/&gt;".html_safe, :class =&gt; "btn btn-warning btn-mini", "data-disable-with"=&gt; "Just a moment..."
</code></pre>

blocks|key|46612|text|多亏了ismaelga我找到了this+SO+question|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|46613|这就是解决方案：|46614|<%25=+button_tag(type:+'submit',+class:+"btn+btn-primary")+do+%25>
+<i+class="icon-ok+icon-white">+Save
<%25+end+%25>|code-block|syntax|javascript|46615|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/10858582/html-code-inside-buttons-with-simple-form^0|F|G|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Thanks to ismaelga, I found <a href="https://stackoverflow.com/questions/10858582/html-code-inside-buttons-with-simple-form">this SO question</a>.

This is the solution :

<pre><code>&lt;%= button_tag(type: 'submit', class: "btn btn-primary") do %&gt;
 &lt;i class="icon-ok icon-white"&gt;&lt;/i&gt; Save
&lt;% end %&gt;
</code></pre>

blocks|key|2525206|text|Justin+D的回答对我也很有帮助。如果你是从Google来的，并且你正在寻找一个Slim实现，你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2525207|=+button_tag(type:+'submit',+class:+'btn+btn-default')+do
++++span.glyphicon.glyphicon-floppy-disk>
++++%7C+Save
end|code-block|syntax|javascript|2525208|Slim用户将认识到>的必要性。|offset|length|style|CODE|2525209|从2014年9月24日起，这在我的Rails+4.1.5，Ruby+2.1.2和bootstrap-sass+3.2中起作用。|2525210|entityMap^0|0|0|A|1|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Justin D's answer helped me also. If you're coming here from Google and you're looking for a Slim implementation, you can do it like this:

<pre><code>= button_tag(type: 'submit', class: 'btn btn-default') do
 span.glyphicon.glyphicon-floppy-disk&gt;
 | Save
end
</code></pre>

Slim users will recognize the <code>&gt;</code>'s necessity.

This worked for me with Rails 4.1.5, Ruby 2.1.2, and bootstrap-sass 3.2 as of September 24, 2014.

blocks|key|2525219|text|另一种选择是用button代替submit|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2525220|请参见Rails文档FormBuilder#button|2525221|=+f.button+:class+=>+"btn+btn-warning+btn-mini"+do
++%25i.icon-heart.icon-white
++++=+pluralize(@video.likes.count,+'like')|code-block|syntax|javascript|2525222|entityMap|0|LINK|mutability|MUTABLE|url|http://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-button^0|7|6|F|6|0|A|I|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Another option could be <code>button</code> in place of <code>submit</code>

see Rails documentation <a href="http://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-button" rel="nofollow">FormBuilder#button</a>

<pre><code>= f.button :class =&gt; "btn btn-warning btn-mini" do
 %i.icon-heart.icon-white
 = pluralize(@video.likes.count, 'like')
</code></pre>

blocks|key|46975|text|解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|46976|=+button_to('Add',+line_item_path,+method:+:post+,+class:+"btn+btn-warning+btn-lg"+,+params:+{+param1:+'value1',++param2:+'value2'+})|code-block|syntax|javascript|46977|http://qiita.com/tomomomo1217/items/a5f790c31670587e2d87|offset|length|46978|How+to+place+an+image+inside+of+a+link?|46979|entityMap|0|LINK|mutability|MUTABLE|url|1|https://stackoverflow.com/questions/18117191/how-to-place-an-image-inside-of-a-link/32030708#32030708^0|0|0|0|1K|0|0|0|13|1|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@$I|Y|J|Z|1|10]]|A|$]]|$1|K|3|L|5|6|7|11|8|@]|9|@$I|12|J|13|1|14]]|A|$]]|$1|M|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|H]]|T|$5|P|Q|R|A|$S|U]]]]

Soluction

<pre><code>= button_to('Add', line_item_path, method: :post , class: "btn btn-warning btn-lg" , params: { param1: 'value1', param2: 'value2' })
</code></pre>

<a href="http://qiita.com/tomomomo1217/items/a5f790c31670587e2d87" rel="nofollow noreferrer">http://qiita.com/tomomomo1217/items/a5f790c31670587e2d87</a>

<a href="https://stackoverflow.com/questions/18117191/how-to-place-an-image-inside-of-a-link/32030708#32030708">How to place an image inside of a link?</a>

blocks|key|46985|text|请尝试下面的代码。它起作用了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|46986|<%25=+f.submit+:class+=>+"btn+btn-success+btn-mini"+%25>|code-block|syntax|javascript|46987|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Please try the below code . It works

<pre><code>&lt;%= f.submit :class =&gt; "btn btn-success btn-mini" %&gt;
</code></pre>

blocks|key|46662|text|问题本身的公认答案将会起作用，但更像是一个补丁，而不是完美的解决方案，保持代码风格的清晰和一致。它回溯到使用标准和手动视图方法：#button_tag。我倾向于避免那些手动方法，如#submit_tag、#form_tag、#input_tag……等，因为它们与后端模型或表单模型本身无关，您需要在它们上手动执行所有操作。尽管提交与f.没有任何关系，比如f.input+...，但它与form_for中的每个输入都有相似之处，它关乎样式、代码可读性和良好的编程实践。这段代码工作得很好(form_for和simple_form)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|46663|=+f.button+:button,+type:+:submit,+class:+'class1+class2+...+classN'+do
++++=+'button+call+to+action+text'
++++%25i.fa.fa-download.ml5+//+=>+haml+icon+as+requested|code-block|syntax|javascript|46664|希望它能帮助其他像我一样尝试避免使用_tag方法的人。|46665|entityMap^0|1S|B|4M|2|4X|B|5C|8|0|0|I|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$]]

The accepted answer for the question itself will work but is more like a patch instead of the perfect solution keeping code style clear and consistent. It backtracks into using the standard and manual view method: <code>#button_tag</code>. I tend to avoid those manual methods like #submit_tag, #form_tag, #input_tag ... etc because they are unrelated to the backed model or form-model itself and you need to manually do everything on them. Even though the submit has no connection with the <code>f.</code> that every input in a <code>form_for</code> has like for e.g. <code>f.input ...</code>, it's about style, code readability and good programming practices. This code works perfectly fine (form_for and simple_form):

<pre><code>= f.button :button, type: :submit, class: 'class1 class2 ... classN' do
 = 'button call to action text'
 %i.fa.fa-download.ml5 // =&gt; haml icon as requested
</code></pre>

Hope it helps others reaching this post like me trying to avoid <code>_tag</code> methods.

I have a form for a like/unlike button using ajax :

<pre><code>= form_for like, :html =&gt; { :method =&gt; :delete}, :remote =&gt; true do |f|
= f.submit pluralize(@video.likes.count, 'like'), :class =&gt; "btn btn-warning btn-mini", "data-disable-with"=&gt; "Just a moment..."
</code></pre>

The form works perfectly.

I would like to add an icon in front of the text in the submit button. The haml code for adding the icon is the following (twitter bootstrap) :

<pre><code>%i.icon-heart.icon-white
</code></pre>

Is there a way to add this html to the button? I tried adding it as plain html, but rails rendered it as text.

UPDATE

I have manage to encapsulate the submit button in a span class which contains the icon and the appropriate styling. I now need to remove every styling on the button...

<pre><code>%span.btn.btn-danger.btn-mini
 %i.icon-heart.icon-white
 = f.submit pluralize(@video.likes.count, 'like')
</code></pre>

Rails and bootstrap - Add HTML tags to a submit button text

我有一个表单，用于使用ajax的like/like按钮：= form_for like, :html => { :method => :delete}, :remote => true do |f|= f.submit pluralize(@video.likes.count, 'like'), :class => "...

问Rails和bootstrap -将HTML标记添加到提交按钮文本
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Rails和bootstrap -将HTML标记添加到提交按钮文本EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Rails和bootstrap -将HTML标记添加到提交按钮文本
EN