Простой компонент для выбора цвета так же, как вы выбираете цвет в Adobe Photoshop
Двойная лицензия на лицензии MIT и GPL.
Плоский режим.
$('#colorpickerHolder').ColorPicker({flat: true});
Прикреплено к DOMElement и использует обратные вызовы для предварительного просмотра цвета и добавления анимации.
$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
}
});
Прикрепите файлы Javascript и CSS к вашему документу. Отредактируйте файл CSS и исправьте пути к изображениям и измените цвета, чтобы они соответствовали теме вашего сайта.
<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
<script type="text/javascript" src="js/colorpicker.js"></script>
Все, что вам нужно сделать, это выбрать элементы в jQuery и вызвать плагин.
$('input').ColorPicker(options);
Хэш параметров. Все параметры являются необязательными.
| eventName | string | Желаемое событие для запуска colorpicker. По умолчанию: 'click' |
| color | string or hash | Цвет по умолчанию. Строка для шестнадцатеричного цвета или хеша для RGB и HSB ({r: 255, r: 0, b: 0}). По умолчанию: 'ff0000' |
| flat | boolean | Независимо от того, добавляется ли элемент выбора цвета к элементу или срабатывает событие. Значение по умолчанию: false |
| livePreview | boolean | Независимо от того, будут ли значения цвета заполнены в полях при изменении значений на селекторе или поле. Если установить false, то это может увеличить скорость. По умолчанию: true |
| onShow | function | Функция обратного вызова срабатывает при отображении выбора цвета |
| onBeforeShow | function | Функция обратного вызова активирована до отображения выбора цвета |
| onHide | function | Функция обратного вызова срабатывает при скрытии выбора цвета |
| onChange | function | Функция обратного вызова срабатывает при изменении цвета |
| onSubmit | function | Функция обратного вызова срабатывает, когда выбран цвет |
Если вы хотите установить новый цвет.
$('input').ColorPickerSetColor(color);
Аргумент «color» имеет тот же формат, что и цвет опций, строка для шестнадцатеричного цвета или хеш для RGB и HSB ({r: 255, r: 0, b: 0}).
colorpicker.zip (73 kb): jQuery, файлы Javascript, файлы CSS, изображения, примеры и инструкции.