首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Spectrum.js将颜色选择器重置为“空白”

Spectrum.js将颜色选择器重置为“空白”
EN

Stack Overflow用户
提问于 2017-07-19 01:21:27
回答 1查看 1.9K关注 0票数 0

我正在使用spectrum.js作为颜色选择器,我非常喜欢它。但是有两件事我不知道该怎么做。我的配置如下:

代码语言:javascript
复制
$("#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)"
        ],
        [...],...
    ]
});

我的问题是:

  1. 我只使用palette选项和我的5行5科尔的颜色。呈现的小部件看起来有点像一个“透明”的/checkered图像的下拉窗口,这意味着没有选择。很好。如果我激活了小部件并选择了一个颜色,那么有什么方法可以重新处理吗?将小部件设置回无选择状态?
  2. 是否有可能将“透明”的/checkered图像作为palette中的“颜色”选项,以便选择它可以清除支持输入字段的值?
EN

回答 1

Stack Overflow用户

发布于 2017-07-19 21:37:48

我找到了一个解决问题1的方法,我稍微修改了我的代码。我创建了基本的html input元素,spectrum小部件连接到该元素。然后我添加了一个button,它的onClick操作执行...spectrum("destroy"),然后重新创建频谱实例。A la:

基本html:

代码语言:javascript
复制
<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例程做重置魔术:

代码语言:javascript
复制
$("#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)"
            ],
            [...],...
        ]
    });
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45179510

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档