Ich möchte einen Komponenten wie den Adobe-Verlaufs-Picker in JavaScript und jQuery erstellen. Ich möchte das jQuery-Gradienten-Plugin verwenden. Es gibt eine div mit 2 Markierungen links und rechts. Wenn ich im Bereich der div klicke, wird automatisch ein Marker hinzugefügt, und wenn ich darauf doppelklicke, öffnet sich ein jQuery-Farbmenü, um eine Farbe auszuwählen. Außerdem sollte sich der Marker über die Haupt-div bewegen. Bitte helfen Sie mir mit einem Beispiel.
Antwort
Zu viele Anzeigen?
jcubic
Punkte
56135
Überprüfen Sie den Schieberegler in JQuery UI http://jqueryui.com/demos/slider/ (Sie können den Code des Widgets ändern, um mehrere Marker hinzuzufügen, den Stil zu ändern und einen Klick-Handler am Schiebelement anhängen, um den Farbauswähler zu öffnen), CSS3-Verlauf http://css-tricks.com/examples/CSS3Gradient/ (Sie können css3-Verläufe mit jquery manipulieren), Farbauswähler-Plugin http://www.eyecon.ro/colorpicker/ oder Farbtastic Farbauswähler — http://acko.net/dev/farbtastic
Wenn Sie keine JQuery UI-Widgets verwenden möchten — und dies von Grund auf neu erstellen möchten — können Sie ein
mit position: relative; erstellen und darin ein mit position: absolute; dann in Javascript/JQuery ein live Ereignis mousedown/mouseup/mousemove hinzufügen, um das Bewegen zu handhaben, wenn der Benutzer den Marker zieht, und ein Klickereignis hinzufügen, um den Farbauswähler zu öffnen.
Um das Hinzufügen neuer Marker zu handhaben, müssen Sie ein Klickevent zum div hinzufügen, um einfach ein neues span hinzuzufügen, Sie benötigen auch eine Funktion, die Verläufe aus der Position im div interpoliert, so dass, wenn der Benutzer in die Mitte des schwarzen bis weißen Verlaufs klickt, er einen grauen Marker hinzufügt (aber Sie können auch eine Standardfarbe für den Marker hinzufügen oder die Farbe des Markers links oder rechts kopieren);
Und Sie können es in ein Plugin packen und es ins Web stellen.
