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

    0

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

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

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

    1. 0

      0

      А что мешает вместо 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. 0

    0

    А если мы хотим несколько элементов на странице и возможность изменять цвет не 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 пикеров и инпуты, которые к ним относятся будут менять свои значения даже при движении мышки по шкале, а при нажатии на кружочек — закрываться.

  3. 0

    0

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

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

      1. 0

        0

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

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *