Controlgroup - jQuery Mobile

Controlgroup Widgetversion added: 1.3

Description: Groups buttons together.

QuickNav

Options

Methods

container

Events

The jQuery UI controlgroup widget is bundled in jQuery Mobile with some changes. Thus, its API documentation fully describes its functionality.

Options

direction

Type: String

Default: vertical

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

This option is also exposed as a data-attribute data-direction="horizontal".

Code examples:

Initialize the controlgroup with the direction option specified:

$( ".selector" ).controlgroup({
  direction: "horizontal"
});

Get or set the direction option, after initialization:

// Getter
var direction = $( ".selector" ).controlgroup( "option", "direction" );
 
// Setter
$( ".selector" ).controlgroup( "option", "direction", "horizontal" );

mini

Type: Boolean

Default: null (false)

If set to true, this will display a more compact version of the controlgroup that uses less vertical height by applying the ui-mini class to the outermost element of the controlgroup widget.

Note: mini option is deprecated in 1.5 and will be removed in 1.6

This option is also exposed as a data attribute: data-mini="true".

shadow

Type: Boolean

Default: false

Sets whether a drop shadow is drawn around the controlgroup.

Note: controlgroup option is deprecated in 1.5 and will be removed in 1.6

This option is also exposed as a data attribute: data-shadow="false".

Code examples:

Initialize the controlgroup with the shadow option specified:

$( ".selector" ).controlgroup({
  shadow: true
});

Get or set the shadow option, after initialization:

// Getter
var shadow = $( ".selector" ).controlgroup( "option", "shadow" );
 
// Setter
$( ".selector" ).controlgroup( "option", "shadow", true );

type

Type: String

Default: vertical

Sets whether children should be stacked on top of each other or next to each other. If set to "horizontal", the children of the controlgroup will be stacked next to each other.

Note: controlgroup option is deprecated in 1.5 and will be removed in 1.6

This option is also exposed as a data attribute: data-type="horizontal".

Code examples:

Initialize the controlgroup with the type option specified:

$( ".selector" ).controlgroup({
  type: "horizontal"
});

Get or set the type option, after initialization:

// Getter
var type = $( ".selector" ).controlgroup( "option", "type" );
 
// Setter
$( ".selector" ).controlgroup( "option", "type", "horizontal" );

Methods

container()Returns: jQuery (plugin only)

Obtain the container element within which the controlgroup's child elements are to be placed.

Note: controlgroup method is deprecated in 1.5 and will be removed in 1.6

$( ".selector" ).controlgroup( "container" );

This method does not accept any arguments.

Code examples:

Invoke the container method:

$( ".selector" ).controlgroup( "container" );