Buttonset Widget

Categories: Widgets

Buttonset Widgetversion added: 1.8, deprecated: 1.12

Description: Themeable button sets.

QuickNavExamples

Options

Methods

Events

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 

Type: Boolean
Default: false
Disables the buttonset if set to true.
Code examples:

Initialize the buttonset with the disabled option specified:

1
2
3
 
$( ".selector" ).buttonset({
  disabled: true
});

Get or set the disabled option, after initialization:

1
2
3
4
5
 
// Getter
var disabled = $( ".selector" ).buttonset( "option", "disabled" );
 
// Setter
$( ".selector" ).buttonset( "option", "disabled", true );

items 

Type: Selector
Default: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)"
Which descendant elements to convert manage as buttons.
Code examples:

Initialize the buttonset with the items option specified:

1
2
3
 
$( ".selector" ).buttonset({
  items: "button, input[type=button], input[type=submit]"
});

Get or set the items option, after initialization:

1
2
3
4
5
 
// 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)

Removes the buttonset functionality completely. This will return the element back to its pre-init state.
  • This method does not accept any arguments.
Code examples:

Invoke the destroy method:

1
 
$( ".selector" ).buttonset( "destroy" );

disable()Returns: jQuery (plugin only)

Disables the buttonset.
  • This method does not accept any arguments.
Code examples:

Invoke the disable method:

1
 
$( ".selector" ).buttonset( "disable" );

enable()Returns: jQuery (plugin only)

Enables the buttonset.
  • This method does not accept any arguments.
Code examples:

Invoke the enable method:

1
 
$( ".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.
Code examples:

Invoke the instance method:

1
 
$( ".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.

  • optionName
    Type: String
    The name of the option to get.
Code examples:

Invoke the method:

1
 
var isDisabled = $( ".selector" ).buttonset( "option", "disabled" );

option()Returns: PlainObject

Gets an object containing key/value pairs representing the current buttonset options hash.
  • This signature does not accept any arguments.
Code examples:

Invoke the method:

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

  • optionName
    Type: String
    The name of the option to set.
  • value
    Type: Object
    A value to set for the option.
Code examples:

Invoke the method:

1
 
$( ".selector" ).buttonset( "option", "disabled", true );

option( options )Returns: jQuery (plugin only)

Sets one or more options for the buttonset.
  • options
    Type: Object
    A map of option-value pairs to set.
Code examples:

Invoke the method:

1
 
$( ".selector" ).buttonset( "option", { disabled: true } );

refresh()Returns: jQuery (plugin only)

Process any buttons that were added or removed directly in the DOM. Results depend on the items option.
  • This method does not accept any arguments.
Code examples:

Invoke the refresh method:

1
 
$( ".selector" ).buttonset( "refresh" );

widget()Returns: jQuery

Returns a jQuery object containing the button set element that contains the buttons.
  • This method does not accept any arguments.
Code examples:

Invoke the widget method:

1
 
var widget = $( ".selector" ).buttonset( "widget" );

Events

create( event, ui )Type: buttonsetcreate

Triggered when the buttonset is created.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the buttonset with the create callback specified:

1
2
3
 
$( ".selector" ).buttonset({
  create: function( event, ui ) {}
});

Bind an event listener to the buttonsetcreate event:

1
 
$( ".selector" ).on( "buttonsetcreate", function( event, ui ) {} );

Example:

A simple jQuery UI Buttonset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>buttonset demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/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>

Demo: