Controlgroup Widget

Categories: Widgets

Controlgroup Widgetversion added: 1.12

Description: Themeable set of input widgets.

QuickNavExamples

Options

Methods

Events

A controlgroup provides a visual grouping for button and other input widgets. Controlgroup works by selecting all appropriate descendants, based on the items option, and applying their respective widgets, if loaded. If the widgets already exist, their refresh() method is called. You can enable and disable a controlgroup, which will enable and disable all contained widgets. Destroying a controlgroup also calls each widgets's .destroy() method.

Theming

The controlgroup widget uses the jQuery UI CSS framework to style its look and feel. If controlgroup specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:

  • ui-controlgroup: The outer container of controlgroups. Depending on the direction option, this element will additionally have the ui-controlgroup-horizontal or ui-controlgroup-vertical classes.
    • ui-controlgroup-item: Each item inside the group.

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

classes 

Type: Object
Default: {}

Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes option.

Code examples:

Initialize the controlgroup with the classes option specified, changing the theming for the ui-controlgroup class:

1
2
3
4
5
 
$( ".selector" ).controlgroup({
  classes: {
    "ui-controlgroup": "highlight"
  }
});

Get or set a property of the classes option, after initialization, here reading and changing the theming for the ui-controlgroup class:

1
2
3
4
5
 
// Getter
var themeClass = $( ".selector" ).controlgroup( "option", "classes.ui-controlgroup" );
 
// Setter
$( ".selector" ).controlgroup( "option", "classes.ui-controlgroup", "highlight" );

direction 

Type: String
Default: "horizontal"

By default, controlgroup displays its controls in a horizontal layout. Use this option to use a vertical layout instead.

Code examples:

Initialize the controlgroup with the direction option specified:

1
2
3
 
$( ".selector" ).controlgroup({
  direction: "vertical"
});

Get or set the direction option, after initialization:

1
2
3
4
5
 
// Getter
var direction = $( ".selector" ).controlgroup( "option", "direction" );
 
// Setter
$( ".selector" ).controlgroup( "option", "direction", "vertical" );

disabled 

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

Initialize the controlgroup with the disabled option specified:

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

Get or set the disabled option, after initialization:

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

items 

Type: Object
Default: 
{
  "button": "input[type=button], input[type=submit], input[type=reset], button, a",
  "controlgroupLabel": ".ui-controlgroup-label",
  "checkboxradio": "input[type='checkbox'], input[type='radio']",
  "selectmenu": "select",
  "spinner": ".ui-spinner-input"
}
Which descendant elements to initialize as their respective widgets. Two elements have special behavior:
  • controlgroupLabel: Any elements matching the selector for this will be wrapped in a span with the ui-controlgroup-label-contents class.
  • spinner: This uses a class selector as the value. Requires either adding the class manually or initializing the spinner manually. Can be overridden to use input[type=number], but that also requires custom CSS to remove the native number controls.

onlyVisible 

Type: Boolean
Default: true
Sets whether to exclude invisible children in the assignment of rounded corners. When set to false, all children of a controlgroup are taken into account when assigning rounded corners, including hidden children. Thus, if, for example, the controlgroup's first child is hidden and the default horizontal layout is applied, the controlgroup will, in effect, not have rounded corners on the left edge. Likewise, if the controlgroup has a vertical layout and its first child is hidden, the controlgroup will not have rounded corners on the top edge.
Code examples:

Initialize the controlgroup with the onlyVisible option specified:

1
2
3
 
$( ".selector" ).controlgroup({
  onlyVisible: false
});

Get or set the onlyVisible option, after initialization:

1
2
3
4
5
 
// Getter
var onlyVisible = $( ".selector" ).controlgroup( "option", "onlyVisible" );
 
// Setter
$( ".selector" ).controlgroup( "option", "onlyVisible", false );

Methods

destroy()Returns: jQuery (plugin only)

Removes the controlgroup 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" ).controlgroup( "destroy" );

disable()Returns: jQuery (plugin only)

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

Invoke the disable method:

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

enable()Returns: jQuery (plugin only)

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

Invoke the enable method:

1
 
$( ".selector" ).controlgroup( "enable" );

instance()Returns: Object

Retrieves the controlgroup'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 controlgroup plugin has loaded.

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

Invoke the instance method:

1
 
$( ".selector" ).controlgroup( "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" ).controlgroup( "option", "disabled" );

option()Returns: PlainObject

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

Invoke the method:

1
 
var options = $( ".selector" ).controlgroup( "option" );

option( optionName, value )Returns: jQuery (plugin only)

Sets the value of the controlgroup 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" ).controlgroup( "option", "disabled", true );

option( options )Returns: jQuery (plugin only)

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

Invoke the method:

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

refresh()Returns: jQuery (plugin only)

Process any widgets 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" ).controlgroup( "refresh" );

widget()Returns: jQuery

Returns a jQuery object containing the controlgroup.
  • This method does not accept any arguments.
Code examples:

Invoke the widget method:

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

Events

create( event, ui )Type: controlgroupcreate

Triggered when the controlgroup is created.

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

Code examples:

Initialize the controlgroup with the create callback specified:

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

Bind an event listener to the controlgroupcreate event:

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

Example:

A simple jQuery UI controlgroup

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>controlgroup 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" ).controlgroup();
</script>
 
</body>
</html>

Demo: