Jx.Button.Multi

Extends: Jx.Button

Implements

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 method.

This is not really a button, but rather a container for buttons.  The button structure is a div containing two buttons, a normal button and a flyout button.  The flyout contains a toolbar into which all the added buttons are placed.  The main button content is cloned from the last button clicked (or first button added).

The Multi button does not trigger any events itself, only the contained buttons trigger events.

Example

var b1 = new Jx.Button({
    label: 'b1',
    onClick: function(button) {
        console.log('b1 clicked');
    }
});
var b2 = new Jx.Button({
    label: 'b2',
    onClick: function(button) {
        console.log('b2 clicked');
    }
});
var b3 = new Jx.Button({
    label: 'b3',
    onClick: function(button) {
        console.log('b3 clicked');
    }
});
var multiButton = new Jx.Button.Multi();
multiButton.add(b1, b2, b3);

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license