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