学习要点：
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节重点了解 EasyUI 中 Resizeable(调整大小)组件的使用方法，调整大小就是可以对元素可以拖着调整大小，这个组件不依赖于其他组件。
一．加载方式
在Easyui中所有的组件都有二种加载方式
class加载方式
<!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> <script type="text/javascript" src="js/index.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" /> </head> <body> <div id="box" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"> </div> </body> </html>
JS加载方式
$(‘#box‘).resizable({
maxWidth:800,
maxHeight:600,
});
二． 属性列表
//属性设置
$(‘#box‘).resizable({
disabled : true, //disabled boolean 默认为 false，设置为 true 则禁用调整
handles : ‘se‘,//handles string 默认为 n,e,s,w,ne,se,sw,nw,all， 声明调整的方位，n 表示北、e 表示东、s 表示南、w 表示西、还有 ne、se、sw、nw 和 all
minWidth : 200,//minWidth number 默认 10，调整大小时最小宽度
minHeight : 200,//minHeight number 默认 10，调整大小时最小高度
maxWidth : 500,//maxWidth number 默认 10000，调整大小时最大宽度
maxHeight : 350,//maxHeight number 默认 10000，调整大小时最大高度
edge : 20,//edge number 默认 5，边框边缘触发大小
});
三． 事件列表
$(‘#box‘).resizable({
onStartResize : function (e) {
console.log(‘开始改变大小时！‘);
},
onResize : function (e) {
console.log(‘调整大小时期触发！‘);
//return false;
},
onStopResize : function (e) {
console.log(‘停止调整大小时触发！‘);
},
});
四． 方法列表
//返回属性对象 console.log($(‘#box‘).resizable(‘options‘)); 方法名 传参 说明 options none 返回属性对象 enable none 启用调整功能 disable none 禁用调整功能 //禁止调整 $(‘#box‘).resizable(‘disable‘); //启用放置 $(‘#box‘).resizable(‘enable‘); PS：我们可以使用$.fn.resizable.defaults 重写默认值对象。 $.fn.resizable.defaults.disabled = true;
时间： 2024-10-16 20:52:12