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>  <script type="text/javascript" src="jquery.easyui.min.js"> </script>  <script type="text/javascript" src="jquery.easyui.mobile.js"> </script>

Example:

HTML

<!doctype html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="initial-scale=1.0, maximum-scale=1.0, 
                   user-scalable=no"> 
            
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
          href="themes/metro/easyui.css"> 

    <link rel="stylesheet" type="text/css"
          href="themes/mobile.css"> 

    <link rel="stylesheet" type="text/css"
          href="themes/icon.css"> 

    <!--jQuery library -->
    <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> 

    <h1>GeeksforGeeks</h1>
    <h3>Easy UI | resizable widget</h3>
</head> 

<body> 
    Resize
    <div class="easyui-resizable" 
         style="width:190px;height:190px;border:1px solid #ccc;"
         data-options="maxWidth:800,maxHeight:600">
     </div>
</body>
</html>

Output:

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

EasyUI jQuery Resizable widget

Events:

Methods:

Explore