SplitButton SplitButton groups a set of commands in an overlay with a default command.

SplitButton requires a button and a list of items for the menu.

$('#btn').puisplitbutton({
    items: []
});
                                
<button id="btn" type="button">Default</button>
                                
Name Type Default Description
icon string null Defines the icon of the button.
iconPos string left Position of the icon, valid values are "left" and "right".
items array null An array of items, each item is defined with "icon", "text", "click" and "url" attributes.
Name Parameters Description
click event: puisplitbuttonclick instance Fired when default button is clicked.
show event: puisplitbuttonshow instance Fired when menu is shown.
hide event: puisplitbuttonhide instance. Fired when menu is hidden.

Example

$('#default').puisplitbutton({
    click: function(event) {
        //...
    }
});
                                
Name Parameters Description
show - Shows the menu.
hide - Hides the menu.
enable - Enable the widget
disable - Disable the widget.
option name: Name of the option Returns the value of the option.
option name: Name of the option, value: Value of the option Set the value of the option.

Example

$('#default').puisplitbutton('show');
                                
$('#btn').puisplitbutton({
    icon: 'fa-check',
    click: function() {
        $('#messages').puigrowl('show', [{severity: 'info', summary: 'Saved'}]);
    },
    items: [
        {
            icon: 'fa-edit',
            text: 'Update',
            click: function() {
                $('#messages').puigrowl('show', [{severity: 'info', summary: 'Updated'}]);
            }
        },
        {
            icon: 'fa-minus',
            text: 'Delete',
            click: function() {
                $('#messages').puigrowl('show', [{severity: 'info', summary: 'Deleted'}]);
            }
        },
        {
            icon: 'fa-home',
            text: 'Homepage',
            url: 'http://www.primefaces.org/primeui'
        }
    ]
});

$('#messages').puigrowl();
                                
<button id="btn" type="button">Save</button>

<div id="messages"></div>