jQuery ColorPicker — выбираем цвет

С удивлением обнаружил, что до сих пор не коснулся темы выбора цвета. Спешу исправить это недоразумение и расскажу о еще одном плагине к библиотеке jQuery — ColorPicker. Сразу хочу предупредить, плагин использует png-файлы, и в нашем любимом IE6 это аукается небольшими проблемами.
Как обычно, сначала демонстрация примеров, а уже потом будем разбираться, как это использовать.

Пример: http://www.linkexchanger.su/2008/69.html


Нам понадобится библиотека jQuery, сам плагин colorpicker.js, довольно много картинок рабочей панели colorPicker'a (картинки включены в архив).

Описания стилей colorPicker'a находятся непосредственно в файле примера и в общем лучше всего их и не трогать, разве что вынести в отдельный файл.

А мы разберем первый пример с самым пожалуй, простым вариантом использования — colorPicker как элемент страницы.

HTML-код — проще не бывает:
<div id=«colorpickerHolder»></div>

Просто элемент div, который выступает в качестве контейнера для нашего colorPicker'a. А ниже javascript код, который вызовет сам colorPicker.

1. $(document).ready(function(){
2.  // пример №1
3.  $('#colorpickerHolder').ColorPicker({flat: true});
4. });

Мы передаем плагину опцию flat со значением true — именно это определяет вариант отображения colorPicker'a.

Следующий вариант использования в примере №2 — мы присоединяем colorPicker к элементу input. HTML-код можно было бы и не приводить:
<input id=«colorpickerField» type=«text» value=«00ff00» />

И более «насыщенный», чем в первом примере javascript-код:

1. $(document).ready(function(){
2. // пример №2
3. $('#colorpickerField').ColorPicker({
4.  onSubmit: function(hsb, hex, rgb) {
5.   $('#colorpickerField').val(hex);
6.  },
7.  onBeforeShow: function () {
8.   $(this).ColorPickerSetColor(this.value);
9.  }
10. })
11. .bind('keyup', function(){
12.  $(this).ColorPickerSetColor(this.value);
13. });
14. });

Здесь мы вызываем colorPicker и передаем ему две опции — onSubmit и onBeforeShow, в качестве значений которых выступают функции обратного вызова. В onSubmit определяется функция, которая будет вызвана в момент, когда необходимый цвет выбран и нажат значок подтверждения выбора в правом нижнем углу, а в onBeforeShow определяется функция, которая будет вызвана перед тем, как colorPicker будет выбран.

Звучит немного запутано, да к тому же цепочка вызовов дополнена связыванием события keyup с еще одной функцией. Давайте взглянем на это с практической стороны и попробуем описать все это по-русски. Начнем с конца…

Итак, с элементом input, который имеет идентификатор colorpickerField мы связываем событие keyup. Функция, которая будет выполнена при наступлении этого события, установит цвет на котором будет открыт colorPicker — да собственно это видно даже из ее названия.

Теперь про два параметра, которые мы передаем плагину. Перед тем как colorPicker будет показан (onBeforeShow) вызывается таже самая функция, что и по событию keyup, и делает она тоже самое. Ну а после того, как цвет выбран (onSubmit) — его значение в шестнадцатиричном виде записывается в элемент input.

Теперь третий пример — colorPicker «скрывается» за картинкой вставленной в элемент div. Сначала HTML-код:
<div id=«colorSelector»><div></div></div>

Здесь с помощью стиля мы задаем фон, который по умолчанию будет «просвечивать» через картинку в формате png (посмотрите в исходном коде соответствующие стили).

И javascript-код для этого примера:

1. // пример №3
2.  $('#colorSelector').ColorPicker({
3.   color: '#0000ff',
4.   onShow: function (cp) {
5.     $(cp).fadeIn(500);
6.     return false;
7.   },
8.   onHide: function (cp) {
9.     $(cp).fadeOut(500);
10.     return false;
11.   },
12.   onChange: function (hsb, hex, rgb) {
13.     $('#colorSelector div')
14.         .css('backgroundColor', '#'+hex);
15.   }
16.  });

В опции color мы указываем цвет, на котором откроется colorPicker, в опциях onShow и onHide (названия говорят сами за себя, правда?) мы, пользуясь методами библиотеки jQUery задаем некую анимацию, немного оживляя появление и скрытие colorPicker'а.

Немного об onChange — при изменении текущего цвета мы немедленно считываем его и изменяем css-свойство backgroundColor для элемента div, заставляя таким образом изменяться тот фон, который «просвечивает» через png-изображение.

В общем через примеры мы познакомились практически со всеми доступными опциями. Упомяну разве еще eventName — событие, по которому будет вызван colorPicker. По умолчанию это click. И еще livePreview — позволяет отключить изменение цифровых значений в процессе выбора цвета, если установить эту опцию в false. По умолчанию — true.