pColor - интеграция на сайт.

Кодировка плагина UTF-8

Начало работы

На веб-странице между тегами < head> подключить JavaScript и CSS-стили указав путь к файлам.

<link rel="stylesheet" href=" путь к файлу / pcolor.min.css">
<script type="text/javascript" src=" путь к файлу / pcolor.min.js"></script>

Вы можете подключить pColor к любым блочным тегам или к input имеющим атрибут атрибут id или class..


<input id="test-1" name="" type="button" value="Выбрать цвет" />

jQuery(function($) {
	$("#test-1").pColor();
})

Так как плагин написан в первую очередь для пользовательского интерфейса , то по умолчанию все опции отключены.

Options - Варианты

Установить значение выбранного цвета:


<input id="test-2" name="" type="text" value="Выбрать цвет" />

jQuery(function($) {
	$("#test-2").pColor({
		value : true
	
	});
})

Установить значение и выполнить заливку выбранным цветом:


<a id="test-3" onclick="return false" href="#">Выбрать цвет</a>

jQuery(function($) {
	$("#test-3").pColor({
		value : true ,
		fill : true
	
	});
})

Установить первоначальный цвет, значение, заливку ( 1-вариант ):


<span  id="test-4">Выбрать цвет<span>

jQuery(function($) {
	$("#test-4").pColor({
		value : true ,    // значение ( volue / text )
		fill : true ,     // заливка
		color : '#FF0000' // первоначальный цвет
	
	});
})
Выбрать цвет

Установить первоначальный цвет, значение, заливку ( 2-вариант ):


// задать первоначальный цвет
// установив атрибут data-color="ffc000"

<input data-color="ffc000" id="test-5" name="" type="button" value="Выбрать цвет" />


jQuery(function($) {
	$("#test-5").pColor({
		value : true ,
		fill : true 
	});
})

Callback-функция возвращает выбранный ( HEX-цвет , Объект ):


<div id="test-onChange" >
	<input data-color="ffc000" id="test-6" name="" type="button" value="Выбрать цвет" />
</div>

jQuery(function($) {
	$("#test-6").pColor({
		value : false ,
		fill : false ,
		color : '#00b0f0',
		onChange :  function(c,o) {
			$("#test-onChange").css('background',c);
			o.attr('disabled',true);
		
		}
	});
})

Выбор темы оформления ( skin ):


jQuery(function($) {
	$("#test-7").pColor({
		skin : 'green'
	});

	$("#test-8").pColor({
		skin : 'blue'
	});

	$("#test-9").pColor({
		skin : 'orange'
	});
})

Языковой пакет ( Language pack ) а так же для charset=windows-1251":


jQuery(function($) {
	$("#test-10").pColor({
		textMS : 'Theme colors',      // Цвета темы
		textWEB : 'Web colors',       // Веб-цвета
		textCom : 'Standard colors' , // Стандартные цвета
	});
})

Оформление селектора:


jQuery(function($) {
	$("#test-11").pColor({
		 // selectorClass : 'Ваш класс', по умолчанию 'pcolorSelector'    
		selectorCss : true , // Применить стиль 
		fill : true          // Залить селектор
	});
})

Подключение по имени класса:

Если у селектора нет атрибута ID то атрибут ID будет присвоен ему автоматически


jQuery(function($) {
	$(".notId").pColor({
		selectorCss : true , // Применить стиль 
		fill : true          // Залить селектор
	});
})

Options - Сводная таблица

Options Свойства По умолчанию
value
Устанавливает значение для селектора false
fill Заливка селектора false
color Устанавливает первоначальный цвет ""
skin

Устанавливает тему оформления. Доступны: green , blue , orange

Имя класса добавляется к основному классу .colorPicker-box Пример:( .colorPicker-box.green )

""
selectorCss Оформление селектора. Прикрепляет класс к селектору false
selectorClass Оформление селектора. Имя класса для селектора pcolorSelector
textMS Языковой пакет Цвета темы
textWEB Языковой пакет Веб-цвета
textCom Языковой пакет Стандартные цвета
onChange Callback-функция возвращает выбранный (HEX-цвет , Объект) function() {}