# 加载方式 ## 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; ```