Документация для разработчиков
Темная тема

Примеры

Стандартный диалог с выбором цвета по умолчанию

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;
	}
	
})();


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

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

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

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

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
© «Битрикс», 2001-2020, «1С-Битрикс», 2020
Наверх