Resizable(调整大小)组件

一.加载方式 

//class 加载方式

<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="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;

原文地址:https://www.cnblogs.com/qinsilandiao/p/5005956.html