javascript - 使用Spectrum的openWithLink

我正在尝试使Spectrum颜色选择器按其文档中的说明工作。我想使用一个按钮来切换颜色选择器，以保持界面整洁。无论出于什么原因，它都不起作用。

$("#btn-toggle").click(function() {
  $("#toggle").spectrum("toggle");
  return false;
});

<script src="http://bgrins.github.com/spectrum/spectrum.js"></script>
<link href="http://bgrins.github.com/spectrum/spectrum.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sp-replacer sp-light">
  <div class="sp-preview">
    <div class="sp-preview-inner" style="background-color: rgb(255, 235, 205);"></div>
  </div>
</div>
<button id="btn-toggle">Toggle</button>

https://bgrins.github.io/spectrum/#skinning-nonInput

最佳答案

您缺少HTML和JS的关键部分-您实际上尚未为Spectrum颜色选择器创建输入，也未对其进行初始化。

您复制的JS片段仅是如何触发现有Spectrum颜色选择器的toggle方法的示例；但是您仍然必须设置颜色纠察器本身。

将此添加到您的HTML：

<input type='text' id="toggle" />

然后，您应该删除<div class="sp-replacer sp-light">元素，因为该元素将在初始化时由插件自动自动生成。

然后将此添加到您的JS：

$("#toggle").spectrum({
    color: "rgb(255, 235, 205)"
});
// or even just $("#toggle").spectrum(); to initialize it with the default color

完整的工作示例在这里：https://jsfiddle.net/gkz8ukhb/

另外，在示例HTML中，您要在Spectrum之后加载jQuery，但是由于Spectrum插件需要jQ，因此您需要先加载jQ，否则会出现jQuery is not defined错误。