Ändern der Farben mit jquery mit einem Farbwähler?

8

Ich habe dieses jquery-Skript, das die Farbe des Hintergrunds sofort ändert, indem ein Farbcode in das Textfeld eingegeben wird. Das Arbeitsbeispiel befindet sich unten im JSFiddle-Link.

Ссылка

aber anstelle des Eingabefeldes wollte ich eine benutzerdefinierte Farbe für die Farbauswahl verwenden, weil ich nicht möchte, dass Benutzer mit Hex-Code (genau wie Twitter) umgehen. Das jquery-Plugin, das ich benutzen möchte, finden Sie unter

Ссылка

Im unteren Bereich der Seite befindet sich der übersichtliche Farbwähler mit DOM-Element.

Das Problem ist also, wie soll ich vom Eingabetyp zum Farbwähler div wechseln. Danke:))

    
getaway 10.11.2010, 16:26
quelle

5 Antworten

7

Ersetzen Sie das Eingabeelement durch ein div. Verwenden Sie etwas wie: (ungetestet!)

HTML

%Vor%

JS

%Vor%

Unten im Link findest du ein Beispiel, das dir zeigt, wie es geht.

Update zum Ändern von Text

HTML

%Vor%

JS

%Vor%     
Fermin 10.11.2010, 16:35
quelle
12

Nur als weitere Referenz ... HTML5 enthält bereits "color" als Eingabetyp.

%Vor%

Außerdem können Sie einen CSS-Stil anwenden mit:

%Vor%

Nun, für die Hauptfrage ... können Sie den Farbwert erfassen, um die bg-Farbe mit einem einfachen Skript zu ändern. Live-Beispiel: Ссылка

    
gmo 20.08.2012 09:59
quelle
3

Wie wäre es mit:

%Vor%     
Nathan MacInnes 10.11.2010 16:32
quelle
1

Danke Keithics ..

Ich hatte das ähnliche Problem. Ich musste Colorpicker für dynamische Tasten aufrufen. Ich habe mit Klasse anstatt ID.

Es hat mir sehr geholfen.

%Vor%     
palak 12.03.2013 10:57
quelle
0

Ich habe das gleiche Problem und unten ist meine Lösung.

editiere colorpicker.js Zeile 96

von

  

cal.data ('colorpicker'). onChange.apply (cal, [col, HSBToHex (col),   HSBToRGB (col)]);

bis

  

cal.data ('colorpicker'). onChange.apply (cal, [col, HSBToHex (col),   HSBToRGB (col), cal.data ('colorpicker') .el]);

bei Änderungsereignis anstelle von onChange: function (hsb, hex, rgb) ...

bis

  

onChange: Funktion (hsb, hex, rgb, el) {
  $ (el) .val ('#' + hex);
  }

    
keithics 10.04.2012 13:22
quelle

Tags und Links