Класс BX.UI.SplitButton

Описание

Класс BX.UI.SplitButton позволяет создавать двойные кнопки. Двойная кнопка состоит из двух частей: основной и дополнительной кнопки. Каждая из них определяется классом BX.UI.SplitSubButton. BX.UI.SplitButton является наследником класса BX.UI.Button, поэтому задавать параметры можно как целой кнопке, так и отдельным ее частям.

new BX.UI.SplitButton([options])

Создает объект типа BX.UI.SplitButton с указанными настройками options.

• options {Object}

  Коллекция опций кнопки. Все настройки являются необязательными. Так как BX.UI.SplitButton является наследником класса BX.UI.Button, то все опции констуктора BX.UI.SplitButton совпадают с настройками BX.UI.Button со следующими исключениями и дополнениями:

• state {BX.UI.SplitButton.State}

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

• mainButton {object}

  Настройки основной кнопки.

  • props {object.} — коллекция HTML-атрибутов кнопки.
  • onclick {function(BX.UI.SplitSubButton, MouseEvent)} — обработчик события нажатия мышью.
  • events {object.} — коллекция обработчиков событий.
  • tag {BX.UI.Button.Tag} — тег кнопки.
  • className {string} — дополнительный CSS-класс.
• menuButton {object}

  Настройки дополнительной кнопки. Формат совпадет с настройками mainButton.

• menuTarget {BX.UI.SplitSubButton.Type}

  Определяет кнопку, около которой покажется меню. Допустимые значения: BX.UI.SplitSubButton.Type.MAIN — основная кнопка. BX.UI.SplitSubButton.Type.MENU — дополнительная кнопка.

• tag {BX.UI.Button.Tag}

  Параметр игнорируется. Указывается в настройках mainButton и menuButton.

• round {boolean}

  Параметр игнорируется. Двойная кнопка не может быть круглой.

var splitButton = new BX.UI.SplitButton({
	id: "my-split-button",
	text: "Hello, Split Button!",
	noCaps: true,
	className: "ddddd-dddd",
	size: BX.UI.Button.Size.LARGE,
	color: BX.UI.Button.Color.PRIMARY,
	icon: BX.UI.Button.Icon.BUSINESS,
	//state: BX.UI.SplitButton.State.ACTIVE,
	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();
				}
			}
		],
		offsetTop: 5
	},
	//menuTarget: BX.UI.SplitSubButton.Type.MENU,

	mainButton: {
		tag: BX.UI.Button.Tag.LINK,
		props: {
			href: "/"
		},
		onclick: function(button, event) {
			console.log("main button click", button, event);
			button.setActive(!button.isActive());
		},
		events: {
			mouseenter: function(button, event) {
				console.log("main button mouseenter", button, event);
			}
		},
	},

	menuButton: {
		onclick: function(button, event) {
			console.log("extra button click", button, event);
			button.setActive(!button.isActive());
		},
		props: {
			"data-abc": "123"
		},
		events: {
			mouseenter: function(button, event) {
				console.log("extra button mouseenter", button, event);
			}
		},
	},

	//Атрибуты для контейера двойной кнопки
	props: {
		id: "xxx"
	},

	//События для целой кнопки
	onclick: function(btn, event) {
		console.log("onclick", btn);
	},
	events: {
		click: function(splitButton, event) {
			splitButton.setActive(!splitButton.isActive());
			console.log("click", splitButton, event, this);
		},
		mouseenter: function(splitButton, event) {
			console.log("mouseenter", splitButton, event, this);
		},
		mouseout: function(splitButton, event) {
			console.log("mouseout", splitButton, event, this);
		}
	},
});

BX.UI.SplitButton наследует все экземлярные методы класса BX.UI.Button.

Другие методы

splitButton.getMainButton(): BX.UI.SplitSubButton

Возвращает объект основной кнопки.

splitButton.getMenuButton(): BX.UI.SplitSubButton

Возвращает объект дополнительной кнопки.

splitButton.setState(state:BX.UI.SplitButton.State): BX.UI.SplitButton

Устанавливает или сбрасывает состояние кнопки.

• state {BX.UI.SplitButton.State} — состояние кнопки. Задается перечислением BX.UI.SplitButton.State. Чтобы установить состояние по умолчанию, необходимо указать значение null.