JQuery EasyUI是目前比较流行的前端后台数据展示静态框架,经常会遇到一些调整窗口大小的问题,下面本人为大家讲述一种如何实现调整窗口是窗口大小符合自己想要的效果,使用$.fn.resizable.defaults重写默认值对象。
举例说明使用标签方式创建可变大小窗口,具体代码如下:
<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div>
举例说明使用Javascript创建可变大小的窗口,具体代码如下:
<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div> <script type="text/javascript"> $('#rr').resizable({ maxWidth:800, maxHeight:600 }); </script>
参数属性值,参考如下:
属性名 属性值类型 描述 默认值 disabled boolean 如果为true,则禁用大小调整。 false handles string 声明调整方位,'n'=北,'e'=东,'s'=南等。 n, e, s, w, ne, se, sw, nw, all minWidth number 当调整大小时候的最小宽度。 10 minHeight number 当调整大小时候的最小高度。 10 maxWidth number 当调整大小时候的最大宽度。 10000 maxHeight number 当调整大小时候的最大高度。 10000 edge number 边框边缘大小。 5
使用事件,参考如下:
事件名 事件参数 描述 onStartResize e 在开始改变大小的时候触发。 onResize e 在调整大小期间触发。当返回false的时候,不会实际改变DOM元素大小。 onStopResize e 在停止改变大小的时候触发。
使用方法,参考如下:
方法名 方法参数 描述 options none 返回调整大小属性。 enable none 启用调整大小功能。 disable none 禁用调整大小功能。