我正在使用spectrum.js作为颜色选择器,我非常喜欢它。但是有两件事我不知道该怎么做。我的配置如下:
$("#myColorThing").spectrum({
preferredFormat: "rgb",
showPaletteOnly: true,
showPalette: true,
hideAfterPaletteSelect: true,
color: "",
showInput: true,
allowEmpty: true,
palette: [
[
"rgb(000,000,128)",
"rgb(000,000,255)",
"rgb(000,128,000)",
"rgb(000,128,128)",
"rgb(000,128,255)"
],
[...],...
]
});我的问题是:
palette选项和我的5行5科尔的颜色。呈现的小部件看起来有点像一个“透明”的/checkered图像的下拉窗口,这意味着没有选择。很好。如果我激活了小部件并选择了一个颜色,那么有什么方法可以重新处理吗?将小部件设置回无选择状态?palette中的“颜色”选项,以便选择它可以清除支持输入字段的值?发布于 2017-07-19 21:37:48
我找到了一个解决问题1的方法,我稍微修改了我的代码。我创建了基本的html input元素,spectrum小部件连接到该元素。然后我添加了一个button,它的onClick操作执行...spectrum("destroy"),然后重新创建频谱实例。A la:
基本html:
<div id='colorDiv' class='form-group'>
<label for='myColorThing'>Event Color</label>
<input type='text' name='myColorThing' id='myColorThing'>
<button id='defaultColor' class='btn btn-sm btn-default'>Default Color</button>
</div>js例程做重置魔术:
$("#defaultColor").on("click", function () {
resetColorPicker();
});
function resetColorPicker() {
$("#myColorThing").spectrum("destroy");
$("#myColorThing").val("");
$("#myColorThing").spectrum({
preferredFormat: "rgb",
showPaletteOnly: true,
showPalette: true,
hideAfterPaletteSelect: true,
color: "",
showInput: true,
allowEmpty: true,
palette: [
[
"rgb(000,000,128)",
"rgb(000,000,255)",
"rgb(000,128,000)",
"rgb(000,128,128)",
"rgb(000,128,255)"
],
[...],...
]
});
}https://stackoverflow.com/questions/45179510
复制相似问题