Controlgroup jQuery UI

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

By Default the draggable element will inherent the class ui-draggable ( if the addClass value is not set to false while initializing ) We can read the value set for addClasses option like this
$( ".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.
Your Rating

Post Comment This is for short comments only. Use the forum for more discussions.

Most Popular JQuery Scripts


Two dependant list boxes


Calendar with Date Selection


Data change by Slider


Show & Hide element
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 All rights reserved worldwide Privacy Policy Disclaimer