原创

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),回复关键字领取资料:如HadoopDubboCAS源码等等,免费领取资料视频和项目。 

涵盖:程序人生、搞笑视频、算法与数据结构、黑客技术与网络安全、前端开发、Java、Python、Redis缓存、Spring源码、各大主流框架、Web开发、大数据技术、Storm、Hadoop、MapReduce、Spark、elasticsearch、单点登录统一认证、分布式框架、集群、安卓开发、iOS开发、C/C++、.NET、Linux、Mysql、Oracle、NoSQL非关系型数据库、运维等。

评论

分享:

支付宝

微信