Создание кнопок на 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
});

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

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

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

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

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

Наверх