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. |
$('#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. |
$('#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>