Color Picker - jQuery плагин

Описание

Простой компонент для выбора цвета так же, как вы выбираете цвет в 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, изображения, примеры и инструкции.

Лог изменений (на английском)

23.05.2009
Added: close on color selection example
Added: restore original color option
Changed: color update on key up event
Fixed: colorpicker hide and show methods
Fixed: reference to options. Multiple fields with colorpickers is possible now.
Fixed: RGB to HSB convertion
22.08.2008
Fixed bug: where some events were not canceled right on Safari
Fixed bug: where teh view port was not detected right on Safari
16-07-2008
Fixed bug where the letter 'F' could not be typed in the Hex field
Fixed bug where the changes on Hex field where not parsed
Added new option 'livePreview'
08-07-2008
Fixed typo in the code, both JavaScript and CSS
Changed the cursor for some elements
Added new demo explaining how to implement custom skin
07.07.2008
The first release.