A split button element is a submit button with a built-in menu of actions. My goal was to create a split button form control that is both semantic and accessible.
Stylized controls, like this, should only be used when there is a solid reason to do so. In general the default browser controls work fine and provide a pattern that users are familiar with. For certain situations, however, it is useful to provide a simple way to choose a single action using stylized controls.
This will create a split button with 3 options and the default button name will be “Choose Action” (see example above). The key elements here are:
- A surrounding element with the
- A select element with an optional title attribute.
- A submit button.
If the select element has a title attribute, that text will be used as the default button name; otherwise, it will use the first (or selected) option as the button name.
click() function) to the submit button element in order submit the form.
The menu is also accessible with the keyboard. When you bring focus to control, the menu will open and you can use your arrows to select an option. Pressing ESC will close the menu.
This code uses YUI 2.6 with the Selector beta library and can easily be ported to jQuery or any other framework.
You are free to download, modify and use this code anywhere you want. There are no restrictions.