Примеры

var box = BX("color-box");

var picker = new BX.ColorPicker({
		bindElement: box,
		defaultColor: "#000000",
		onColorSelected: function(color, picker) {
		box.style.backgroundColor = color;
	}
});

picker.open();

var box = BX("color-box");

var picker = new BX.ColorPicker({
	bindElement: box,
	onColorSelected: function(color, picker) {
		box.style.backgroundColor = color;
	},
	popupOptions: {
		offsetTop: 10,
		offsetLeft: 10,
		events: {
			onPopupClose: function() {
				console.log("closed");
			},
			onPopupShow: function() {
				console.log("open");
			}
		}
	}
});

picker.open();

var box = BX("color-box");

var picker = new BX.ColorPicker({
	bindElement: box,
	allowCustomColor: false,
	colorPreview: false,
	onColorSelected: function(color, picker) {
		box.style.backgroundColor = color;
	},
	colors: [
		["#ace9fb", "#beedf1", "#9ae1dd"],
		["#fff", "#000", "#def"],
		["#ffbdbc", "#ffcbd8", "#fec5e4"],
		["#c5bbec", "#dbdde0", "#dbf199"]
	]
});

picker.open();

<input type="text" size="10" value="#ffffff" id="input1"> <button id="button1">Выбрать цвет</button><p>
<input type="text" size="10" value="#000000" id="input2"> <button id="button2">Выбрать цвет</button><p>
<input type="text" size="10" value="" id="input3"> <button id="button3">Выбрать цвет<button>

(function() {

	"use strict";

	var picker = new BX.ColorPicker({
		bindElement: null,
		defaultColor: "#000000",
		popupOptions: {
			offsetTop: 10,
			offsetLeft: 10,
			angle: true,
			events: {
				onPopupClose: function() {
					console.log("closed");
				},
				onPopupShow: function() {
					console.log("open");
				}
			}
		}
	});

	BX.bind(BX("button1"), "click", onButtonClick);
	BX.bind(BX("button2"), "click", onButtonClick);
	BX.bind(BX("button3"), "click", onButtonClick);

	function onButtonClick(event)
	{
		var target = event.target;
		var input = target.previousElementSibling;

		picker.open({
			selectedColor: BX.type.isNotEmptyString(input.value) ? input.value : null,
			bindElement: target,
			onColorSelected: onColorSelected.bind(input)
		});
	}
	
	function onColorSelected(color, picker)
	{
		this.value = color;
	}
	
})();

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.