jQuery UI Demo Methods [enable, disable, destroy]

by Adi Jaya

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main">

    <p>
        <button id="generate">generate resizable</button>
    </p>
    
    <div id="resizable" class="ui-widget-content">
          <h3 class="ui-widget-header">Resizable</h3>
          <p id="info"></p>
    </div>
    
    <p>
        <button disabled class="button" data-ui="enable">enable</button>
        <button disabled class="button" data-ui="disable">disable</button>
        <button disabled class="button" data-ui="destroy">destroy</button>
    </p>

    
    <p>
        <a href="https://api.jqueryui.com/resizable/" target="_blank">
            API jQuery UI Resizable
        </a>
    </p>
    
    
</div>

CSS

html {
    font-size: 15px;
    font-family: sans-serif;
}

body {
    font-size: 1em;
}

button {
    position: relative;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid silver;
}

button[disabled] {
    opacity: 0.7;
    cursor: no-drop;
}

.main {
    max-width: 80%;
    margin: 0 auto;
    padding: 1em;
    border: 1px solid silver;
}

#resizable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
}

#resizable h3 {
    text-align: center;
    margin: 0;
}

JavaScript

//activate resizable
$( "#generate" ).click( function () {

	$( "#resizable" ).resizable();
    $( "#info" ).html( "Resizable Active" );
    
    $( this ).prop( "disabled", true );
    $( ".button" ).prop( "disabled", false );
});


//demo
$( ".button" ).click( function () {
	var ui = $( this ).attr( "data-ui" );
    var selector = $( "#resizable" );
    var info = $( "#info" );
    
	if( selector.hasClass( "ui-resizable" ) ){
    
    	if ( ui == "enable" ) {
    		selector.resizable( "enable" );
    	}
    	
    	else if ( ui == "disable" ) {
    		selector.resizable( "disable" );
    	}
    	
    	else if ( ui == "destroy" ){
    	    selector.resizable( "destroy" );
    	}
        
        
        info.html( "Resizable : " + ui );
        
        
    } else {
    
    	alert( "Please click generate button");
        info.html( "" );
        $( "#generate" ).prop( "disabled", false );
        $( ".button" ).prop( "disabled", true );
        
    }
    
    
});