使用jquery从colorpicker设置渐变backgroundcolor？

Question

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

我有两个使用“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

步骤：

• 为输入提供唯一ID，以便您轻松检索它们。
• 使用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 });
  });
}

HERE 是代码。

更新（见评论）

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

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

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