EasyUI系列学习-Resizable(调整大小)

Posted 2020-06-14

一、创建组件

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>