2 Stimmen

Erstellen Sie einen Adobe Gradient Picker mit jquery und javascript

Ich möchte eine Komponente wie Adobe Gradient Picker in Javascript und jQuery erstellen. Ich möchte die jQuery Gradienten Plugin verwenden. es gibt eine div mit 2 Markierungen links und rechts. als ich in die Grenze von div dies automatisch eine Markierung hinzufügen, und wenn ich auf diese doppelklicken es eine jQuery Farbe öffnen, um eine Farbe auszuwählen. Auch die Markierung sollte über die wichtigsten bewegen werden div . Bitte helfen Sie mir mit einem Beispiel.

1voto

jcubic Punkte 56135

Schieberegler in JQuery UI prüfen http://jqueryui.com/demos/slider/ (Sie können den Code des Widgets ändern, um die Anzahl der Markierungen zu erhöhen, den Stil zu ändern und einen Click-Handler auf dem Schiebeelement anzubringen, um den Farbwähler zu öffnen), CSS3 Gradient http://css-tricks.com/examples/CSS3Gradient/ (Sie können css3-Farbverläufe mit jquery manipulieren), Farbwähler-Plugin http://www.eyecon.ro/colorpicker/ oder Farbtastic Farbwähler - http://acko.net/dev/farbtastic

Wenn Sie keine JQuery UI-Widgets verwenden möchten - und dies von Grund auf neu machen - können Sie <div> mit mit erstellen Position: relativ; und darin <span> mit Position: absolut; dann in javascrtip/jquery hinzufügen live Veranstaltung Mousedown/Mouseup/Mousemove um die Bewegung zu behandeln, wenn der Benutzer die Markierung zieht, und fügen Sie ein Klick-Ereignis hinzu, um den Farbwähler zu öffnen.

Um das Hinzufügen neuer Markierungen zu handhaben, müssen Sie Klick-Ereignis zu div hinzufügen, fügen Sie einfach neue span, müssen Sie auch Funktion, die Gradienten von Position in div interpoliert, so dass, wenn Benutzer in der Mitte der schwarz-zu-weiß-Gradient klicken es graue Markierung hinzufügen (aber Sie können auch Standardfarbe für Marker hinzufügen oder kopieren Sie die Farbe von Marker in der linken oder der rechten);

Und Sie können es in ein Plugin packen und ins Netz stellen.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X