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.
Antwort
Zu viele Anzeigen?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.