jQueryColorPickerプラグインを使用しています。
colorSelector要素を使用すると、ユーザーは色を選択できます。色を選択したら、#previewFramedivの背景色を選択した16進数に変更したいと思います。
私はこれを達成するのに問題があります。#previewFrameの色は変更されませんが、#colorSelectorの背景色は変更されます。
<script type="text/javascript">
$(document).ready(function () {
$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('background-color', '#' + hex);
$('#previewFrame div').css('background-color', '#' + hex);
}
});
}
</script>
これがDIVです。
<div id="previewFrame" style="width: 200px; height: 200px; border: 1px solid #000;">
<div style="background-color: #0000ff"></div>
</div>
<div id="colorSelector">
<div style="background-color: #0000ff"></div>
</div>