jQuery UI Controlgroup

jQuery UI Controlgroup groups related form controls and widgets so they share consistent visual treatment and spacing. It can arrange them horizontally or vertically.

Basic Controlgroup Top ↑

$( function () {
    $( "#controlgroup" ).controlgroup();
});

<div id="controlgroup">
    <button type="button">Back</button>
    <button type="button">Forward</button>

    <label for="lock">Lock</label>
    <input type="checkbox" id="lock">
</div>

Demo: basic Controlgroup →

Controlgroup Options Top ↑

classes

$( "#controlgroup" ).controlgroup({
    classes: {
        "ui-controlgroup": "ui-state-highlight"
    }
});

Demo: Controlgroup classes →

direction

Use "horizontal" or "vertical".

$( "#controlgroup" ).controlgroup({
    direction: "vertical"
});

Demo: change Controlgroup direction →

disabled

$( "#controlgroup" ).controlgroup({
    disabled: true
});

const disabled =
    $( "#controlgroup" ).controlgroup(
        "option",
        "disabled"
    );

$( "#controlgroup" ).controlgroup(
    "option",
    "disabled",
    false
);

Demo: disabled option →

Controlgroup Methods Top ↑

destroy()

$( "#controlgroup" ).controlgroup( "destroy" );

Demo: destroy() →

disable()

$( "#controlgroup" ).controlgroup( "disable" );

Demo: enable/disable Controlgroup →

enable()

$( "#controlgroup" ).controlgroup( "enable" );

instance()

const instance =
    $( "#controlgroup" ).controlgroup( "instance" );

option()

const options =
    $( "#controlgroup" ).controlgroup( "option" );

refresh()

Call refresh() after adding/removing controls directly in the DOM or after changing related widget state that the Controlgroup needs to re-evaluate.

$( "#controlgroup" ).controlgroup( "refresh" );

widget()

const widget =
    $( "#controlgroup" ).controlgroup( "widget" );

Controlgroup Events Top ↑

create

$( "#controlgroup" ).controlgroup({
    create: function () {
        console.log( "Controlgroup created" );
    }
});

Use Different jQuery UI Themes Top ↑

Demo: Controlgroup with different themes →

Continue to Checkboxradio →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: