Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

EasyUI jQuery Resizable widget

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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
Last Updated : 10 Mar, 2021
Like Article
Save Article
Similar Reads
Related Tutorials