In addition to basic push buttons, radio buttons and checkboxes (inputs of type radio and checkbox) can be converted to buttons: Their associated label is styled to appear as the button, while the underlying input is updated on click.
Buttons can be grouped using the buttonSet method, which should be always applied for radio buttons.$("button").button();
<!DOCTYPE html> <html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/jquery.ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/jquery.ui.button.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").button(); }); </script> </head> <body style="font-size:62.5%;"> <button>Button label</button> </body> </html>
Usually the native click event, with the exception of keyboard-triggered click with the space key on anchors and generally on checkboxes and radio buttons.
click
event as an init option.
$('.selector').button({
click: function(event, ui) { ... }
});
click
event by type: click
.
$('.selector').bind('click', function(event, ui) {
...
});
Remove the button functionality completely. This will return the element back to its pre-init state.
Disable the button.
Enable the button.
Get or set any button option. If no value is specified, will act as a getter.
The jQuery UI Button plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.button.css stylesheet that can be modified. These classes are highlighed in bold below.
Note: This is a sample of markup generated by the button plugin, not markup you should use to create a button. The only markup needed for that is <button>Button Label</button>.