Создание кнопок на JavaScript API

Подключение и показ

Библиотека ui.buttons позволяет создавать кнопки не только разметкой, но и с помощью JavaScript API.

Подключение на странице

\Bitrix\Main\UI\Extension::load("ui.buttons");

Показ

Чтобы показать кнопку на странице, необходимо создать объект класса BX.UI.Button и вызвать метод renderTo.

<div id="container"></div>

<script>
(function() {
	var button = new BX.UI.Button({ text: "Привет, кнопка!" });
	var container = document.getElementById("container");
	button.renderTo(container);
})();
</script>

Метод getContainer возвращает ссылку на DOM-элемент кнопки. Используйте его для гибкого построения интерфейсов.

var button = new BX.UI.Button({ text: "Привет, кнопка!" });
var layout = BX.create("div", {
	props: {
		className: "container"
	},
	children: [button.getContainer()]
});

Размеры и заглавные буквы

Размеры

Размер кнопки задается опцией size и перечислением BX.UI.Button.Size.

var button = new BX.UI.Button({
	text: "Привет, кнопка!",
	size: BX.UI.Button.Size.LARGE
});

Допустимые значения BX.UI.Button.Size:

BX.UI.Button.Size.LARGE — большая кнопка (47px)
BX.UI.Button.Size.MEDIUM — средняя кнопка (39px), значение по умолчанию
BX.UI.Button.Size.SMALL — маленькая кнопка (33px)
BX.UI.Button.Size.EXTRA_SMALL — максимально маленькая кнопка (26px)

Заглавные буквы

По умолчанию текст кнопки приводится к верхнему регистру. Опция noCaps=true позволяет отменить это поведение.

var button = new BX.UI.Button({
	text: "Обычный текст",
	color: BX.UI.Button.Color.SUCCESS,
	noCaps: true
});

Цвета

Опция color отвечает за цвет кнопки. Значение этой опции задаются перечислением BX.UI.Button.Color.

var button = new BX.UI.Button({
	text: "Привет, кнопка!",
	color: BX.UI.Button.Color.SUCCESS
});

Допустимые значения BX.UI.Button.Color::

BX.UI.Button.Color.DANGER
BX.UI.Button.Color.DANGER_DARK
BX.UI.Button.Color.DANGER_LIGHT
BX.UI.Button.Color.SUCCESS
BX.UI.Button.Color.SUCCESS_DARK
BX.UI.Button.Color.SUCCESS_LIGHT
BX.UI.Button.Color.PRIMARY_DARK
BX.UI.Button.Color.PRIMARY
BX.UI.Button.Color.SECONDARY
BX.UI.Button.Color.LINK
BX.UI.Button.Color.LIGHT
BX.UI.Button.Color.LIGHT_BORDER

Состояния

Кнопка может иметь состояние. Например, быть активной или заблокированной. Опция state и перечисление BX.UI.Button.State управляют этой возможностью.

var button = new BX.UI.Button({
	text: "Привет, кнопка!",
	state: BX.UI.Button.State.DISABLED
});

Допустимые значения BX.UI.Button.State:

BX.UI.Button.State.HOVER — состояние при наведении мыши
BX.UI.Button.State.ACTIVE — состояние при нажатии
BX.UI.Button.State.DISABLED — заблокировано
BX.UI.Button.State.CLOCKING — ожидание в виде "часиков"
BX.UI.Button.State.WAITING — ожидание в виде "спиннера"

Тег кнопки

По умолчанию кнопка отображается с помощью тега <button>. С помощью параметра tag и перечисления BX.UI.Button.Tag кнопка может стать ссылкой или input-элементом.

var button = new BX.UI.Button({
	text: "Привет, кнопка!",
	tag: BX.UI.Button.Tag.LINK
});

Допустимые значения BX.UI.Button.Tag:

BX.UI.Button.Tag.BUTTON — тег <button>
BX.UI.Button.Tag.LINK — тег <a>
BX.UI.Button.Tag.SUBMIT — тег <input type="submit">
BX.UI.Button.Tag.INPUT — тег <input type="button">

Иконка

Для создания кнопок с иконкой используется параметр icon и перечисление BX.UI.Button.Icon.

var button = new BX.UI.Button({
	text: "Привет, кнопка!",
	icon: BX.UI.Button.Icon.INFO
});

Допустимые значения BX.UI.Button.Icon:

BX.UI.Button.Icon.UNFOLLOW
BX.UI.Button.Icon.FOLLOW
BX.UI.Button.Icon.ADD
BX.UI.Button.Icon.STOP
BX.UI.Button.Icon.START
BX.UI.Button.Icon.PAUSE
BX.UI.Button.Icon.ADD_FOLDER
BX.UI.Button.Icon.SETTING
BX.UI.Button.Icon.TASK
BX.UI.Button.Icon.INFO
BX.UI.Button.Icon.SEARCH
BX.UI.Button.Icon.PRINT
BX.UI.Button.Icon.LIST
BX.UI.Button.Icon.BUSINESS
BX.UI.Button.Icon.BUSINESS_CONFIRM
BX.UI.Button.Icon.BUSINESS_WARNING
BX.UI.Button.Icon.CAMERA
BX.UI.Button.Icon.PHONE_UP
BX.UI.Button.Icon.PHONE_DOWN
BX.UI.Button.Icon.PHONE_CALL
BX.UI.Button.Icon.BACK
BX.UI.Button.Icon.REMOVE
BX.UI.Button.Icon.DOWNLOAD
BX.UI.Button.Icon.DONE
BX.UI.Button.Icon.DISK
BX.UI.Button.Icon.LOCK
BX.UI.Button.Icon.MAIL
BX.UI.Button.Icon.CHAT
BX.UI.Button.Icon.PAGE
BX.UI.Button.Icon.CLOUD
BX.UI.Button.Icon.EDIT
BX.UI.Button.Icon.SHARE

HTML-атрибуты

Опция props позволяет установить произвольные HTML-атрибуты кнопки. Например, href для кнопки-ссылки или data-атрибут.

var button = new BX.UI.Button({
	text: "Подключить",
	size: BX.UI.Button.Size.LARGE,
	tag: BX.UI.Button.Tag.LINK,
	color: BX.UI.Button.Color.LIGHT_BORDER,
	props: {
		href: "/",
		id: "my-link-id",
		"data-role": "action"
	}
});

Также можно установить свой CSS класс-модификатор.

var button = new BX.UI.Button({
	text: "Подключить",
	className: "my-button"
});

Обработка событий

Основное предназначение кнопок — это выполнение некоторого действия после нажатия. Если кнопка представляет собой ссылку, то достаточно определить атрибут href (см. пример выше). В остальных случаях требуется написать обработчик нажатия в параметре onclick.

var button = new BX.UI.Button({
	text: "Активировать",
	size: BX.UI.Button.Size.LARGE,
	color: BX.UI.Button.Color.SUCCESS,
	onclick: function(button, event) {
		if (button.isActive())
		{
			button.setText("Активировать");
			button.setActive(false);
		}
		else
		{
			button.setText("Деактивировать");
			button.setActive();
		}
	}
});

Обработчик получает два аргумента: объект кнопки button (экземпляр класса BX.UI.Button) и объект нажатия мыши event.

Для установки других браузерных событий используется опция events.

var button = new BX.UI.Button({
	text: "Нажми меня",
	size: BX.UI.Button.Size.LARGE,
	color: BX.UI.Button.Color.SUCCESS,
	events: {
		click: function(button, event) {
			button.setActive(!button.isActive());
			console.log("click", button, event);
		},
		mouseenter: function(button, event) {
			console.log("mouseenter", button, event);
		},
		mouseout: function(button, event) {
			console.log("mouseout", button, event);
		}
	}
});

Круглая и Dropdown кнопки

Для создания круглой кнопки необходимо установить параметр round в значение true.

var button = new BX.UI.Button({
	text: "Круглая кнопка",
	color: BX.UI.Button.Color.PRIMARY,
	round: true
});

Опция dropdown=true добавляет иконку в виде стрелки справа от названия кнопки. Такой внешний вид предполагает показ меню после нажатия.

var button = new BX.UI.Button({
	text: "Dropdown",
	color: BX.UI.Button.Color.PRIMARY,
	dropdown: true
});

Одним из стандартных сценариев использования кнопок является показ контекстного меню после нажатия. Параметр menu определяет те же самые настройки, что и класс BX.PopupMenuWindow. Кнопка автоматически становится активной после открытия меню и неактивной, когда меню закрыто.

var button = new BX.UI.Button({
	text: "Меню",
	color: BX.UI.Button.Color.PRIMARY,
	dropdown: true,
	menu: {
		items: [
			{ text: "Детальное описание", href: "/path/to/page" },
			{ text: "Редактировать", disabled: true },
			{
				text: "Перенести",
				onclick: function(event, item) {
					alert("Обработка нажатия на пункт");
				}
			},
			{ delimiter: true },
			{
				text: "Закрыть",
				onclick: function(event, item) {
					item.getMenuWindow().close();
				}
			}
		],
		closeByEsc: true,
		offsetTop: 5,
	},
});

Двойная кнопка

Для создания двойной кнопки используется класс BX.UI.SplitButton. Он является наследником класса BX.UI.Button, поэтому настройки размера, цвета и иконки совпадают с настройками обычной кнопки.

var splitButton = new BX.UI.SplitButton({
	text: "Добавить",
	color: BX.UI.Button.Color.PRIMARY,
	size: BX.UI.Button.Size.LARGE,
	icon: BX.UI.Button.Icon.BUSINESS
});

Однако состояние двойной кнопки определяется перечислением BX.UI.SplitButton.State.

var splitButton = new BX.UI.SplitButton({
	text: "Добавить",
	color: BX.UI.Button.Color.PRIMARY,
	size: BX.UI.Button.Size.LARGE,
	icon: BX.UI.Button.Icon.BUSINESS,
	state: BX.UI.SplitButton.State.MENU_ACTIVE
});

Допустимые значения BX.UI.SplitButton.State:

BX.UI.SplitButton.State.HOVER
BX.UI.SplitButton.State.MAIN_HOVER
BX.UI.SplitButton.State.MENU_HOVER
BX.UI.SplitButton.State.ACTIVE
BX.UI.SplitButton.State.MAIN_ACTIVE
BX.UI.SplitButton.State.MENU_ACTIVE
BX.UI.SplitButton.State.DISABLED
BX.UI.SplitButton.State.MAIN_DISABLED
BX.UI.SplitButton.State.MENU_DISABLED
BX.UI.SplitButton.State.CLOCKING
BX.UI.SplitButton.State.WAITING

Параметры можно указывать как для целой кнопки, так и для отдельных ее частей. В опциях mainButton и menuButton задаются идивидуальные настройки основной и дополнительной кнопки.

var splitButton = new BX.UI.SplitButton({
	text: "Добавить",
	color: BX.UI.Button.Color.PRIMARY,
	size: BX.UI.Button.Size.LARGE,
	icon: BX.UI.Button.Icon.BUSINESS,
	mainButton: {
		props: {
			href: "/"
		},

		tag: BX.UI.Button.Tag.LINK
	},

	menuButton: {
		onclick: function(button, event) {
			button.setActive(!button.isActive());
		},

		props: {
			"data-abc": "123"
		},

		events: {
			mouseenter: function(button, event) {
				console.log("menu button mouseenter", button, event);
			}
		},
	},
});

Обработчики событий в первом аргументе получают объект класса BX.UI.SplitSubButton.

Стандартные кнопки

Для типовых кнопок "Сохранить", "Применить", "Отмена" и др. существуют вспомогательные классы. Эти классы предустанавливают цвет и текст кнопки.

Вспомогательные классы обычной кнопки (наследники BX.UI.Button):

BX.UI.SaveButton
BX.UI.CreateButton
BX.UI.AddButton
BX.UI.SendButton
BX.UI.ApplyButton
BX.UI.CancelButton
BX.UI.CloseButton

Вспомогательные классы двойной кнопки (наследники BX.UI.SplitButton):

BX.UI.SaveSplitButton
BX.UI.CreateSplitButton
BX.UI.AddSplitButton
BX.UI.SendSplitButton
BX.UI.ApplySplitButton
BX.UI.CancelSplitButton
BX.UI.CloseSplitButton

Любое предустановленное значение можно переопределить.

var button = new BX.UI.SaveButton({
	color: BX.UI.Button.Color.PRIMARY
});