Устанавливаем 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.

Понравилась статья? Поделиться с друзьями:
Комментарии: 7
  1. Александр

    А как сделать так, чтобы на одной странице было несколько полей и пикеров? В таком случае пример с явно указанным ID не универсален.

    Я про вот это место в коде — $(‘#colorpickerField’).val(hex);
    Если там написать $(this) , то работать почему-то перестает.

    Так что же получается, для каждого инпута надо копировать один и тот же код? Должно быть более изящное решение.

    1. Денис

      А что мешает вместо id использовать class?

      Вообще можно тупо создать переменную с классом, допустим:

      var color_picker = $('.app-colorpicker'); 
      // Всем input, к которым должен подключаться colorpicker, устанавливаем дополнительный класс app-colorpicker.
      color_picker.on('click', function() {
              $(this).addClass('active');
      });
      // При нажатии на input с классом app-colorpicker, присваивается доп. класс active.
              color_picker.ColorPicker({
                      color: '#0000ff',
                      onShow: function (colpkr) {
                              $(colpkr).fadeIn(500);
                              return false;
                      },
                      onHide: function (colpkr) {
                              $(colpkr).fadeOut(500);
                              $('.app-colorpicker.active').removeClass('active');
                              return false;
                      },
                      onChange: function (hsb, hex, rgb) {
                              $('.app-colorpicker.active').css('backgroundColor', '#' + hex);
                      }
              });
      

      на функцию onHide, вешаем доп. команду по убиранию active класса, а onChange срабатывает только на inputб у которого имеется класс active.

      То есть при открытии colorpickera, ему дается класс active и имено на него уже будет добавляться цвет. При закрытии cjlorpckera, класс active убирается. Это позволяет прописать функцию единожды, хоть для 100 colorpickeroв

  2. Александр

    Вопрос отпадает. Нужно добавить аргумент el и все.

            onSubmit: function(hsb, hex, rgb, el) {
                    $(el).val(hex);
            }
    
  3. Александр

    А если мы хотим несколько элементов на странице и возможность изменять цвет не onSubmit событием, а onChange — просто движением мышки по шкале, то тут пришлось попотеть.

    Надо в самом файле colorpicker.js строку

    cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
    

    заменить на

    cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el]);
    

    А в вызове пикера добавить метод onChange:

            $(".colorpicker-field").ColorPicker({
                    onBeforeShow: function () {
                            $(this).ColorPickerSetColor(this.value);
                    },
                    onSubmit: function(hsb, hex, rgb, el) {                 
                            $(el).val(hex);
                            $(el).ColorPickerHide();
                    },
                    onChange: function(hsb, hex, rgb, el) {
                            $(el).val(hex);
                    }
            })
            .bind('keyup', function(){
                    $(this).ColorPickerSetColor(this.value);
            });
    

    Теперь на одной странице может быть хоть 100 пикеров и инпуты, которые к ним относятся будут менять свои значения даже при движении мышки по шкале, а при нажатии на кружочек — закрываться.

  4. Артур

    Подскажите пожалуйста, у меня пикер инициализируется в попап окне, инпуты туда попадают ajax-ом, при необходимости . скрин .
    При первом клике появляется попап-окно и инциализируется пикер, который срабатывает как нужно, на инпуте из скрина. Но, когда я закрываю попап и открываю его заново -> пикер не работает.
    Полагаю, что это связано с ajax загрузкой данных (т.к. в DOM еще нету элементов из попапа). Хотя такого по идее быть не должно, т.к. каждый раз при загрузке попапа идет инициализация пикера (инклудится файл, в котором прописана инциализация).
    Может из-за того, что я несколько раз инициализирую пикер (это из-за того, что у меня не получилось повесить инициализацию на .on(‘click’) , т.к. тут 100%-е отсутствие в DOM нужных элементов).

    При повторном вызове не срабатывает даже alert внутри инициализации пикера.
    Подскажите, может можно как-то
    $(‘.colorPickerMain’).ColorPicker — эту инициализацию переделать под $(document).on().
    Заранее спасибо

    1. admin (автор)

      А скиньте ссылочку на пример, гляну

      1. Артур

        К сожалению ссылку кинуть не могу, т.к. этот сайт запаролен, а клиент очень злой:)
        Но проблему уже решил, если кому вдруг интересно:
        у меня в див засовывался файл, в котором была инициализация пикера используя код$(selector).html(ajax-data);
        Я перед записью информации сделал $(selector).empty(); и записал информацию через $(selector).append(ajax-data);
        Не знаю, как я до этого дошел. Просто перебирал кучу разных вариантов, а множественная инициализация пикера не давала мне покоя.

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Предлагаем вам увидеть огромный перечень индивидуалок в этом популярном сайте для мужчин http://prostitutkiastrahanigirls.com, если вы интересуетесь достижимостью встретиться с изящными индивидуалками двора. | цена 1с управление торговлей