Pull to refresh

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

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

Пример: x3k.name/habrahabr/jquery.colorpicker.html

image

Нам понадобится библиотека 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. });
* This source code was highlighted with Source Code Highlighter.


Мы передаем плагину опцию 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. });
* This source code was highlighted with Source Code Highlighter.


Здесь мы вызываем 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.  });
* This source code was highlighted with Source Code Highlighter.


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

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

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

Ну и скачать архив: x3k.name/habrahabr/jquery.colorpicker.rar
ТюТю
Tags:
Hubs:
Total votes 26: ↑20 and ↓6 +14
Views 19K
Comments Comments 10