Resizable(调整大小)组件

一．加载方式

//class 加载方式

<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;">

</div>

//JS 加载调用

$('#box').resizable({

maxWidth:800, maxHeight:600,

});

二．属性列表

//属性设置

$('#rr').resizable({

disabled : true,

handles : 'se',

minWidth : 200,

minHeight : 200,

maxWidth : 500,

maxHeight : 350,

edge : 20,

});

事件列表

$('#rr').resizable({

onStartResize : function (e) {

console.log('开始改变大小时！');

},

onResize : function (e) {

console.log('调整大小时期触发！');

//return false;

},

onStopResize : function (e) {

console.log('停止调整大小时触发！');

},

});

四．方法列表

//返回属性对象

console.log($('#box').resizable('options'));

//禁止调整

$('#box').resizable('disable');

//启用放置

$('#box').resizable('enable');

PS：我们可以使用$.fn.resizable.defaults 重写默认值对象。 $.fn.resizable.defaults.disabled = true;