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

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

Нужные файлы Вы сможете найти в этом архиве. Сам плагин colorpicker.js и библиотеку jQuery можно найти в разделе Download.

Для начала подключим в разделе HEAD нашей HTML-страницы нужные файлы, конечно же соблюдая пути к ним (у Вас они могут отличаться).

<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>

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

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

HTML-код – проще не бывает:

<div id="colorpickerHolder"></div>

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

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

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

Следующий вариант использования в примере №2 – мы присоединяем colorPicker к элементу input. HTML-код можно было бы и не приводить:

<input id="colorpickerField" type="text" value="00ff00" />

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

$(document).ready(function(){
// пример №2
$('#colorpickerField').ColorPicker({
  onSubmit: function(hsb, hex, rgb) {
    $('#colorpickerField').val(hex);
  },
  onBeforeShow: function () {
    $(this).ColorPickerSetColor(this.value);
  }
 })
.bind('keyup', function(){
  $(this).ColorPickerSetColor(this.value);
});
});

Здесь мы вызываем 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-код для этого примера:

// пример №3
  $('#colorSelector').ColorPicker({
	color: '#0000ff',
	onShow: function (cp) {
		$(cp).fadeIn(500);
		return false;
	},
	onHide: function (cp) {
		$(cp).fadeOut(500);
		return false;
	},
	onChange: function (hsb, hex, rgb) {
		$('#colorSelector div')
                .css('backgroundColor', '#'+hex);
	}
  });

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

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

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

Ну и конечно ссылка на первоисточник: http://eyecon.ro/colorpicker/

Да, и еще. Может кто-то встречал colorPicker для jQuery в другом исполнении – было бы любопытно посмотреть…

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru