📅 最后修改于: 2023-12-03 15:00:34.158000 🧑 作者: Mango
EasyUI jQuery Resizable 小部件是一种基于 jQuery 的可调整大小小部件，它允许用户通过鼠标调整元素的大小。
该小部件的主要功能包括：
该小部件的使用非常简单，只需要将要调整大小的元素传递给该小部件即可。
EasyUI jQuery Resizable 小部件可以通过多种方式安装，下面列出了其中的两种方式。
EasyUI jQuery Resizable 小部件可以通过 CDN 安装，这是最简单的方式。
<!-- 引入 jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<!-- 引入 EasyUI -->
<script src="https://cdn.jsdelivr.net/npm/jquery-easyui/dist/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-easyui/dist/themes/bootstrap/easyui.min.css">
<!-- 引入 EasyUI Resizable -->
<script src="https://cdn.jsdelivr.net/npm/jquery-easyui/dist/jquery.resizable.min.js"></script>
EasyUI jQuery Resizable 小部件也可以通过下载安装，这需要将其下载到本地。下载地址在官网上有提供。
在下载完毕之后，需要手动将其安装到项目中。
使用 EasyUI jQuery Resizable 小部件是非常简单的，只需要使用 jQuery 选择要调整大小的元素，并将其作为参数传递给 resizable() 方法即可。
下面是一个基本的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EasyUI Resizable</title>
<!-- 引入 EasyUI 以及 EasyUI Resizable -->
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-easyui/dist/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-easyui/dist/themes/bootstrap/easyui.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery-easyui/dist/jquery.resizable.min.js"></script>
</head>
<body>
<div id="box" style="width: 200px; height: 200px; background-color: green;"></div>
<script type="text/javascript">
$(function(){
$('#box').resizable({
onResize:function(){
console.log('resized');
}
});
});
</script>
</body>
</html>
通过运行上述代码，可以得到一个绿色的正方形元素，当用户调整该元素的大小时，控制台会输出字符串"resized"。
在上述代码中，$(function(){...}) 表示在文档加载完成之后会执行其内部的函数。该函数中调用了 resizable() 方法，并传递了一个参数对象，其中 onResize 属性表示控制台输出的字符串。