一、创建组件
1.使用标签创建可变大小的窗口
<div id="rBox" class="easyui-resizable" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
2.使用JavaScript创建可变大小的窗口
<div id="rBox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable();
});
</script>
二、属性
1.disabled：如果为true，则禁用大小调整
<div id="rBox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable({
disabled: true
});
});
</script>
2.handles：句柄默认值为：n, e, s, w, ne, se, sw, nw, all
<div id="rBox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable({
//表示鼠标在东南方向会出现箭头
handles: "se"
});
});
</script>
3.minWidth，minHeight，maxWidth，maxHeight
<div id="rBox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable({
//可调整最小宽度
minWidth: 150,
//可调整最小高度
minHeight: 80,
//可调整最大宽度
maxWidth: 500,
//可调整最打高度
maxHeight: 200
});
});
</script>
4.edge：设置边缘大小（理解为padding<=50时，操作才有效果）
<div id="rBox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable({
edge: 50
});
});
</script>
三、事件
1.onStartResize：在开始改变大小的时候触发
<div id="rBox" style="width: 200px; height: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable({
onStartResize: function (e) {
console.log("移动时触发一次");
}
});
});
</script>
2.onStopResize：在停止改变大小的时候触发
<div id="rBox" style="width: 200px; height: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable({
onStartResize: function (e) {
console.log("移动时触发一次");
},
onStopResize: function (e) {
console.log("每次鼠标按下都会触发，停止移动时触发一次");
}
});
});
</script>
3.onResize：在调整大小期间触发。当返回false的时候，不会实际改变DOM元素大小
<div id="rBox" style="width: 200px; height: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable({
onStartResize: function (e) {
console.log("移动时触发一次");
},
onStopResize: function (e) {
console.log("每次鼠标按下都会触发，停止移动时触发一次");
},
onResize: function (e) {
console.log("调整期间会一直触发");
//return false;
}
});
});
</script>
四、方法
1.options：返回调整大小属性
2.enable：启用调整大小功能
3.disable：禁用调整大小功能
五、重写默认对象
<div id="rBox" style="width: 200px; height: 100px; background:cyan"></div>
<script>
$(function () {
$.fn.resizable.defaults.maxHeight = 500;
$("#rBox").resizable({ });
});
</script>