從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，謝謝。

來源

2011-12-18 Claes Gustavsson

步驟：

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

來源

2011-12-18 17:27:58 kubetz

嗨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？

回答

相關問題