Resizable(调整大小)组件，easyui基础组件之中的一个。调整大小就是能够对元素能够拖着调整大小，这个组件不依赖于其它组件，使用比較简单，相关的属性、事件都
在样例中介绍了。
演示样例：
<!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>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script>
$(function () {
$.fn.resizable.defaults.disabled = true;
$('#rr').resizable({
disabled : false, //设置为true的时候禁止调整
handles : 'e,s,se', //声明调整的方位：n：北 e：东 s：南 w：西 除此之外还有ne、se、sw、nw和all。
minWidth : 200, //默觉得10 调整大小的时候最小宽度
minHeight : 200, //默觉得10 调整
maxWidth : 600, //默觉得10000 调整大小时默认最大宽度
maxHeight: 400, //默觉得10000 调整大小时默认最大高度
edge : 10, //默认5 边框边缘触发大小(就是多大区域触发可拖拽边线) //通过浏览器控制台能够清晰的看到以下几个事件的触发时机以及触发次数
onStartResize : function (e) {
console.log('開始调整的时候触发！ ');
},
onResize : function (e) {
console.log('调整期间的时候触发！');
//return false;
},
onStopResize : function (e) {
console.log('停止调整的时候触发！ ');
},
}); console.log($('#rr').resizable('options'));//返回对象属性 $('#rr').resizable('disable'); //禁用调整功能
$('#rr').resizable('enable'); //启用调整功能
});
</script>
</head>
<body>
<div id="rr" style="width:100px;height:100px;border:1px solid black"></div>
</body>
</html>