Class BX.UI.SplitButton

BX.UI.SplitButton class allows creating split buttons. Split buttons consist of two parts: main and additional button. Each is defined by the class BX.UI.SplitSubButton. BX.UI.SplitButton is descendant from class BX.UI.Button, that's why parameters can be specified for both the complete button as well as its individual parts.

new BX.UI.SplitButton([options])

Creates an object type BX.UI.SplitButton with specified options settings.

• options {Object}

  Set of button options. All settings are optional. Because BX.UI.SplitButton is descendant from class BX.UI.Button, then all options for constructor BX.UI.SplitButton match with settings BX.UI.Button with the following exceptions and additions:

• state {BX.UI.SplitButton.State}

  Button status. Specified by the enumerations BX.UI.SplitButton.State.

• mainButton {object}

  Main button settings.

  • props {object.} — set of HTML button attributes.
  • onclick {function(BX.UI.SplitSubButton, MouseEvent)} — handler for mouse click event.
  • events {object.} — set of event handlers.
  • tag {BX.UI.Button.Tag} — button tag.
  • className {string} — additional CSS class.
• menuButton {object}

  Additional button settings. Format matches with mainButton settings.

• menuTarget {BX.UI.SplitSubButton.Type}

  Defines button with menu next to it. Available values: BX.UI.SplitSubButton.Type.MAIN — main button. BX.UI.SplitSubButton.Type.MENU — additional button.

• tag {BX.UI.Button.Tag}

  Parameter is ignored. Specified in settings mainButton and menuButton.

• round {boolean}

  Parameter is ignored. Split button cannot be round.

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: "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();
				}
			}
		],
		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);
			}
		},
	},

	//Attributes for split button container
	props: {
		id: "xxx"
	},

	//Events for complete button
	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 inherits all instance methods of class BX.UI.Button.

splitButton.getMainButton(): BX.UI.SplitSubButton

Returns main button object.

splitButton.getMenuButton(): BX.UI.SplitSubButton

Returns additional button object.

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

Sets or resets button status.

• state {BX.UI.SplitButton.State} — button status. Set by enumeration BX.UI.SplitButton.State. To install the status by default, specify as null.

BX.UI.SplitSubButton

Class BX.UI.SplitSubButton compiles main portions of split button - main and additional buttons.

subButton.getSplitButton(): BX.UI.SplitButton

Returns split button object.

subButton.isMainButton(): boolean

Returns true, when object is for main button.

subButton.isMenuButton(): boolean

Returns true, when object is for additional.

subButton.setActive([flag=true]): BX.UI.SplitSubButton

Sets or reset button active status.

subButton.isActive(): boolean

Returns true, when button is active.

subButton.setDisabled([flag=true]): BX.UI.SplitSubButton

Blocks and unblocks button.

subButton.isDisabled(): boolean

Returns true, when button is blocked.

subButton.setHovered([flag=true]): BX.UI.SplitSubButton

subButton.isHovered(): boolean

Returns true, when button is hovered by a mouse pointer (not pseudo class :hover).

subButton.getContainer(): Element

Returns link to button's DOM element.

subButton.getTag()

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

subButton.setProps(props:object.): BX.UI.SplitSubButton

Sets HTML attributes.

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

subButton.getProps(): object.

Returns specified HTML attributes.

subButton.setDataSet(dataset:object.): BX.UI.SplitSubButton

Sets Data attributes.

• dataset {object.} — set of button's Data attributes. When values is null, deletes it.

subButton.getDataSet(): DOMStringMap

Returns button's Data attributes.

subButton.setClass(className:string): BX.UI.SplitSubButton

Sets additional CSS class.

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

subButton.removeClass(className:string): BX.UI.SplitSubButton

Deletes addition CSS class.

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

subButton.bindEvent(eventName:string, callback:function): BX.UI.SplitSubButton

Sets an event handler.

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

subButton.unbindEvent(eventName:string): BX.UI.SplitSubButton

Deletes event handler.

• eventNamev {string} — event name.

subButton.bindEvents(events:object.): BX.UI.SplitSubButton

Sets event handlers.

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

subButton.unbindEvents(events:string[]): BX.UI.SplitSubButton

Deletes event handlers.

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