Demo of Controlgroup classes JQuery UI
classes
HTML
<div class="my_controlgroup">
<select>
<option>PHP</option>
<option>MySQL</option>
<option>JavaScript</option>
<option>JQuery</option>
<option>HTML</option>
<option>ASP</option>
<option>PhotoShop</option>
</select>
<label for="radio1">Tutorial</label>
<input type="radio" name="type" id="radio1">
<label for="radio2">Demo</label>
<input type="radio" name="type" id="radio2">
<label for="help">Help</label>
<input type="checkbox" name="help" id="help">
<label for="spinner" class="ui-controlgroup-label"># of Pages</label>
<input id="spinner" class="ui-spinner-input">
<button id="download">Download</button>
</div>
JQuery
<script>
$(document).ready(function() {
//////////////////////////
$( function() {
$( ".my_controlgroup" ).controlgroup()
$( ".my_controlgroup" ).controlgroup({
"direction": "horizontal"
});
} );
////////////////
//////////////////////////
$( function() {
$( ".my_selection" ).controlgroup()
$( ".my_selection" ).controlgroup({
"direction": "horizontal"
});
} );
////////////////
////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
switch ( sel){
case 'error':
$(".my_controlgroup").controlgroup( "option", "classes.ui-controlgroup", "ui-state-error" );
$('#d1').html( " $( \".my_controlgroup\" ).controlgroup( \"option\", \"classes.ui-controlgroup\", \"ui-state-error\") ");
break;
case 'disabled':
$(".my_controlgroup").controlgroup( "option", "classes.ui-controlgroup", "ui-state-disabled" );
$('#d1').html( " $( \".my_controlgroup\" ).controlgroup( \"option\", \"classes.ui-controlgroup\", \"ui-state-disabled\") ");
break;
case 'primary':
$(".my_controlgroup").controlgroup( "option", "classes.ui-controlgroup", "ui-priority-primary" );
$('#d1').html( " $( \".my_controlgroup\" ).controlgroup( \"option\", \"classes.ui-controlgroup\", \"ui-priority-primary\") ");
break;
case 'secondary':
$(".my_controlgroup").controlgroup( "option", "classes.ui-controlgroup", "ui-priority-secondary" );
$('#d1').html( " $( \".my_controlgroup\" ).controlgroup( \"option\", \"classes.ui-controlgroup\", \"ui-priority-secondary\") ");
break;
case 'highlight':
$(".my_controlgroup").controlgroup( "option", "classes.ui-controlgroup", "ui-state-highlight" );
$('#d1').html( " $( \".my_controlgroup\" ).controlgroup( \"option\", \"classes.ui-controlgroup\", \"ui-state-highlight\") ");
break;
case 'shadow':
$(".my_controlgroup").controlgroup( "option", "classes.ui-controlgroup", "ui-widget-shadow" );
$('#d1').html( " $( \".my_controlgroup\" ).controlgroup( \"option\", \"classes.ui-controlgroup\", \"ui-widget-shadow\") ");
break;
case 'overlay':
$(".my_controlgroup").controlgroup( "option", "classes.ui-controlgroup", "ui-widget-overlay" );
$('#d1').html( " $( \".my_controlgroup\" ).controlgroup( \"option\", \"classes.ui-controlgroup\", \"ui-widget-overlay\") ");
break;
}
})
//////////////
////////////
})
</script>