Создайте средство выбора градиента Adobe с помощью jquery и javascript

Question

Я хочу создать такой компонент, как средство выбора градиента Adobe, в Javascript и jQuery.Я хочу использовать плагин градиентов jQuery.есть div с 2 маркерами слева и справа.когда я щелкаю в пределах div, это автоматически добавляет маркер, а когда я дважды щелкаю по нему, он открывает цвет jQuery, чтобы выбрать цвет.Также маркер должен перемещаться по основному div.Пожалуйста, помогите мне с примером.

Answer 1

Проверить слайдер в пользовательском интерфейсе JQuery http://jqueryui.com/demos/slider/ (вы можете изменить код виджета, чтобы добавить несколько чисел маркеров, изменить стиль, и прикрепить обработчик щелчка на скользящем элементе, чтобы открыть палитру цветов), CSS3 Gradient http://css -tricks.com / examples / CSS3Gradient / (вы можете манипулировать градиентами css3 с помощью jquery), плагин выбора цвета http://www.eyecon.ro/colorpicker/ или средство выбора цвета Farbtastic - http://acko.net/dev/farbtastic

Если вы не хотите использовать виджеты JQuery UI - и делаете это с нуля - вы можете создать

с позицией: относительный; и внутри него с позицией : absolute; затем в javascrtip / jquery добавьте live event mousedown / mouseup / mousemove для обработки движения, когда пользователь перетаскивает маркер, и добавьте событие click, чтобы открыть палитру цветов. Чтобы обработать добавление новых маркеров, вам нужно добавить событие щелчка в div, просто добавьте новый промежуток, вам также нужна функция, которая интерполирует градиенты из позиции в div, поэтому, когда пользователь щелкает в центре градиента от черного к белому, он добавляет серый маркер (но Вы также можете добавить цвет по умолчанию для маркера или скопировать цвет из маркера слева или справа); И вы можете упаковать его в плагин и разместить в Интернете.