Установить градиентный цвет фона из палитры цветов с помощью jquery?

Question

Я хочу иметь возможность выбрать 2 цвета и отобразить div с градиентным фоном!

У меня есть 2 средства выбора цвета, созданные с помощью "jscolor.com", где я могу выбирать цвета, и выбранный цвет отображается в поле ввода.

Top color<br />
<input type="text" name="color1" class="colors" size="7" value="#444444"/>
<br><br>
Bottom color<br />
<input type="text" name="color2" class="colors" size="7" value="#17181a"/>

и затем div, где я хотел бы отобразить градиентный фон.

<div id="gradient"></div>

Как установить цвет фона на основе полей ввода? И предложения оценили, спасибо.

Answer 1

Шаги:

• присваивает входные данные уникальным идентификаторам, чтобы их можно было легко найти.
• используйте jQuery .css() для установки background-image: linear-gradient... и не забудьте включить все префиксы поставщиков.
• обновить linear-gradient при изменении ввода и при загрузке страницы

Пример:

$(function() {
  // when inputs change, update the gradient
  $(".color").change(refreshGradient);
  // draw the gradient when page is loaded
  refreshGradient();
});

function refreshGradient() {
  var gradientBody = 'linear-gradient(top, ' + $("#color1").val() + ', ' + $("#color2").val() + ')';

  // we need to use vendor prefixes
  $.each(['', '-o-', '-moz-', '-webkit-', '-ms-'], function() {
    $("#gradient").css({ 'background-image': this + gradientBody });
  });
}

ЗДЕСЬ - это код.

Обновление: (см. Комментарии)

Для интеграции с мини-цветами jQuery .change() обработчик должен быть зарегистрирован по-другому:

$(".color").miniColors({
  change: refreshGradient
});

ЗДЕСЬ - пример использования jQuery miniColors плагин.