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

    С удивлением обнаружил, что до сих пор не коснулся темы выбора цвета. Спешу исправить это недоразумение и расскажу о еще одном плагине к библиотеке 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
    ТюТю
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 10

      0
      Здорово! Спасибо.
        +1
        Лучше бы обзор разных колорпикеров привели. Не думаю, что кто-то умудрится не разобраться в трех функциях конкретного скрипта, а вот сравнение разных скриптов вполне полезно.
          0
            –1
            И? То есть если где-то в инете существует некий материал, то он однозначно и исчерпывающе раскрывает данную тему? Не смешите.

            Тем более там всего 3 штуки. Я могу навскидку назвать еще 5.
              0
              если вы это можете, то данный «обзорчик» точно не для вас. на хабре не только мегатрупрофи обитают же.
                –1
                Я не сказал, что это интересно мне. Я сказал, это вполне полезно.
          0
          Однако я баг нашел, простой клик не перетаскивает кружочек :)
            +1
            Бывают же совпадения… Разговариваю сейчас со своим программистом о том, что нужно найти хороший колорпикер и параллельно открываю хабр, а тут сразу пост на эту тему. Спасибо)
              0
              Отлично! Спасибо большое, как раз в новом стартапе задумался на тему выбора цвета, правда мне надо сразу всю цветовую палитру, но думаю поковырять плагин и может что полезно получится :)
                0
                Весьма неплохо. Спасибо!

                Only users with full accounts can post comments. Log in, please.