jqueryでcolorpickerのグラデーションの背景色を設定しますか？

Question

2色を選択し、グラデーションの背景にdivを表示することができます。

"jscolor.com"で2色のピッカーを行い、色を選択でき、選択した色が入力フィールドに表示されます。

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プラグインを使用した例です。