Controlgroup jQuery UI

$(document).ready(function() {
$( function() {
    $( ".my_controlgroup" ).controlgroup()
classesType : object
Default value : {}

We can assign different classes to controlgroup, by Default the controlgroup element will inherent the class ui-controlgroup.
$( ".my_controlgroup" ).controlgroup({
classes: {
    "ui-controlgroup": "highlight"
To read value of classes
var my_classes = $( ".my_classes" ).controlgroup( "option", "classes.ui-controlgroup" );
To set the value of classes
$( ".my_controlgroup" ).controlgroup( "option", "classes.ui-controlgroup", "highlight" ); 
direction Type : String
Default value : 'horizontal'
Possible values: "horizontal", "vertical"

$( ".my_controlgroup" ).controlgroup({
      "direction": "horizontal"
To read value
var direction = $(".my_controlgroup").controlgroup( "option", "direction" );
To set the value
$( ".my_controlgroup" ).controlgroup( "option", "direction", 'vertical' ); 
disabled Type : Boolean
Default value : false
Disable controlgroup if set to true
$( .my_controlgroup" ).controlgroup({
To read value
var  disabled = $( ".my_controlgroup" ).controlgroup( "option", "disabled" );
To set the value
 $( ".my_controlgroup" ).controlgroup( "option", "disabled",true );
destroyRemoved the functionality of control group
$( ".my_controlgroup" ).controlgroup( "destroy");
disabledisable the controlgroup functionality
$( ".my_controlgroup" ).controlgroup( "disable");
enableEnable the controlgroup functionality
$( ".my_controlgroup" ).controlgroup( "enable");
instanceInvoke the instance method
$( ".my_controlgroup" ).controlgroup( "instance");
optionvalue of the specified option name
var val_direction=$( ".my_controlgroup" ).controlgroup( "option","direction");
                 var val_disabled=$( ".my_controlgroup" ).controlgroup( "option","disabled");
var val_onlyVisible=$( ".my_controlgroup" ).controlgroup( "option","onlyVisible");
refreshInvoke the refresh method
$( ".my_controlgroup" ).controlgroup( "refresh");
widget()return object containing controlgroup.
var my_widget = $( ".my_controlgroup" ).controlgroup( "widget" );
createTriggered when it is created.
$( ".my_controlgroup" ).controlgroup({
  create: function( event, ui ) {}

Adding different themes to controlgroup

Select different themes from dropdown list and see how the style changes for controlgroup.


* indicates required
Subscribe to plus2net

    Post your comments , suggestion , error , requirements etc here .

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer