Javascript Spectrum.js将颜色选择器重置为";“空白”;
我使用Javascript Spectrum.js将颜色选择器重置为";“空白”;,javascript,spectrumjs,Javascript,Spectrumjs,我使用spectrum.js作为颜色选择器,我非常喜欢它。但有两件事我不知道该怎么做。我的配置看起来像: $("#myColorThing").spectrum({ preferredFormat: "rgb", showPaletteOnly: true, showPalette: true, hideAfterPaletteSelect: true, color: "", showInput: true, allowEmpty: tru
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)"
],
[...],...
]
});
我的问题是:
调色板
选项,我的调色板有5行5色。呈现的小部件看起来有点像一个下拉列表,带有一个“透明的”/“棋盘格”图像,表示没有选择。好的如果我激活小部件并选择一种颜色,有没有办法重新开始?将小部件设置回无选择状态调色板
中,是否可以将该“透明”/方格图案图像作为“颜色”选项,以便选择它清除背景输入字段的值我找到了解决问题1的方法。我重新编写了一点代码。我创建了
spectrum
小部件所附加的基本htmlinput
元素。然后我添加了一个按钮
,它的onClick
操作执行一个…spectrum(“destroy”)
,然后重新创建spectrum实例。a洛杉矶:
基本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>
$("#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)"
],
[...],...
]
});
}