使用频谱的openWithLink

Question

我试图让频谱颜色选择器在他们的文档中工作；我想使用一个按钮来切换颜色选择器，以保持界面整洁。不管是什么原因，都没用。

​

$("#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

Answer 1

您缺少了HTML & JS的一个关键部分--实际上您还没有为光谱颜色选择器创建一个输入，也没有初始化它。

您复制的JS片段只是一个示例，说明了如何触发现有的频谱颜色选择器的方法；但您仍然必须设置颜色纠偏本身。

将其添加到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中，jQuery是在频谱之后加载的，但是由于频谱插件需要jQ，所以您需要先加载它，否则就会得到jQuery is not defined错误。