Почему мой инструмент выбора цвета jscolor работает неправильно? - PullRequest
Новая
       8

Почему мой инструмент выбора цвета jscolor работает неправильно?

0 голосов
/ 13 июня 2019

Я скачал последнюю версию jscolor.js (2.05), но у меня были некоторые проблемы при его использовании. В CSS я пытался перестать отображать значение цвета на кнопке. Я пытался использовать 'valueElement: null;' но я получаю ошибку «Неизвестное свойство» для valueElement. С тех пор я узнал, что 'borderWidth', 'backgroundColor' и 'insetColor' также выдают ту же ошибку.

Поскольку valueElement не распознается, у меня нет возможности отключить значение цвета над кнопкой.

Я подозреваю, что это также привело к смещению выбора при его открытии на веб-странице. Радуга в середине прямоугольника, кажется, смещена в пределах всего сборщика. Вот ссылка на изображение проблемы: (https://ibb.co/9N8dHXs)

Как отключить значение цвета на кнопке и почему все эти свойства не распознаются? 

  .jscolor {
            border: white;
            width: 50px;
            position:'right';

            valueElement: null; /*throws 'Unknown Property' error*/
            shadow: false;
            borderWidth:0;   /*throws 'Unknown Property' error*/
            backgroundColor:'transparent'; /*throws 'Unknown Property' error*/
            insetColor:'#000'; /*throws 'Unknown Property' error*/
            padding: 0;
        }
<div class="sidebar" id="sidebar">
            <div>
                <h4 class="sect-head">BACKGROUND</h4>
                <div class="sect-child">
                    Sky Color
                    <input class="jscolor" onchange="setRendererColor(this.jscolor)" value="FFE4A6">
                </div>

1 Ответ

0 голосов
/ 13 июня 2019

Если вы внимательно посмотрите на страницу их примеров, здесь: http://jscolor.com/examples/ и поищите пример «Связывание с различными элементами», вы найдете именно то, что вам нужно.

Отчто я могу сказать, есть 3 различия между их кодом для кнопки и вашим.Я подозреваю, что первое не имеет значения.

  1. Они использовали button, а вы использовали input type='button'
  2. В атрибуте класса они также предоставляют то, что кажется json - выпредоставлен только класс jscolor
  3. Вы дали элементу значение - оно печатается и используется в качестве цвета фона
  4. Вы используете обработчик событий для обновления цвета кнопки.
  5. Когда пользователь нажал его, ему присваивается класс jscolor-active вместо из jscolor - следовательно, ваш css больше не применяется.Вместо этого вы можете добавить к кнопке другой класс в дополнение к jscolor.Таким образом, javascript все еще может идентифицировать элементы и манипулировать ими, а добавленный вами класс останется нетронутым, и, следовательно, ваш CSS будет продолжать применяться.

Вот ваш код: 

<input class="jscolor" onchange="setRendererColor(this.jscolor)" value="FFE4A6">

И вот их: 

<button class="jscolor
    {valueElement:'valueInput', styleElement:'styleInput'}">
    Click here to pick a color
</button>
...