javascript - JS 库 Piklor 似乎未加载

Question

我对 Js 工作还很陌生，所以这可能是一个蹩脚的问题，但为什么这个库不起作用？我正在使用 Piklor Js 库( http://jillix.github.io/piklor.js/ )创建一个简单的调色板，供用户选择颜色，但即使使用提供的示例，我似乎也无法让它工作。不确定我是否遗漏了一些非常明显的东西，或者我的系统是否有问题。我想你们也许能为我指出正确的方向!这是我一直在使用的代码，就在 Piklor 网页上，但我无法让它工作。

    <script src="piklor.js"></script>
<div class="picker-wrapper">
    <button class="btn btn-default">Select color</button>
    <div class="color-picker">
    </div>
</div>
<script>
window.addEventListener("load", function () {
    var pk = new Piklor(".color-picker", [
            "#1abc9c"
          , "#2ecc71"
          , "#3498db"
          , "#9b59b6"
          , "#34495e"
          , "#16a085"
          , "#27ae60"
          , "#2980b9"
          , "#8e44ad"
          , "#2c3e50"
          , "#f1c40f"
          , "#e67e22"
          , "#e74c3c"
          , "#ecf0f1"
          , "#95a5a6"
          , "#f39c12"
          , "#d35400"
          , "#c0392b"
          , "#bdc3c7"
          , "#7f8c8d"
        ], {
            open: ".picker-wrapper .btn"
        })
      , wrapperEl = pk.getElm(".picker-wrapper")
      , header = pk.getElm("header")
      , footer = pk.getElm("footer")
      ;

    pk.colorChosen(function (col) {
        wrapperEl.style.backgroundColor = col;
        header.style.backgroundColor = col;
        footer.style.backgroundColor = col;
    });
});
</script>

任何帮助将不胜感激!另外，如果我解释得不够，请告诉我，我会尽力详细解释!

Answer 1

好的，解决方案:

有一个样式表。它不在 github 存储库中，但 Piklor 在他们的网站上使用了它，而且它很短:

.color-picker {
    background: rgba(255, 255, 255, 0.75);
    padding: 10px;
    border: 1px solid rgba(203, 203, 203, 0.6);
    border-radius: 2px;
}

.color-picker > div {
    width: 40px;
    display: inline-block;
    height: 40px;
    margin: 5px;
    border-radius: 100%;
    opacity: 0.7;
}

.picker-wrapper {
    padding: 20px;
}

.color-picker > div:hover {
    opacity: 1;
}

归功于他们的文件:http://jillix.github.io/piklor.js/css/custom.css