微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;
全套EasyUI示例目录
Resizable （调整大小组件）
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Droppable</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Resizable.js"></script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
<%--使用class加载方式--%>
<%--maxWidth:600, maxHeight:400 设置最大高度和最大宽度--%>
<%-- <div id="rr" class="easyui-resizable"
data-options="maxWidth:600, maxHeight:400,"
style="width: 100px; height: 100px; border: 1px solid black;">
</div>--%>
<div id="rr" style="width: 100px; height: 100px; border: 1px solid black;">
</div>
</body>
</html>
JS文件
$(function () {
//使用$.fn.resizable.defaults 重写默认值对象。
$.fn.resizable.defaults.disabled = true;
/*使用js加载方式*/
$("#rr").resizable({
//-------------- 属性列表 ----------------
//设置为不可改变大小，即禁用
// disabled : true,
//设置可拖动该变大小的方向
// handles:'e,s',
minWidth:200,
minHeight:200,
maxWidth:400,
maxHeight:400,
//设置触发区域离边框的距离
// edge:20,
//-------------- 事件列表 ----------------
onStartResize:function (e) {
// alert("开始改变时触发");
// $(this).css('background','green');
},
onResize: function (e) {
//改变过程中触发
// alert("改变过程中触发");
// $(this).css('background','red');
//return false; 表示在改变的过程中不是立即改变DOM的大小，而是直接显示停止改变的额结果。
},
onStopResize: function (e) {
// alert("停止改变时触发");
}
});
//------------- 方法列表 -----------------
console.log($("#rr").resizable('options'));
//禁用
// $("#rr").resizable('disable');
//启用
$("#rr").resizable('enable');
});
注意
onResize 如果返回false，不会立即改变元素的大小，而是直接显示改变停止的结果。
------------------------------------------------
关注小编微信公众号获取更多资源
