> Jx Jx. Button Jx. ColorPanel Jx. Toolbar Index Everything Classes Functions Properties | # Jx. Button 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 | Jx.Button creates a clickable element in the application that is hooked to an instance of Jx.Action.
Properties |
{Array} al | an array of action listeners that are attached to the button.
{Object} domObj | the HTML element that is inserted into the DOM for this button
{Boolean} enabled | whether the button is enabled or not.
Functions |
initialize | create a new button.
onclick | triggered when the user clicks the button, processes the actionPerformed event
addActionListener | add an action listener to the button
removeActionListener | remove an action listener from the button
propertyChanged | implements the PropertyChangeListener interface for handling the enabled state changing on the action associated with this button
setImage | set the image of this button to a new image URL
setLabel | sets the text of the button.
setTooltip | sets the tooltip displayed by the button
Jx. Button. Flyout | Flyout buttons expose a panel when the user clicks the button.
Functions |
initialize | construct a new instance of a flyout button.
Jx. Button. Multi | 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.
Properties |
{<Jx. Button>} activeButton | the currently selected button
{Array} buttons | an array of all available buttons
Functions |
initialize | construct a new instance of Jx.Button.Multi.
add | adds one or more buttons to the Multi button.
setActiveButton | update the menu item to be the requested button.
setButton | update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons.
Jx. Button. Picker | A Picker button allows the user to choose an item from a list of items.
Properties |
{HTMLElement} ul | the UL element that contains the items to pick from
Functions |
initialize | construct a new instance of Jx.Button.Picker
add | adds one or more items to the picker, passed as separate arguments.
clickHandler | handle the user selecting an item in the list
updateButton | updates the button to contain the picked item
> ### Properties ### {Array} al an array of action listeners that are attached to the button. ### {Object} domObj the HTML element that is inserted into the DOM for this button ### {Boolean} enabled whether the button is enabled or not. This is controlled by the Action object that the button is associated with. ### Functions ### initialize
> initialize : function( | action,
> | options | )
create a new button. #### Parameters action {Object} the action to trigger for this button. options {Object} an object containing optional properties for this button. It can have the following attributes:
image | optional. A string value that is the url to load the image to display in this button. The default styles size this image to 16 x 16. If not provided, then the button will have no icon.
tooltip | optional. A string value to use as the alt/title attribute of the <A> tag that wraps the button, resulting in a tooltip that appears when the user hovers the mouse over a button in most browsers. If not provided, the button will have no tooltip.
label | optional. A string value that is used as a label on the button.
disabledClass | optional. A string value that is the name of a CSS class to put on the <A> tag if the button is in a disabled state. If not provided, the default class jxButtonDisabled is used. You may provide your own class or override jxButtonDisabled.
imgClass | optional. A string value that is the name of a CSS class to put on the <IMG> element. The default value is jxButtonIcon.
> ### onclick
> onclick : function()
> triggered when the user clicks the button, processes the actionPerformed event ### addActionListener
> addActionListener: function( | obj | )
> add an action listener to the button Parameters: {Object} obj the object to add as an action listener ### removeActionListener
> removeActionListener : function( | obj | )
> remove an action listener from the button Parameter: {Object} obj the object to remove. ### propertyChanged
> propertyChanged: function( | obj | )
> implements the PropertyChangeListener interface for handling the enabled state changing on the action associated with this button Parameter: {Object} obj the action that is changing state ### setImage
> setImage: function( | path | )
> set the image of this button to a new image URL Parameter: {String} path the new url to use as the image for this button ### setLabel
> setLabel: function( | label | )
> sets the text of the button. Only works if a label was supplied when the button was constructed Parameter: {String} label the new label for the button ### setTooltip
> setTooltip: function( | tooltip | )
sets the tooltip displayed by the button Parameter: {String} tooltip the new tooltip ## Jx. Button. Flyout Flyout buttons expose a panel when the user clicks the button. The panel can have arbitrary content. The button itself does not trigger an external action. You must provide any necessary code to hook up elements in the panel to your application. Summary
Functions |
initialize | construct a new instance of a flyout button.
> ### Functions ### initialize
> initialize: function( | options | )
construct a new instance of a flyout button. The single options argument takes the same parameters as Jx.Button.initialize plus content loading options as per Jx.ContentLoader. Parameters: {Object} options an options object used to initialize the button ## Jx. Button. Multi 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. When the user clicks the active button, it performs its normal action. The user may also click a drop-down arrow to the right of the button and access the full list of buttons. Clicking a button in the list causes that button to replace the active button in the toolbar and performs the button’s regular action. Other buttons can be added to the Multi button using the add function. Summary
Properties |
{<Jx. Button>} activeButton | the currently selected button
{Array} buttons | an array of all available buttons
Functions |
initialize | construct a new instance of Jx.Button.Multi.
add | adds one or more buttons to the Multi button.
setActiveButton | update the menu item to be the requested button.
setButton | update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons.
> ### Properties ### {<Jx. Button>} activeButton the currently selected button ### {Array} buttons an array of all available buttons ### Functions ### initialize
> initialize: function( | options | )
> construct a new instance of Jx.Button.Multi. The constructor takes a single options parameter which is the same as the Jx.Button.initialize options object. Parameters: {Object} options an options object used to initialize the button ### add
> add: function()
> adds one or more buttons to the Multi button. The first button added becomes the active button initialize. This function takes a variable number of arguments, each of which is expected to be an instance of Jx.Button. Parameter: {Jx.Button} button a Jx.Button instance, may be repeated in the parameter list ### setActiveButton
> setActiveButton: function( | button | )
> update the menu item to be the requested button. Parameter: {Jx.Button} button a Jx.Button instance that was added to this multi button. ### setButton
> setButton: function( | button | )
update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons. Parameter: {Jx.Button} button The button to set as the active button ## Jx. Button. Picker A Picker button allows the user to choose an item from a list of items. The items can be any HTML element. The chosen item is placed into the menu item. Summary
Properties |
{HTMLElement} ul | the UL element that contains the items to pick from
Functions |
initialize | construct a new instance of Jx.Button.Picker
add | adds one or more items to the picker, passed as separate arguments.
clickHandler | handle the user selecting an item in the list
updateButton | updates the button to contain the picked item
> ### Properties ### {HTMLElement} ul the UL element that contains the items to pick from ### Functions ### initialize
> initialize: function()
> construct a new instance of Jx.Button.Picker ### add
> add: function()
> adds one or more items to the picker, passed as separate arguments. Parameter: {Object} item can be present one or more times in the argument list. The item to be added can be a Jx object with a domObj property, a string, or an HTML element reference. ### clickHandler
> clickHandler: function( | e | )
> handle the user selecting an item in the list Parameter: {Event} e the event object associated with the click event ### updateButton
> updateButton: function( | a | )
updates the button to contain the picked item Parameter: {HTMLElement} a the A tag that the user clicked on

> initialize : function( | action,
> | options | )

create a new button.

> onclick : function()

triggered when the user clicks the button, processes the actionPerformed event

> addActionListener: function( | obj | )

add an action listener to the button

> removeActionListener : function( | obj | )

remove an action listener from the button

> propertyChanged: function( | obj | )

implements the PropertyChangeListener interface for handling the enabled state changing on the action associated with this button

> setImage: function( | path | )

set the image of this button to a new image URL

> setLabel: function( | label | )

sets the text of the button.

> setTooltip: function( | tooltip | )

sets the tooltip displayed by the button

> initialize: function( | options | )

construct a new instance of a flyout button.

> initialize: function( | options | )

construct a new instance of Jx.Button.Multi.

> add: function()

adds one or more buttons to the Multi button.

> setActiveButton: function( | button | )

update the menu item to be the requested button.

> setButton: function( | button | )

update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons.

> initialize: function()

construct a new instance of Jx.Button.Picker
A Picker button allows the user to choose an item from a list of items.

> add: function()

adds one or more items to the picker, passed as separate arguments.

> clickHandler: function( | e | )

handle the user selecting an item in the list

> updateButton: function( | a | )

updates the button to contain the picked item
ContentLoader is a mix-in class that provides a consistent mechanism for other Jx controls to load content in one of four different ways:
Jx.Button creates a clickable element in the application that is hooked to an instance of Jx.Action.