从colorpicker与jQuery的设置渐变backgroundcolor？

问题描述：

我想要选择2种颜色并显示带渐变背景的div！从colorpicker与jQuery的设置渐变backgroundcolor？

我有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>

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

答

步骤：

给输入唯一的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插件的例子。

嗨dzejkej和非常感谢。我已经尝试过，但我无法得到它的工作，我第一次必须改变colorcicker minicolors，而不是（http://abeautifulsite.net/blog/2011/02/jquery-minicolors-a-color-selector-for- input-controls /），因为我有colorpicker的页面加载了ajax，并在单独的页面上测试了jscolor选择器，当我在ajax页面中使用它时，它不起作用。所以我找到了一个微型的代码，它可以在我的页面中工作，但是我无法让你的代码与该代码工作？生病发布我的代码如下。 – 2011-12-20 08:12:51

@ClaesGustavsson我通过更改代码和工作示例更新了我的答案 - 请看看，不要忘记upvote并接受答案:)。你也应该更新你的问题，而不是写一个答案。请编辑你的问题，并从答案中添加文本，并删除你的答案。 – kubetz 2011-12-20 10:24:54

dzejkel !!!你是男人:-)非常感谢你！我不得不删除 $（文件）。就绪（函数（）{$ （）miniColors（{} ） “的色彩。”; ，使其工作但现在它的工作完美非常感谢。！ – 2011-12-20 10:51:09

从colorpicker与jQuery的设置渐变backgroundcolor？

相关推荐