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>