使用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 });
  });
}

这是代码.

更新:(见评论)

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

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

这是使用 jQuery miniColors插件的示例.