easyUI基础-resizable调整大小

最新推荐文章于 2024-04-17 04:56:21 发布

小太阳哇

最新推荐文章于 2024-04-17 04:56:21 发布

阅读量1.1k

点赞数 1

分类专栏： easyUI学习

本文链接：https://blog.youkuaiyun.com/qq_39492374/article/details/86496404

版权

这篇博客介绍了easyUI的resizable功能，用于使HTML元素如panel和window变得可伸缩。内容涵盖resizable的属性，如disabled、handles、尺寸限制等，以及相关事件如onStartResize、onStopResize和onResize。此外，还详细说明了启用和禁用调整大小功能的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正如其字面意思一样(可伸缩),resiable主要是将一些html元素扩展为可伸缩的，panel、window等

使用案例

使用标签创建可变大小的窗口。

<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>

$('#rr').resizable({
maxWidth:800,
maxHeight:600
});

属性

属性名	属性值类型	描述	默认值
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
maxHei