2016-07-05 5 views
0

Grundsätzlich möchte ich, dass die Hintergrundfarbe meiner Schaltfläche eine dunklere Schattierung der Hintergrundfarbe des Formulars ist, die durch das Farbattribut des Objekts bestimmt wird, das ich besuche die 'Bearbeiten'-Ansicht von. Zur Zeit verwende ichInline <% f imit%> Styling in einer .erb-Datei

Um die Farbe des Hintergrunds bei Besuch dynamisch einzustellen. Allerdings bin ich nicht sicher, wie die gleiche in-line-Stil Eigenschaft auf meiner Taste für den Zugriff auf dem von

<div class="action"> 
    <%= f.submit "Update" %> 
</div> 

erzeugt wird diese Schaltfläche in CSS durch .Action gestylt zu werden: Eingang, aber ich kann keinen Zugriff Die Variable @student aus meinem CSS-Sheet. Ich habe eine ganze Reihe verschiedener Möglichkeiten untersucht, um zu versuchen, dies zu umgehen, wie das Übergeben von Daten an Javascript oder die Verwendung von SASS-Variablen aus Javascript, aber ich habe keine Ahnung, wie man die Ruby-Variablen richtig in ein CSS-Blatt einfügt. Ich habe auf Inline-Styling zurückgegriffen, da es sich um eine .erb-Datei handelt und die Variablen bereits vorhanden sind. Ich habe eine andere Syntax wie

<%= f.submit "Update", style: 'background-color:<%[email protected]%>'%> 
<%= f.submit "Update", :style => 'background-color:<%[email protected]%>'}%> 
<%= f.submit "Update", {:style => 'background-color:<%[email protected]%>;'}%> 
<%= f.submit "Update", {:style => 'background-color:<%[email protected]%>'}%> 

versucht, aber diese haben nicht funktioniert. Ich habe auch versucht, nur den HTML-Code zu kopieren, den dieser Ruby-Snippet erzeugt und inline formatiert, aber das schien auch nicht zu funktionieren (hätte mich auch schlampig angefühlt, weil der Rest meines Formulars von form_for generiert wurde). Entweder brauche ich einen Weg, um von meinem CSS-Sheet auf die @Student-Variable zuzugreifen (das wäre ideal), oder inline-style diesen Button in meiner .erb-Datei. Könnte ich, wenn ich endlich die Hintergrundfarbe gestalten könnte, jede Idee, wie ich durch CSS dynamisch einen dunkleren Farbton erzeugen könnte? Kann ich den Filter verwenden: Kontrast oder Filter: Helligkeitssache mit Inline-Styling?

Antwort

0

Sie die Variable mit einfügen können - "#{foo}" (doppelte Anführungszeichen, Hash und geschweiften Klammern), so in Sie es sein würde, Fall:

<%= f.submit "Update", style: "background-color: #{@student.color} "%> 
0

Sie tun sollten:

<%= f.submit "Update", style: "background-color: #{ @student.color }", class: "formPageBG", id: "formPageBG" %>