Устанавливаем Jquery плагин ColorPicker

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

Ничего сложного в установке и настройке этого плагина для JQuery нет. Для работы нам понадобится библиотека JQuery, собственно сам плагин Colorpicker.js и куча картинок рабочей области самого Colorpickera. Все эти фалы вы сможете найти в конце этой статьи.

Подключаем библиотеку, файл стилей и сам плагин к вашей странице (лучше всего это делать в разделе HEAD).

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

Далее будем разбирать по конкретным примерам.

Пример №1 — colorPicker располагается непосредственно на странице.

Размещаем элемент div, который будет выступать в роли контейнера для Colorpicker’а:

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

Ну и JavaScript код, для его вызова:

<script type="text/javascript">
$(document).ready(function(){
  $('#colorpickerHolder').ColorPicker({
    flat: true;
  });
});
</script>

Как видите, ничего сложного. В результате мы получим блок с Colorpicker’ом на своей странице, который будет выглядеть так:

Пример №2 — colorPicker изменяет атрибут value у элемента input.

HTML код так-же очень прост, на этот раз мы привязываем Colorpicker к элементу input:

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

JavaScript код также претерпел изменения:

<script type="text/javascript">
$(document).ready(function(){
  $('#colorpickerField').ColorPicker({
        onSubmit: function(hsb, hex, rgb) {
                $('#colorpickerField').val(hex);
        },
        onBeforeShow: function () {
                $(this).ColorPickerSetColor(this.value);
        }
  })
  .bind('keyup', function(){
        $(this).ColorPickerSetColor(this.value);
  });
});
</script>

Теперь немного разъясню что же мы такого сделали. Colorpicker у нас теперь привязан к элементу input и по нажатию на последний, выполняется событие keyup, функция которого, установит цвет, с которым откроется Colorpicker. Далее выполняется функция onBeforeShow, которая делает тоже самое (что и видно по содержанию). Когда цвет выбран, вызывается функция onSubmit которая записывает значение цвета в шестнадцатеричном виде в атрибут value элемента input.

Вот что из этого получилось:

Пример №3 — при нажатии на кнопку открывается colorPicker и изменяет цвет Div’а.

Сделаем кнопку для вызова Colorpicker и элемент div, у которого собственно и будем менять цвет:

<input type="button" id="selectcolor" value="Изменить цвет">
<div id="changecolor"></div>

Добавим JavaScript код:

<script type="text/javascript">
$(document).ready(function(){
  $('#selectcolor').ColorPicker({
        color: '#53ccd0',
        onShow: function (cp) {
                $(cp).fadeIn(500);
                return false;
        },
        onHide: function (cp) {
                $(cp).fadeOut(500);
                return false;
        },
        onChange: function (hsb, hex, rgb) {
                $('#changecolor').css('backgroundColor', '#' + hex);
        }
  });
});
</script>

И получим удобную форму для изменения цвета элементов:

Пройдемся по коду. В этот раз мы привязали вызов Colorpicker’а к элементу с id=selectcolor. Опция color указывает цвет по умолчанию, с которым откроется Colorpicker. Опции onShow и onHide вызывают функции открытия и закрытия Colorpicker, при этом делая это плавно (регулируется параметром fadeId и fadeOut). Опция onChange вызывает функцию, меняющую цвет нашего div’а, изменяя его свойство backgroundColor.