* jQuery UI Controlgroup 1.12.1
* Copyright jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
//>>description: Visually groups form control widgets
//>>docs: http://api.jqueryui.com/controlgroup/
//>>demos: http://jqueryui.com/controlgroup/
//>>css.structure: ../../themes/base/core.css
//>>css.structure: ../../themes/base/controlgroup.css
//>>css.theme: ../../themes/base/theme.css
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
var controlgroupCornerRegex = /ui-corner-([a-z]){2,6}/g;
return $.widget( "ui.controlgroup", {
"button": "input[type=button], input[type=submit], input[type=reset], button, a",
"controlgroupLabel": ".ui-controlgroup-label",
"checkboxradio": "input[type='checkbox'], input[type='radio']",
"spinner": ".ui-spinner-input"
// To support the enhanced option in jQuery Mobile, we isolate DOM manipulation
this.element.attr( "role", "toolbar" );
this._callChildMethod( "destroy" );
this.childWidgets.removeData( "ui-controlgroup-data" );
this.element.removeAttr( "role" );
if ( this.options.items.controlgroupLabel ) {
.find( this.options.items.controlgroupLabel )
.find( ".ui-controlgroup-label-contents" )
_initWidgets: function() {
// First we iterate over each of the items options
$.each( this.options.items, function( widget, selector ) {
// Make sure the widget has a selector set
if ( widget === "controlgroupLabel" ) {
labels = that.element.find( selector );
labels.each( function() {
if ( element.children( ".ui-controlgroup-label-contents" ).length ) {
.wrapAll( "<span class='ui-controlgroup-label-contents'></span>" );
that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" );
childWidgets = childWidgets.concat( labels.get() );
// Make sure the widget actually exists
// We assume everything is in the middle to start because we can't determine
// first / last elements until all enhancments are done.
if ( that[ "_" + widget + "Options" ] ) {
options = that[ "_" + widget + "Options" ]( "middle" );
options = { classes: {} };
// Find instances of this widget inside controlgroup and init them
var instance = element[ widget ]( "instance" );
// We need to clone the default options for this type of widget to avoid
// polluting the variable options which has a wider scope than a single widget.
var instanceOptions = $.widget.extend( {}, options );
// If the button is the child of a spinner ignore it
// TODO: Find a more generic solution
if ( widget === "button" && element.parent( ".ui-spinner" ).length ) {
// Create the widget if it doesn't exist
instance = element[ widget ]()[ widget ]( "instance" );
instanceOptions.classes =
that._resolveClassesValues( instanceOptions.classes, instance );
element[ widget ]( instanceOptions );
// Store an instance of the controlgroup to be able to reference
// from the outermost element for changing options and refresh
var widgetElement = element[ widget ]( "widget" );
$.data( widgetElement[ 0 ], "ui-controlgroup-data",
instance ? instance : element[ widget ]( "instance" ) );
childWidgets.push( widgetElement[ 0 ] );
this.childWidgets = $( $.unique( childWidgets ) );
this._addClass( this.childWidgets, "ui-controlgroup-item" );
_callChildMethod: function( method ) {
this.childWidgets.each( function() {
data = element.data( "ui-controlgroup-data" );
if ( data && data[ method ] ) {
_updateCornerClass: function( element, position ) {
var remove = "ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right ui-corner-all";
var add = this._buildSimpleOptions( position, "label" ).classes.label;
this._removeClass( element, null, remove );
this._addClass( element, null, add );
_buildSimpleOptions: function( position, key ) {
var direction = this.options.direction === "vertical";
result.classes[ key ] = {
"first": "ui-corner-" + ( direction ? "top" : "left" ),
"last": "ui-corner-" + ( direction ? "bottom" : "right" ),
_spinnerOptions: function( position ) {
var options = this._buildSimpleOptions( position, "ui-spinner" );
options.classes[ "ui-spinner-up" ] = "";
options.classes[ "ui-spinner-down" ] = "";
_buttonOptions: function( position ) {
return this._buildSimpleOptions( position, "ui-button" );
_checkboxradioOptions: function( position ) {
return this._buildSimpleOptions( position, "ui-checkboxradio-label" );
_selectmenuOptions: function( position ) {
var direction = this.options.direction === "vertical";
width: direction ? "auto" : false,
"ui-selectmenu-button-open": "",
"ui-selectmenu-button-closed": ""
"ui-selectmenu-button-open": "ui-corner-" + ( direction ? "top" : "tl" ),
"ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "top" : "left" )
"ui-selectmenu-button-open": direction ? "" : "ui-corner-tr",
"ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "bottom" : "right" )
"ui-selectmenu-button-open": "ui-corner-top",
"ui-selectmenu-button-closed": "ui-corner-all"
_resolveClassesValues: function( classes, instance ) {
$.each( classes, function( key ) {
var current = instance.options.classes[ key ] || "";
current = $.trim( current.replace( controlgroupCornerRegex, "" ) );
result[ key ] = ( current + " " + classes[ key ] ).replace( /\s+/g, " " );
_setOption: function( key, value ) {
if ( key === "direction" ) {
this._removeClass( "ui-controlgroup-" + this.options.direction );
this._super( key, value );
if ( key === "disabled" ) {
this._callChildMethod( value ? "disable" : "enable" );
this._addClass( "ui-controlgroup ui-controlgroup-" + this.options.direction );
if ( this.options.direction === "horizontal" ) {
this._addClass( null, "ui-helper-clearfix" );
children = this.childWidgets;
// We filter here because we need to track all childWidgets not just the visible ones
if ( this.options.onlyVisible ) {
children = children.filter( ":visible" );
// We do this last because we need to make sure all enhancment is done
// before determining first and last
$.each( [ "first", "last" ], function( index, value ) {
var instance = children[ value ]().data( "ui-controlgroup-data" );
if ( instance && that[ "_" + instance.widgetName + "Options" ] ) {
var options = that[ "_" + instance.widgetName + "Options" ](
children.length === 1 ? "only" : value
options.classes = that._resolveClassesValues( options.classes, instance );
instance.element[ instance.widgetName ]( options );
that._updateCornerClass( children[ value ](), value );
// Finally call the refresh method on each of the child widgets.
this._callChildMethod( "refresh" );