Class BX.UI.Button

Class creates standard buttons.

new BX.UI.Button([options])

Creates object BX.UI.Button with indicated settings for options.

• options {Object}

  Set of button options. All settings are optional.

• text {String}

  Button text.

• size {BX.UI.Button.Size}

  Button size. Specified by enumeration BX.UI.Button.Size .

• color {BX.UI.Button.Color}

  Button color. Specified by enumeration BX.UI.Button.Color .

• state {BX.UI.Button.State}

  Button status. Specified by enumeration BX.UI.Button.State .

• icon {BX.UI.Button.Icon}

  Button icon. Specified by enumeration BX.UI.Button.Icon .

• tag {BX.UI.Button.Tag}

  Button tag. Be default, button is displayed via the tag <button>. Button can become a link or an input-element via the parameter tag and enumeration BX.UI.Button.Tag.

• menu {object}

  Menu settings. List of parameters is defined by constructor options BX.PopupMenuWindow.

• props {object.}

  Set of HTML button attributes.

• dataset {object.}

  Set of button Data attributes.

• onclick {function(BX.UI.Button, MouseEvent)}

  Handler for mouse clicks event. Handler receives two arguments: button object (class instance BX.UI.Button) and a mouse click object.

• events {object.}

  Sets event handlers.

• round {boolean}

  If true, button becomes round.

• noCaps {boolean}

  If true, button text is not capitalized.

• dropdown {boolean}

  If true, shows a pointer icon next to button on the right. Option is automatically enabled, when context menu is specified in the parameter menu.

• id {string}

  Button ID. Can be used for identifying a button in event handlers or for searching an object in the set.

• className {string}

  Additional CSS class.

var button = new BX.UI.Button({
	id: "my-button",
	text: "Hello, Button!",
	noCaps: true,
	round: true,
	menu: {
		items: [
			{ text: "Detail description", href: "/path/to/page" },
			{ text: "Edit", disabled: true },
			{
				text: "Move",
				onclick: function(event, item) {
					alert("Item click processing");
				}
			},
			{ delimiter: true },
			{
				text: "Close",
				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
});

button.getContainer(): Element

Returns link to button's DOM item.

var button = new BX.UI.Button({ text: "Hello, Button!" });
var layout = BX.create("div", {
	props: {
		className: "container"
	},
	children: [button.getContainer()]
});

button.renderTo(container): Element

Inserts button to DOM node.

• container {Element} — DOM node with newly inserted button.

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

<script>
(function() {
	var button = new BX.UI.Button({ text: "Hello, Button!" });
	var container = document.getElementById("container");
    button.renderTo(container);
})();
</script>

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

Sets a button text.

• text {Element} — button text.

var button = new BX.UI.Button({
	text: "Activate",
	size: BX.UI.Button.Size.LARGE,
	color: BX.UI.Button.Color.SUCCESS,
	onclick: function(button, event) {
		if (button.isActive())
		{
			button.setText("Activate");
			button.setActive(false);
		}
		else
		{
			button.setText("Deactivate");
			button.setActive();
		}
	}
});

button.getText(): string

Returns button text.

button.setProps(props:object.): BX.UI.Button

Sets HTML attributes.

• props {object.} — set of button's HTML attributes. When attribute values is null, it will be deleted.

var button = new BX.UI.Button();
button
	.setText("My button")
	.setProps({ 
		"data-role": "action",
		"id": null //delete the attribute 
	});

button.getProps(): object.

Returns specified HTML attributes.

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

Sets Data attributes.

• dataset {object.} — sets button's Data attributes. When value is null, it will be deleted.

var button = new BX.UI.Button();
button
	.setText("My button")
	.setDataSet({ 
		"role": "action",
		"id": null //delete attribute 
	});

button.getDataSet(): DOMStringMap

Returns button's Data attributes.

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

Sets additional CSS class.

• className {string} — name for CSS class or several classes, separated by a space character.

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

Deletes an additional CSS class.

• className {string} — name of CSS class or several classes, separated by a space character.

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

Returns a button tag (enumeration value BX.UI.Button.Tag).

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

Sets or resets a button size.

• size {BX.UI.Button.Size} — button size. Sets by enumeration BX.UI.Button.Size. To set size by default, set the value as null.

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

Returns button size.

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

Sets or resets button color.

• color {BX.UI.Button.Color} — button color. Set by enumeration BX.UI.Button.Color. To set color by default, specify the value as null.

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

Returns a button color.

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

Sets or reset a button status.

• state {BX.UI.Button.State} — button status. Sets by enumeration BX.UI.Button.State. To set status by default, specify the value as null.

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

Returns button status.

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

Sets or resets button icon.

• icon {BX.UI.Button.Icon} — button icon. Sets by enumeration BX.UI.Button.Icon. To remove icon, specify the value null.

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

Returns a button's icon.

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

Sets an ID.

• id {string} — button ID.

button.getId(): string|null

Returns a button ID. If the ID is not specified, returns null.

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

Sets or resets a context menu.

• options {objects} — menu settings. List of parameters is defined by the constructor options BX.PopupMenuWindow. To reset a context menu, set options as false.

button.getMenuWindow(): BX.PopupMenuWindow|null

Returns a context menu object.

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

Cancels button text capitalization. To return default behavior, set flag as false.

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

Shows icon as pointer next to button text on the right.

To rollback to default behavior, set flag as false.

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

Makes button to be round-shaped. To rollback to default behavior, set flag as false.

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

Sets an event handler.

• eventName {string} — event name.
• callback {function(button:BX.UI.Button, event:MouseEvent)} — event handler function.

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

Deletes an event handler.

• eventName {string}— event name.

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

Sets event handlers.

• events {object.} — set of event handlers.

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

Deletes event handlers.

• events {string[]} — array of event names.

Helper methods

Convenient helper methods for handling button statuses:

• button.setActive([flag=true]) — sets or resets button activity status.
• button.isActive() — returns true, when button is active.
• button.setHovered([flag=true]) — sets mouse hover status.
• button.isHovered() — returns true, when button has a hover status (not pseudo class :hover).
• button.setDisabled([flag=true]) — blocks or unblocks a button.
• button.isDisabled() — returns true, when button is unblocked.
• button.setWaiting([flag=true]) — sets standby status as a "spinner".
• button.isWaiting() — возвращает true, when button is in standby as a "spinner".
• button.setClocking([flag=true]) — sets state as "ticking clock".
• button.isClocking() — returns true, when button as "ticking clock".