Demo of Resizable with classes
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
HTML
<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>
<br>
<div id="resize_id" class=resize_cl></div>
JQuery
<script>
$(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 );
})
////////////
})
</script>
« 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
Events
destroy
disable enable