Я не могу заставить работать палитру цветов спектра. Что мне не хватает? - PullRequest
0 голосов
/ 07 апреля 2020

Re: http://jsfiddle.net/bgrins/ctkY3/

Я в растерянности. Я не могу заставить работать эту палитру цветов (или любую другую палитру цветов).

Ниже приведено общее содержание HTML тестовой страницы.

У меня есть jquery связанный.

Насколько я могу судить, пути в ссылках правильные (. js и. css).

Я также попытался обернуть встроенные инициализации в «$ (document) .ready (function ()», но это не помогло. Все, что я получаю, это обычные текстовые поля. Это не работает для меня в нескольких браузерах и несколько устройств.

Может кто-нибудь увидеть что-то, что я пропустил?

Возможно, это будет что-то простое, и я буду смущен, но я отчаянно пытаюсь заставить работать хороший сборщик цветов. о третьем, который я пробовал.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spectrum Color Picker - Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="include/spectrum/spectrum.js"></script>
<link rel="stylesheet" href="include/spectrum/spectrum.css" />

<script>
$(".basic").spectrum({
    color: "#f00",
    change: function(color) {
            $("#basic-log").text("change called: " + color.toHexString());
    }
});
</script>

</head>

<body>
<h2>Basic Usage</h2>
<input type='text' class="basic"/>
<em id='basic-log'></em>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 07 апреля 2020
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://bgrins.github.io/spectrum/spectrum.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="http://bgrins.github.io/spectrum/spectrum.js"></script>
</head>

<body>
    <h2>Basic Usage</h2>
    <input type='text' class="basic" />
    <em id='basic-log'></em>
    <script>
        $(".basic").spectrum({
            color: "#f00",
            change: function (color) {
                $("#basic-log").text("change called: " + color.toHexString());
            }
        });
    </script>
</body>

</html>

Это определенно работает, единственное, о чем я могу думать, это то, что css и js загружены неправильно.

0 голосов
/ 08 апреля 2020

** Ответ был двояким.

  1. Необходимо убедиться, что DOM READY (документ полностью загружен) является его частью. В моем случае это было достигнуто путем размещения встроенного сценария инициализации внизу, чуть выше закрывающего тега body. Этого также можно достичь, обернув встроенные инициализации в «$ (document) .ready (function ()» ...

  2. Кроме того, тот факт, что я обслуживал страницу SSL при попытке связать не-SSL версию JQuery была другая его часть. Связав JQuery с "httpS: //" (<- обратите внимание на S), он позаботился о второй части! Live and учиться! </p>

Еще раз, СПАСИБО @ NewTo JS И @AndySong, которые оба дали мне необходимые ответы. **

...