Buttonset Widgetversion added: 1.8, deprecated: 1.12
Description: Themeable button sets.
This widget is deprecated, use Controlgroup instead.
.buttonset() is bundled with .button(). Although they are separate widgets, they are combined into a single file. If you have .button() available, you also have .buttonset() available. A button set provides a visual grouping for related buttons. It is recommended that a button set be used whenever you have a group of related buttons. Button sets work by selecting all appropriate descendants and applying .button() to them. You can enable and disable a button set, which will enable and disable all contained buttons. Destroying a button set also calls each button's .destroy() method. For grouped radio and checkbox buttons, it's recommended to use a fieldset with a legend to provide an accessible group label.
Theming
The buttonset widget uses the jQuery UI CSS framework to style its look and feel. If buttonset specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:
-
ui-buttonset: The outer container of Buttonsets.
Dependencies
Additional Notes:
- This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
Options
disabled
false true.Initialize the buttonset with the disabled option specified:
$( ".selector" ).buttonset({
disabled: true
}); Get or set the disabled option, after initialization:
// Getter var disabled = $( ".selector" ).buttonset( "option", "disabled" ); // Setter $( ".selector" ).buttonset( "option", "disabled", true );
items
"button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)" Initialize the buttonset with the items option specified:
$( ".selector" ).buttonset({
items: "button, input[type=button], input[type=submit]"
}); Get or set the items option, after initialization:
// Getter var items = $( ".selector" ).buttonset( "option", "items" ); // Setter $( ".selector" ).buttonset( "option", "items", "button, input[type=button], input[type=submit]" );
Methods
destroy()Returns: jQuery (plugin only)
- This method does not accept any arguments.
Invoke the destroy method:
$( ".selector" ).buttonset( "destroy" );
disable()Returns: jQuery (plugin only)
- This method does not accept any arguments.
Invoke the disable method:
$( ".selector" ).buttonset( "disable" );
enable()Returns: jQuery (plugin only)
- This method does not accept any arguments.
Invoke the enable method:
$( ".selector" ).buttonset( "enable" );
instance()Returns: Object
Retrieves the buttonset's instance object. If the element does not have an associated instance, undefined is returned.
Unlike other widget methods, instance() is safe to call on any element after the buttonset plugin has loaded.
- This method does not accept any arguments.
Invoke the instance method:
$( ".selector" ).buttonset( "instance" );
option( optionName )Returns: Object
Gets the value currently associated with the specified optionName.
Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar" would get the value of the bar property on the foo option.
- optionNameType: StringThe name of the option to get.
Invoke the method:
var isDisabled = $( ".selector" ).buttonset( "option", "disabled" );
option()Returns: PlainObject
- This signature does not accept any arguments.
Invoke the method:
var options = $( ".selector" ).buttonset( "option" );
option( optionName, value )Returns: jQuery (plugin only)
Sets the value of the buttonset option associated with the specified optionName.
Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName. For example, "foo.bar" would update only the bar property of the foo option.
- optionNameType: StringThe name of the option to set.
- valueType: ObjectA value to set for the option.
Invoke the method:
$( ".selector" ).buttonset( "option", "disabled", true );
option( options )Returns: jQuery (plugin only)
- optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
$( ".selector" ).buttonset( "option", { disabled: true } ); refresh()Returns: jQuery (plugin only)
items option.- This method does not accept any arguments.
Invoke the refresh method:
$( ".selector" ).buttonset( "refresh" );
widget()Returns: jQuery
jQuery object containing the button set element that contains the buttons. - This method does not accept any arguments.
Invoke the widget method:
var widget = $( ".selector" ).buttonset( "widget" );
Events
create( event, ui )Type: buttonsetcreate
Note: The ui object is empty but included for consistency with other events.
Initialize the buttonset with the create callback specified:
$( ".selector" ).buttonset({
create: function( event, ui ) {}
}); Bind an event listener to the buttonsetcreate event:
$( ".selector" ).on( "buttonsetcreate", function( event, ui ) {} ); Example:
A simple jQuery UI Buttonset
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>buttonset demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form>
<fieldset>
<legend>Favorite jQuery Project</legend>
<div id="radio">
<input type="radio" id="sizzle" name="project">
<label for="sizzle">Sizzle</label>
<input type="radio" id="qunit" name="project" checked="checked">
<label for="qunit">QUnit</label>
<input type="radio" id="color" name="project">
<label for="color">Color</label>
</div>
</fieldset>
</form>
<script>
$( "#radio" ).buttonset();
</script>
</body>
</html>