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

2018-06-22 06:58:37来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、创建组件

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>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Nancy之给我们的网站添加自定义图标

下一篇:泛型(一)