A5Button Class
Arguments
- settingsobject
The settings to use to create the button.
Description
Button control.
Discussion
The button control is a class that can be used to bind one or more BUTTON elements in the DOM to the styling and content specified by the button control.
Example
// assume that bEle is a pointer to an BUTTON element
var saveButton = new A5.Button({
theme: 'Alpha',
html: 'Save',
onClick: function(){
// save action
}
});
saveButton.bind(bEle);Properties
- themestring
The theme to use on the button.
- overridestring
The overrides to use on the button.
- layoutstring
The layout of the button. A value of "icon text" (the default) or "text icon" which will layout the "icon" and "html" horizontally. A value of "icon" or "text" will only use only "icon" or "text" in the layout. A value of "icon/text" or "text/icon" will layout the "icon" and "html" vertically. A value of "icon-text" or "text-icon" will layout the "icon" and "html" horizontally, but align them to the left and right of the button with any additional width consumed in the center of the button. In all cases the "icon" will be automatically dropped if none is specified.
- htmlstring
The HTML to put in the button.
- iconstring
The icon to put in the button. See A5.u.icon.
- hoverIconstring
The icon to put in the button when the user hovers over it. See A5.u.icon.
- pressedIconstring
The icon to put in the button when it is pressed. See A5.u.icon.
- disabledIconstring
The icon to put in the button when it is disabled. See A5.u.icon.
- tipstring
The TITLE attribute to put in the button that will appear as a tool tip when the user hovers over the button.
- stylestring
The CSS to put on the button.
- classNamestring
The class name to put on the button.
- hoverClassNamestring
The class name to put on the button when the user hovers over it.
- pressedClassNamestring
The class name to put on the button when the user presses it.
- disabledClassNamestring
The class name to put on the button when the button is disabled.
- iconStylestring
The CSS to put on the button icon.
- iconClassNamestring
The class name to put on the button icon.
- badgeobject
The settings for a button badge.
- locationstring
The location of the button badge. Values can be "none" (the default), any combination of "top", "left", "right" and "bottom" separated by a "-" and optionally including a "-edge" sufix to place the badge on the edge of the button. A value of "custom" will place the badge in the button either at the end of content, or where a placeholder of "<badge/>" is placed.
- textstringnumberboolean
The default text for the badge, or a true/false value for display of the badge without text.
- maxnumber
If the text is a number then then maximum value to show in the badge. Any value higher then the max will be the max followed by a "+". The default is 99, so if the number 120 was set on the badge, the badge would show "99+".
- classNamestring
The class name to put on the badge.
- stylestring
The style to put on the badge.
- offsetnumber
The offset of the badge when the location is inside the button but not custom.
- onClickfunction(button)
The code to execute when the button is clicked. The "this" variable of the function will be the BUTTON element.
- buttonobject
The button class.
Methods
- bind Method
Bind BUTTON element.
- create Method
Create and automatically bind a BUTTON element.
- refresh Method
Refresh some or all of the BUTTON elements bound to the A5.Button control.
- setBadge Method
Disable/enable some or all of the BUTTON elements bound to the A5.Button control.
- setDisabled Method
Disable/enable some or all of the BUTTON elements bound to the A5.Button control.
- setDisplay Method
Show/hide some or all of the BUTTON elements bound to the A5.Button control.