一、创建组件
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>