A Split Button combines the function of a simple button and a drop down menu into a single unit. When the mouse moves over the button, a split line appears and a menu of items is made available.
Sample
Usage is simple. Include links on your page to:
- FontAwesome CSS
- jQuery
- jQuery-UI
- splitbutton.min.js
- splitbutton.min.css
Insert the following markup into your page:
...and use the following script:
var my_variable = $("#mySplitbuttonID").splitButton({
onSelect: function (idx, val) {
alert(`You selected idx ${idx}, which has a value of '${val}'.`)
}
, menuTimeout: 500 // time until the drop down menu disappears after non-use. Default is 500.
, spinner: "rgba(255,0,0,.5)" // color for the "wait" spinner when a button is clicked. Leave blank for none (default).
});
my_variable.data('splitButton').wait(true|false) // fades and disables the button and dropdown.
SplitButton has two options and one method:
- menuTimeout. The time in miliseconds before the dropdown menu auto-hides.
- spinner. SplitButton includes its own 'wait' indicator. Enter a color here
e.g. rgba(255, 0, 0, 1), or #F00, or RED. Leave blank or omit for no spinner. - my_variable.data('splitButton').wait. Method. Pass in true to fade and disable the button,
false to return the button to its normal state.
This plugin is free to use for any purpose: if you find it beneficial, a donation would be much appreciated. $10 isn't too much to ask for saving you hours of time, is it? Thank you so much!