<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
</head>
<body>
<div id="box" style="width:100px;height:100px;border:1px solid #ccc;">
</div>
</body>
</html>
$(function () {
$('#box').resizable({
disabled : true,//是否可以调整大小
handles : 'se',//支持调整大小的方向
minWidth : 200,//可调整大小的最小宽度
minHeight : 200,//可以调整大小的最小高度
maxWidth : 500,//可以调整大的最大宽度
maxHeight : 350,//可以调整大小的最大高度
edge : 20,//边框边沿触发大小
onStartResize:function(e){
alert("开始调整的时候触发");
},
onResize:function(e){
alert("调整大小的过程中触发");
},
onStopResize : function (e) {
alert("停止调整大小的过程中触发");
},
});
});
//返回属性对象
$('#box').resizable('options');
//禁止调整
$('#box').resizable('disable');
//启用放置
$('#box').resizable('enable');
//我们可以使用$.fn.resizable.defaults 重写默认值对象。
$.fn.resizable.defaults.disabled = true;