SplitButton

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

  • Logoff
  • Hibernate

 

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:

  • Dropdown Item 1
  • Dropdown Item 2

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

You can download the files here (.zip file)