你的位置:首页 > ASP.net教程

[ASP.net教程]EasyUI系列学习(五)


一、创建组件

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>