Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

EasyUI jQuery Resizable widget

  • Last Updated : 10 Mar, 2021

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:


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


  • 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.


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


  • 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”> 
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript”  src=””> 



<!doctype html> 
    <meta charset="UTF-8"
    <meta name="viewport" 
          content="initial-scale=1.0, maximum-scale=1.0, 
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
    <link rel="stylesheet" type="text/css"
    <link rel="stylesheet" type="text/css"
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js"
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
    <h3>Easy UI | resizable widget</h3>
    <div class="easyui-resizable" 
         style="width:190px;height:190px;border:1px solid #ccc;"




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!