EasyUI jQuery Resizable widget

In this article, we will learn how to design a resizable widget using jQuery EasyUI. A resizable widget makes the given element resizable. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Syntax:

var a = $(".selector").resizable({
});

Properties:

• disabled: If the disabled property is set to true, resizable will be disabled.
• handles: Indicate the direction of resizable.
• minWidth: The minimum width when resizing.
• minHeight: The minimum height when resizing.
• maxWidth: The maximum width when resizing.
• maxHeight: The maximum height when resizing.
• edge: The edge of the border to be resized.

Events:

• onStartResize: This event gets fired when resizing starts.
• onResize: This event gets fired during resizing.
• onStopResize: This event gets fired when resizing stops.

Methods:

• options: It returns the option’s property.
• enable: It enables the resizable property.
• disable: It disables the resizable property.

CDN Link: First, add jQuery Easy UI scripts needed for your project.

<script type=”text/javascript” src=”jquery.min.js”>  </script>  
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> 
</script>  
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript”  src=”jquery.easyui.mobile.js”> 
</script> 

Example:

Output:

Reference: http://www.jeasyui.com/documentation/