Виджет выбора цвета (цветовое кольцо, модель hsv)
- масштабируемый
- html5
- оптимизирован для работы с мобильными устройствами
- не требует дополнительных библиотек
Пример использования
1. Подключаем скрипт
Код html:
<script src="html5kellycolorpicker.min.js"></script>
2. Добавляем поле ввода с которым будет взаимодействовать виджет и поле для вывода виджета (тег canvas)
Код html:
<canvas id="picker"></canvas>
<input id="color" type="text" />
3. Создаем объект для которого указываем в массиве входных параметров соответствующие полю ввода и полю вывода виджета идентификаторы
Код javascript:
new KellyColorPicker({place : 'picker', input : 'color', size : 150});
Возможно также вместо идентификаторов использовать класс поля ввода, тогда нет необходимости указывать куда выводить виджет, он будет отображаться во всплывающем окне при клике на поле ввода
Код javascript:
var colorpickers = KellyColorPicker.attachToInputByClass('colorpicker', {alpha_slider : true, size : 200});
Где colorpicker - класс поля ввода для которого необходимо добавить возможность выбора цвета. Так в примере ниже, виджет выведен подобным образом. Для более тонкой настройки см. подробную документацию.
Актуальная версия расширения, примеры и тесты работы доступны на GitHub'e.
Картинки Рисунок №1 by nradiowave, HTML5 Color Picker, #javascript #web