A5ButtonDropdown Class
Arguments
- settingsobject
The settings to use to create the button.
- dropdownobject
An A5.Window or A5.Menu class, or any object with a "show" method and an "onHide" event. The "show" method will be called when the user clicks the dropdown button, and the "onHide" event will be extended so that the state of the dropdown button is restored to normal when the dropdown is hidden.
Description
Dropdown button control.
Discussion
The A5.ButtonDropdown can be displayed as etiher a "split" or "dropdown" button. A "dropdown" button will include a dropdown indicator otherwise threat the button in much the same way as a normal button. A "split" button will split the clickable area of the button in two. In a "split" button the dropdown indicator area of the button will call the click event with a "type" of "split", while clicking elsewhere on the button will call the click event with the "type" to "normal".
A "split" button is useful for two scenarios. The first being that the dropdown content selects what the button will do. For example an "Export" button in which you can select the file format to export to. The second being that the dropdown content is actions associated with the button. For example a "New Document" button, which should have options for "From Template..." and "From Existing...".
Example
// assume that bEle is a pointer to an BUTTON element, and wObj is an A5.Window
var newDocButton = new A5.ButtonDropdown({
theme: 'Alpha',
type: 'split',
onClick: function(btc,type){
if(type == 'normal'){
// new document
}
}
},wObj);
newDocButton.bind(bEle);Properties
- typestring
The type of dropdown button. Values can be "dropdown" (the default), or "split".
- dropdownobject
The settings for the dropdown indicator.
- locationstring
The location of dropdown indicator. Values can be "right" (the default) or "bottom".
- classNamestring
The class name to put on the dropdown indicator.
- hoverClassNamestring
The class name to put on the dropdown indicator when the user hovers over it.
- htmlstring
The HTML to put in the dropdown indicator.
- iconstring
The icon to put in the dropdown indicator. See A5.u.icon.
- onClickfunction(button,state)
The code to execute when the button is clicked. The "this" variable of the function will be the BUTTON element.
- buttonobject
The button class.
- typestringnumber
The "type" of click when the dropdown button is a "split" button. Value will be either "normal" or "split".
Methods
- clearContent Method
Clear the contents of the dropdown button to so that the original contents will be used.
- setContent Method
Set the contents of the dropdown button to something other then the original.
- setState Method
Set state of the dropdown button in order to have the dropdown button appear pressed when the dropdown is opened. This will be handled automatically if a dropdown object is passed in.