EasyUI jQuery可调整的小部件

在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个可调整大小的widget。一个可调整大小的部件使给定的元素可以调整大小。它有助于建立交互式网络和移动应用程序的功能，为开发人员节省大量的时间。

EasyUI for jQuery的下载：

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

语法:

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

属性:

disabled:如果disabled属性被设置为true，可调整大小将被禁用。
handle。指明可调整大小的方向。
minWidth：调整大小时的最小宽度。
minHeight。调整大小时的最小高度。
maxWidth：调整大小时的最大宽度。
maxHeight。调整大小时的最大高度。
edge。要调整大小的边框的边缘。

事件:

onStartResize。当调整大小开始时，该事件被触发。
onResize。这个事件在调整大小时被触发。
onStopResize : 当停止调整大小时，该事件被触发。

方法:

options。它返回选项的属性。
Enable。它启用可调整大小的属性。
disable。它禁用了可调整大小的属性。

CDN链接：首先，添加你的项目需要的jQuery Easy UI脚本。

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

示例:

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