原创

JQuery EasyUI 中 Resizable调整大小使用说明

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  禁用调整大小功能。
~阅读全文-人机检测~

微信公众号“Java精选”(w_z90110),专注Java技术干货分享!让你从此路人变大神!回复关键词领取资料:如Mysql、Hadoop、Dubbo、Spring Boot等,免费领取视频教程、资料文档和项目源码。微信搜索小程序“Java精选面试题”,内涵3000+道Java面试题!

涵盖:互联网那些事、算法与数据结构、SpringMVC、Spring boot、Spring Cloud、ElasticSearch、Linux、Mysql、Oracle等

评论

分享:

支付宝

微信