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 функция Функция обратного вызова вызывается в случае выбора цвета

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

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

Один отзыв

  1. Денис:

    Доброго утра. Подскажите, а как сделать в случае выбора определенного цвета, он сохранялся на все страницы, где присутствует класс, который подключен к скрипту, до завершения сессии? Ну то есть пока не выйдешь с сайта. Благодарю за внимание.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *