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

一、成立组件

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>