jQuery-UI Split Button

Here’s how to create a split button with jQuery-ui

$( “#mySplitButton” ).splitButton();

JQuery-ui split button

This blog demonstrates how to create a split button with jQuery-ui.

jQuery-ui Split Button plugin code:

 

jQuery-ui Split Button markup

 

jQuery-ui Split Button usage

 

Notes

  • NB: – If the font-size of the main button is too small the menu button will be larger than the main button. The reason is that the triangle icon does not resize. Consider using twitter bootstrap / font awesome icons if it’s an issue. See this blog for more on that.
  • The plugin assumes that .button() has previously been called
  • The markup needs to be pretty much as it is in the example above. The outer div can be any element.

 

Full Code Example (no dependencies)

 

Comments always welcome….