Demo of Resizable with classes

ui-state-highlight ui-state-error ui-state-error-text
ui-state-disabled ui-priority-primary ui-priority-secondary

User can select different resizable classes and apply the same to resizable element. We are also getting the value of applied classes on the element and displaying the same.

Tutorial Resizable

Full Code

<input type='radio' name='r1' id='r1' value='ui-state-highlight' checked>ui-state-highlight
 <input type='radio' name='r1' id='r2' value='ui-state-error' >ui-state-error
 <input type='radio' name='r1' id='r3' value='ui-state-error-text' >ui-state-error-text

<input type='radio' name='r1' id='r4' value='ui-state-disabled' >ui-state-disabled
<input type='radio' name='r1' id='r5' value='ui-priority-primary' >ui-priority-primary
<input type='radio' name='r1' id='r6' value='ui-priority-secondary' >ui-priority-secondary

<button type='button' class='btn btn-secondary'  id=d1></button>


<div id="resize_id" class=resize_cl></div>
$(document).ready(function() {
$( "#resize_id" ).resizable({
  classes: {
    "ui-resizable": "ui-state-highlight"
var present_class = $( "#resize_id" ).resizable( "option", "classes.ui-resizable" );
$('#d1').html( " <b>Status of classes    :  </b>: " + present_class );
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
$( "#resize_id" ).resizable( "option", "classes.ui-resizable", sel );
var present_class = $( "#resize_id" ).resizable( "option", "classes.ui-resizable" );
$('#d1').html( " <b>Status of classes    :  </b>: " + present_class );

Tutorial Resizable

Options|resizable|alsoResize|animate | animate get set|animateDuration| animateEasing|aspectRatio| autoHide cancel classes containment disabled ghost grid handles helper maxHeight maxWidth minWidth minHeight


destroy disable enable