Przycisk submit form jako obraz + napis - jakie polecacie rozwiązanie

Zielona szkoła
1

Witam, potrzebuje podmienic nieciekawy guzik submit do form jako obraz plus tekst dodawany dynamicznie.

Mój może nie elegancki sposób który niestety niedziała w firefoxie

<%= link_to_function '',"$('form').submit();" %>
Stwórz

Wiem że moge wykorzystać link_to_remote image_tag ale wtedy niewstawie napisu dodatkowo na przycisku
Kombinowanie z cssami do wstawienia samego napisu też nie jest zbyt efektywne.

2

Dlaczego? To chyba najlepsze co możesz tu zrobić.

3

Nie za bardzo rozumiem w czym jest problem. Możesz CSSem stylować button aby wyglądał jak tam Ci potrzeba albo zamienić button na linka i stylować linka. Tabeli na 100% nie potrzebujesz do tego celu również…

Prawdopodobnie najlepiej zrobić linka (tag “A” :wink: ) który będzie miał display: block, z paddingiem z lewej strony odpowiednim i ustawić background-image odpowiednio. Na przykład (nie testowane):

a#moj_srutton {
  display: block;
  padding: 2px 2px 2px 22px;
  background: transparent url('/images/moja_ikonka.gif') no-repeat left center;
};
4

Może mój problem to właśnie błędy w cssach, w firefoxie obrazek nie jest klikalny wogle może dla tego że jest poza definicją pól formularza . Natomiast jak go wrzuce razem do pól w formularzu to przestaje wyświetlać bitmape.

5

Wrzuć może ten kawałek HTMLa i cssa, na pewno większość osób z tego forum będzie umiało Ci pomóc w ostylowaniu tego poprawnie.

6

css:
#form_button{
position: relative;
width: 88px;
height: 26px;
background: url(’…/images/guzikoff_form.gif’) no-repeat center;
color: #FFFFFF;
text-align: center;
}

kod new.html.erb

<% form_for @user, :url => account_path do |f| %>
<%= f.error_messages %>
<%= render :partial => “form”, :object => f %>
<% # f.submit “Wyślij” %>


<%= link_to_function '',"$('form').submit();" %>
Wyślij

kod partial _form.html.erb:
<%= form.label ‘Adres e-mail’ %>

<%= form.text_field :email,:size=>24 %>


7

ech po co sa od tego gotowe rozwiazania w czystym css jak np. awesome buttons.

dorzucasz css by si ladowal i jedyne co to

%= f.submit “Wyślij”, :class => “awesome” %>

i tyle masz sliczny guziczek

poprawki jaki lubisz w pliku ze stylami i tyle

http://gr2m.github.com/awesome-buttons/