# 加載方式 ## Class方式加載 ``` <div id="box" class="easyui-resizable" style="width:100px;height:100px;background:#ccc;"> </div> ``` ## JS調用加載 ``` <div id="box" style="width:100px;height:100px;background:#ccc;"> </div> <script> $(function () { $('#box').resizable({ // 是否禁用調整 //disabled:true, // 聲明調整的方位 handles:' n,e,s,w,ne,se,sw,nw,all', // 調整大小時最小寬度 minWidth: 100, // 調整大小時最小高度 minHeight:100, // 調整大小時最大寬度 maxWidth:600, // 調整大小時最大高度 maxHeight:600, // 邊框邊緣觸發大小 edge:10, // 在開始改變大小的時候觸發 onStartResize:function (e) { console.log('開始改變大小時！'); }, // 在調整大小期間觸發。當返回 false 的時候，不會實際改變 DOM 元素大小。 // 一旦松開鼠標則會改變DOM元素的大小 onResize : function (e) { console.log('調整大小時期觸發！'); //return false; }, //在停止改變大小的時候觸發 onStopResize : function (e) { console.log('停止調整大小時觸發！'); }, }); }); </script> ``` # 屬性列表 |屬性名 | 值 | 說明| |---|--- | ---| |disabled | boolean | 默認為 false，設置為 true 則禁用調整| |handles | string | 默認為 n,e,s,w,ne,se,sw,nw,all，聲明調整的方位，n 表示北、e 表示東、s 表示南、w 表示西、還有 ne、se、sw、nw 和 all| |minWidth | number | 默認 10，調整大小時最小寬度| |minHeight | number | 默認 10，調整大小時最小高度| |maxWidth | number | 默認 10000，調整大小時最大寬度| |maxHeight| number| 默認 10000，調整大小時最大高度| |edge| number | 默認 5，邊框邊緣觸發大小| ## 事件列表 |事件名 | 傳參 | 說明| |---|--- | ---| |onStartResize | e | 在開始改變大小的時候觸發| |onResize | e | 在調整大小期間觸發。當返回 false 的時候，不會實際改變 DOM 元素大小。一旦松開鼠標則會改變DOM元素的大小| |onStopResize | e | 在停止改變大小的時候觸發| ## 方法列表 |方法名 | 傳參 | 說明| |---|--- | ---| |options |none |返回屬性對象| |enable| none |啟用調整功能| |disable |none |禁用調整功能| ``` // 返回屬性對象 console.log($('#box').resizable('options')); // 禁止調整 $('#box').resizable('disable'); // 啟用放置 $('#box').resizable('enable'); // 可以使用$.fn.resizable.defaults 重寫默認值對象。 $.fn.resizable.defaults.disabled = true; ```