javascript - 使用 Spectrum 的 openWithLink

Question

我正在尝试让 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

Answer 1

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

您复制的 JS 片段只是如何触发 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，因此您需要先加载它，否则您会得到 jQuery is not defined错误。