Gibt es eine Möglichkeit mit Helferschienen bilden einen Knopf Tag zu produzieren für einreichen

Question

Ich versuche, würde zu erstellen Tasten ala Wufoo (Rediscovering the button element)

Ich mag den folgenden Code wie folgt schreiben:

<%form_tag search_path, :method => :get, :class => 'search' do %> 
    <%=text_field_tag :search, params[:search] -%> 
    <%=button_tag 'search', :name => nil-%> 
<%end%> 

Um die folgende HTML (anstelle des input [type = "submit"] Tag)

<button type="submit" class="positive"> 
    <img src="/images/icons/tick.png" alt=""/> 
    Save 
</button> 

Ist bereits ein Verfahren existieren zu generieren? Oder sollte ich meinen eigenen Helfer rollen lassen?

Answer 1

Sie könnten content_tag verwenden, um dies zu erreichen. Es ist die rüstigere Art zu tun, was du willst. Aber es ist länger als das rohe HTML.

<% content_tag :button :type => :submit, :class => :positive do %> 
    <%= image_tag "icons/tick.png"%> 
    Save 
<% end %> 

Welche

<button type="submit" class="positive"> 
    <img src="/images/icons/tick.png" alt="Tick"/> 
    Save 
</button> 

jedoch mit diesem als Ausgangspunkt erzeugt, sollten Sie kein Problem rollen Sie Ihre eigenen robusten Helfer haben oder es zu einer teilweisen abstrahiert.

Answer 2

Sie können das image_submit_tag Helfer ein Bild einreichen Tag, anstatt Einwickeln das Ganze in eine Schaltfläche erstellen:

<% 
image_submit_tag("login.png") 
# => <input src="/images/login.png" type="image" /> 

image_submit_tag("purchase.png", :disabled => true) 
# => <input disabled="disabled" src="/images/purchase.png" type="image" /> 

image_submit_tag("search.png", :class => 'search-button') 
# => <input class="search-button" src="/images/search.png" type="image" /> 
%> 

Dies könnte nicht das sein, was Sie suchen, wenn Sie das benötigen " Speichern Sie "Text erscheint über dem <img>

Answer 3

Verwendung Das JQuery Cheats Gem https://github.com/plowdawg/jquery_cheats und Ihrer Ansicht nach ist es nur

<%= submitimage("/path/to/image.png","Alternate Text") %> 

HINWEIS: Alternativer Text ist optional.