Jx.Button creates a clickable element in the application that is hooked to an instance of Jx.Action. When the button is clicked, it activates its associated Jx.Action instance. When the Jx.Action associated with the button is enabled or disabled, the Jx.Button updates its visual appearance to reflect the current state of the Jx.Action.
Visually, a Jx.Button consists of an <A> tag that may contain either an image, a label, or both (the label appears to the right of the button if both are present). The default styles for Jx.Button expect the image to be 16 x 16 pixels, with a padding of 4px and a border of 1px which results in an element that is 26 pixels high. The width of the button automatically accomodates the image and label as required.
When you construct a new instance of Jx.Button, the button does not automatically get inserted into the application. Typically a button is used as part of building another capability such as a Jx.Toolbar. However, if you want to manually insert the button into your application, you may use the domObj property of the Jx.Button instance. In this case, you will use one of the DOM manipulation functions such as appendChild, and pass button.domObj. For example:
var button = new Jx.Button(myAction, options);
var li = $('myListItem'); //obtain a reference to a DOM element
li.appendChild(button.domObj);
To use a Jx.Button in an application, you must first create an instance of Jx.Action and then pass it as the first parameter to the Jx.Button constructor. The second argument to a Jx.Button constructor is an options object allows configuring the button.
Example:
function myFunc() { alert('you clicked me'); }
var action = new Jx.Action(myFunc);
var options = {
imgPath: 'images/mybutton.png',
tooltip: 'click me!',
label: 'click me'
}
var button = new Jx.Button(action, options);
Summary
| Jx.Button creates a clickable element in the application that is hooked to an instance of Jx.Action. |
| |
| an array of action listeners that are attached to the button. |
| the HTML element that is inserted into the DOM for this button |
| whether the button is enabled or not. |
| |
| |
| triggered when the user clicks the button, processes the actionPerformed event |
| add an action listener to the button |
| remove an action listener from the button |
| implements the PropertyChangeListener interface for handling the enabled state changing on the action associated with this button |
| set the image of this button to a new image URL |
| sets the text of the button. |
| sets the tooltip displayed by the button |
| Flyout buttons expose a panel when the user clicks the button. |
| |
| construct a new instance of a flyout button. |
| Multi buttons are used to contain multiple buttons in a drop down list where only one button is actually visible and clickable in the interface. |
| |
| the currently selected button |
| an array of all available buttons |
| |
| construct a new instance of Jx.Button.Multi. |
| adds one or more buttons to the Multi button. |
| update the menu item to be the requested button. |
| update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons. |
| A Picker button allows the user to choose an item from a list of items. |
| |
| the UL element that contains the items to pick from |
| |
| |
| adds one or more items to the picker, passed as separate arguments. |
| handle the user selecting an item in the list |
| updates the button to contain the picked item |