我正在使用jQuery ColorPicker 插件,我想在一个页面上多次使用它,并且每个颜色选择器框都必须连接到一个输入字段。
我有以下 HTML 代码
<div class="r" style="position: relative; height: 50px;">
<div class="color-picker2">
<div></div>
<input type="text" name="idesign-menu-level-0[color]" id="colorpickerField" class="color-picker-input" value="" />
</div>
</div>
<div style="clear:both"></div>
<div class="r" style="position: relative;">
<div class="color-picker2">
<div></div>
<input type="text" name="idesign-menu-level-0[color]" id="color" class="color-picker-input" value="" />
</div>
</div>
我有以下 jQuery 代码
(function($) {
$('.color-picker2').each(function(o) {
var _this = this;
$(this).ColorPicker({
livePreview: true,
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
}
});
});
}) (jQuery)
我有 onChange 操作的代码,但我不知道如何将此更改链接到相关的输入字段。如果可能的话,如果十六进制代码也输入到输入字段中,我希望 ColorPicker 的颜色也会发生变化。
我确信有一种方法可以将这两者联系起来,但我只是不知道如何!
提前致谢
卡尔
没关系,现在只是用下面的 jQuery 代码弄清楚了
(function($) {
$('.color-picker2').each(function(o) {
var colorPicker = $(this);
var colorPickerInput = $(this).children('input');
$(this).ColorPicker({
livePreview: true,
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$(colorPickerInput).val('#' + hex);
}
});
});
}) (jQuery)