jQuery Color Picker — виджет выбора цвета

jQuery Color Picker — это плагин для jQuery реализующий виджет выбора цвета для вашего сайта, на мой взгляд, это самый симпатичный и простой плагин подобного рода.

Данный плагин был протестирован мной на верное отображение в следующих браузерах IE6 +, FF 1.5 +, Opera, Safari, Chrome — и он показал себя отлично, все работает, и работает как надо.

Для того что бы начать использовать данный виджет на вашем сайте вам необходимо подключить файлы виджета к нашей странице для этого в блоке страницы head нужно добавить следующий код:

<script type="text/javascript" src="js/colorpicker.js"></script>
<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />

Этот код будет верным при условии, что вы распаковали содержимое скачанного архива в корень вашего сайта, если вы положили файлы плагина в другое место, то укажите в атрибутах src верные пути к файлам плагина, а так же не забудьте подключить jQuery до этого кода.

На этом подключение плагина завершено, теперь мы можем его использовать, для этого достаточно написать несколько строк кода:

$('#input-id').ColorPicker({
	onSubmit: function(hsb, hex, rgb, el) {
		$(el).val(hex);
		$(el).ColorPickerHide();
	},
	onBeforeShow: function () {
		$(this).ColorPickerSetColor(this.value);
	}
})

Тут мы прикручиваем наш виджет к полю для ввода (тэг input). Теперь давайте кратко разберем, что же тут происходит. Первое, что мы делаем это вызываем функцию нашего плагина для тега элемента input с id равным input-id в качестве единственного параметра передаем объект наших настроек, который содержит 2 функции обратного вызова onSubmit и onBeforeShow. Функция onSubmit определяет поведение плагина при выборе цвета, а именно она устанавливает в наше поле для ввода шестнадцатеричное значение цвета, onBeforeShow — как видно из названия вызывается перед показом виджета и она устанавливает начальный цвет для нашего виджета равный значению цвета в поле ввода.

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

$('#colorpickerHolder').ColorPicker({flat: true});

Ну и по традиции давайте посмотрим, что делает этот код. Тут код вызывает функцию плагина для элемента с id равным colorpickerHolder, и передает в нее объект параметров. Объект параметров содержит единственное значение flat равное true, которое сообщает плагину, что нужно встроиться в содержимое страницы. Для того, что бы у вас не возникло ни каких проблем, с отображением виджета настоятельно рекомендую в качестве элемента, в который нужно встроить виджет, использовать блочные элементы страницы.

Теперь давайте рассмотрим объект параметров плагина:

eventName	строка	Имя события при срабатывании, которого будет отображаться виджет. По умолчанию: ‘click’
color	строка или объект	Цвет по умолчанию. Строка для шестнадцатеричного цвета или объект для цвета в RGB и HSB ({r:255, r:0, b:0}) . По умолчанию: ‘ff0000’
flat	логическое (true/false)	Определяет поведение отображение виджета, если true, то виджет будет вложен в родительский элемент, для которого вызывается функция плагина, если false – то виджет будет отображен по срабатыванию события eventName
livePreview	логическое (true/false)	Если true то поле для ввода, для которого вызвана функция плагина будет автоматически заполняться значением цвета при его выборе, если установить этот параметр в false, то этим можно повысить производительность плагина. По умолчанию true.
onShow	функция	Функция обратного вызова срабатывает после отображения виджета
onBeforeShow	функция	Функция обратного вызова вызывается до показа виджета
onHide	функция	Функция обратного вызова срабатывает после скрытия виджета
onChange	функция	Функция обратного вызова вызывается, в случае если цвет был изменен
onSubmit	функция	Функция обратного вызова вызывается в случае выбора цвета

Скачать этот плагин, а так же посмотреть его в действии вы можете тут.

Вот собственно и все что можно рассказать об этом виджете. Используйте его на своих сайтах там, где это необходимо и вы сделаете их более интерактивными.