jquery - 使用jquery从colorpicker设置渐变背景颜色？

Question

我希望能够选择 2 种颜色并显示具有渐变背景的 div!

我用“jscolor.com”完成了 2 个颜色选择器，我可以在其中选择颜色，并且我选择的颜色会显示在输入字段中。

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

步骤:

• 为输入提供唯一 ID，以便您可以轻松检索它们。
• 使用 jQuery 的 .css() 设置 background-image: 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 });
  });
}

<强> HERE 是代码。

更新:(参见评论)

要与 jQuery minicolors 集成 .change() 处理程序必须以不同方式注册:

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

<强> HERE 是使用 jQuery miniColors 的示例插件。