Класс BX.UI.Button

Класс создает стандартные кнопки

new BX.UI.Button([options])

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

options {Object}
Коллекция опций кнопки. Все настройки являются необязательными.

text {String}
Текст кнопки.

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

color {BX.UI.Button.Color}
Цвет кнопки. Определяется перечислением BX.UI.Button.Color .

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

icon {BX.UI.Button.Icon}
Иконка кнопки. Задается перечислением BX.UI.Button.Icon .

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

menu {object}
Настройки меню. Список параметров определяется опциями конструктора BX.PopupMenuWindow.

props {object.}
Коллекция HTML-атрибутов кнопки.

dataset {object.}
Коллекция Data-атрибутов кнопки.

onclick {function(BX.UI.Button, MouseEvent)}
Обработчик события нажатия мышью. Обработчик получает два аргумента: объект кнопки (экземпляр класса BX.UI.Button) и объект нажатия мыши.

events {object.}
Коллекция обработчиков событий.

round {boolean}
Если равен true, кнопка станет круглой.

noCaps {boolean}
Если равен true, текст кнопки не будет приводиться к верхнему регистру.

dropdown {boolean}
Если равен true, справа от текста кнопки покажется иконка в виде стрелочки. Опция автоматически включается, если задано контекстное меню в параметре menu.

id {string}
Идентификатор кнопки. Может использоваться для идентификации кнопки в обработчиках событий или для поиска объекта в коллекции.

className {string}
Дополнительный CSS-класс.

var button = new BX.UI.Button({
	id: "my-button",
	text: "Hello, Button!",
	noCaps: true,
	round: 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,
	},
	props: {
		id: "xxx"
	},
	className: "ddddd-dddd",
	onclick: function(btn, event) {
		console.log("onclick", btn);
	},
	events: {
		mouseenter: function(button, event) {
			console.log("mouseenter", button, event, this);
		},
		mouseout: function(button, event) {
			console.log("mouseout", button, event, this);
		}
	},
	size: BX.UI.Button.Size.MEDIUM,
	color: BX.UI.Button.Color.PRIMARY,
	tag: BX.UI.Button.Tag.BUTTON,
	icon: BX.UI.Button.Icon.ADD_FOLDER,
	state: BX.UI.Button.State
});

Методы GET

button.getContainer(): Element

Возвращает ссылку на DOM-элемент кнопки.

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

button.getText(): string

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

button.getProps(): object.

Возвращает заданные HTML-атрибуты.

button.getDataSet(): DOMStringMap

Возвращает Data-атрибуты кнопки.

button.getTag(): BX.UI.Button.Tag

Возращает тег кнопки (значение перечисления BX.UI.Button.Tag).

button.getSize(): BX.UI.Button.Size

Возвращает размер кнопки.

button.getColor(): BX.UI.Button.Color

Возвращает цвет кнопки.

button.getState(): BX.UI.Button.State

Возвращает состояние кнопки.

button.getIcon(): BX.UI.Button.Icon

Возвращает иконку кнопки.

button.getId(): string|null

Возвращает идентификатор кнопки. Если идентификатор не задан, возвратит null.

button.getMenuWindow(): BX.PopupMenuWindow|null

Возвращает объект контекстного меню.

Методы SET

button.setText(text): BX.UI.Button

Устанавливает текст кнопки.

text {Element} — текст кнопки.

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.setProps(props:object.): BX.UI.Button

Устанавливает HTML-атрибуты.

props {object.} — коллекция HTML-атрибутов кнопки. Если значение атрибута равно null, он будет удален.

var button = new BX.UI.Button();
button
	.setText("Моя кнопка")
	.setProps({ 
		"data-role": "action",
		"id": null //удалить атрибут 
	});

button.setDataSet(dataset:object.): BX.UI.Button

Устанавливает Data-атрибуты.

dataset {object.} — коллекция Data-атрибутов кнопки. Если значение атрибута равно null, он будет удален.

var button = new BX.UI.Button();
button
	.setText("Моя кнопка")
	.setDataSet({ 
		"role": "action",
		"id": null //удалить атрибут 
	});

button.setClass(className:string): BX.UI.Button

Устанавливает дополнительный CSS-класс.

className {string} — название CSS-класса или нескольких классов, разделенных пробелом.

button.setSize(size:BX.UI.Button.Size): BX.UI.Button

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

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

button.setColor(color:BX.UI.Button.Color): BX.UI.Button

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

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

button.setState(state:BX.UI.Button.State): BX.UI.Button

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

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

button.setIcon(icon:BX.UI.Button.Icon): BX.UI.Button

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

icon {BX.UI.Button.Icon} — иконка кнопки. Задается перечислением BX.UI.Button.Icon. Чтобы убрать иконку, необходимо указать значение null.

button.setId(id:string): BX.UI.Button

Устанавливает идентификатор.

id {string} — идентификатор кнопки.

button.setMenu(options:object|false): BX.UI.Button

Устанавливает или сбрасывает контекстное меню.

options {objects} — настройки меню. Список параметров определяется опциями конструктора BX.PopupMenuWindow. Чтобы сбросить контекстное меню, установите options в значение false.

button.setNoCaps([flag=true]): BX.UI.Button

Отменяет приведение текста кнопки к верхнему регистру. Чтобы вернуть поведение по умолчанию, установите flag в значение false.

button.setDropdown([flag=true]): BX.UI.Button

Показывает иконку в виде стрелочки справа от текста кнопки.

Чтобы вернуть поведение по умолчанию, установите flag в значение false.

button.setRound([flag=true]): BX.UI.Button

Делает кнопку круглой. Чтобы вернуть поведение по умолчанию, установите flag в значение false.

Методы RENDER

button.renderTo(container): Element

Вставляет кнопку в DOM-узел.

container {Element} — DOM-узел, в который будет вставлена кнопка.

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

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

Методы REMOVE

button.removeClass(className:string): BX.UI.Button

Удаляет дополнительный CSS-класс.

className {string} — название CSS-класса или нескольких классов, разделенных пробелом.

Методы BIND, UNBIND

button.bindEvent(eventName:string, callback:function): BX.UI.Button

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

eventName {string} — название события.
callback {function(button:BX.UI.Button, event:MouseEvent)} — функция-обработчик события.

button.unbindEvent(eventName:string): BX.UI.Button

Удаляет обработчик события.

eventName {string}— название события.

button.bindEvents(events:object.): BX.UI.Button

Устанавливает обработчики событий.

events {object.} — коллекция обработчиков событий.

button.unbindEvents(events:string[]): BX.UI.Button

Удаляет обработчики событий.

events {string[]} — массив названий событий.

Вспомогательные методы

Удобные вспомогательные методы для работы с состоянием кнопки:

button.setActive([flag=true]) — устанавливает или сбрасывает активность кнопки.
button.isActive() — возвращает true, если кнопка активна.
button.setHovered([flag=true]) — устанавливает состояние наведения мыши.
button.isHovered() — возвращает true, если кнопка находится в состоянии наведения мыши (не псевдокласс :hover).
button.setDisabled([flag=true]) — блокирует или разблокирует кнопку.
button.isDisabled() — возвращает true, если кнопка заблокированна.
button.setWaiting([flag=true]) — устанавливает состояние ожидания в виде "спиннера".
button.isWaiting() — возвращает true, если кнопка находится в состоянии ожидания в виде "спиннера".
button.setClocking([flag=true]) — устанавливает состояние ожидания в виде "часиков".
button.isClocking() — возвращает true, если кнопка находится в состоянии ожидания в виде "часиков".