使用jquery从颜色选择器设置渐变背景颜色？答案

【问题标题】：Set gradient backgroundcolor from colorpicker with jquery?使用jquery从颜色选择器设置渐变背景颜色？
【发布时间】：2011-12-18 16:15:13
【问题描述】：

我希望能够选择 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>

如何根据输入字段设置背景颜色？并提出建议，谢谢。

【问题讨论】：

标签： jquery colors

【解决方案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 是代码。

更新：（见 cmets）

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

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

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

【讨论】：

嗨，dzejkej，非常感谢。我已经尝试过了，但我无法让它工作，我首先不得不将颜色选择器更改为 minicolors（abeautifulsite.net/blog/2011/02/…），因为我有颜色选择器的页面加载了 ajax 并在单独的页面上测试了 jscolor 选择器和当我在 ajax 页面中使用它时，它不起作用。所以我找到了 minicolor 那个，它在我的页面中工作，但我不能让你的代码与那个选择器一起工作？我将在下面发布我的代码。
@ClaesGustavsson 我用代码更改和工作示例更新了我的答案 - 请看一下，不要忘记投票并接受答案:)。此外，您应该更新您的问题，而不是写一个答案。请编辑您的问题并从那里添加答案中的文本并删除您的答案。
dzejkel!!!你是男人 :-) 非常感谢你！我必须删除 $(document).ready( function() { $(".color").miniColors({ }); 才能使其工作。但现在它工作完美！非常感谢！