第 5 章 Resizable(调整大小)组件

最新推荐文章于 2024-10-16 12:28:37 发布

lgs198722

最新推荐文章于 2024-10-16 12:28:37 发布

阅读量1.2k

点赞数 1

分类专栏： easyui 文章标签： easyui javascript ecmascript

本文链接：https://blog.youkuaiyun.com/lgs198722/article/details/122226212

版权

easyui 专栏收录该内容

9 篇文章

订阅专栏

本文主要介绍EasyUI中Resizeable组件的使用，包括加载方式、属性、事件和方法列表，教你如何实现元素的拖动调整大小功能。

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

学习要点:

1.加载方式

2.属性列表

3.事件列表

4.方法列表

本节课重点了解 EasyUI 中 Resizeable(调整大小)组件的使用方法，调整大小就是可以对元素可以拖着调整大小，这个组件不依赖于其他组件。

一.加载方式

//class 加载方式
<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;">
</div>

//JS 加载调用 
$('#box').resizable({
   maxWidth:800,
   maxHeight:600,

});

二.属性列表

Resizable 属性

属性名	值	说明
disabled	boolean	默认为 false，设置为 true 则禁用调整
handles	string	默认为 n,e,s,w,ne,se,sw,nw,all，声明调整的方位，n 表示北、e 表示东、s 表示南、w 表示西、还有 ne、se、sw、nw 和 all
minWidth	number	默认 10，调整大小时最小宽度
minHeight	number	默认 10，调整大小时最小高度
maxWidth	number	默认 10000，调整大小时最大宽度
maxHeight	number	默认 10000，调整大小时最大高度
edge	number	默认 5，边框边缘触发大小

//属性设置 
    $('#rr').resizable({
        disabled: true, 
        handles: 'se', 
        minWidth: 200,
        minHeight: 200,
        maxWidth: 500,
        maxHeight: 350,
        edge: 20,
    });

三.事件列表

Resizable 事件

事件名	传参	说明
onStartResize	e	在开始改变大小的时候触发
onResize	e	在调整大小期间触发。当返回 false 的时候，不会实际改变 DOM 元素大小。
onStopResize	e	在停止改变大小的时候触发

$('#rr').resizable({
    onStartResize: function(e) {
        console.log('开始改变大小时!');
    },
    onResize: function(e) {
        console.log('调整大小时期触发!'); //return false;
    },
    onStopResize: function(e) {
        console.log('停止调整大小时触发!');
    },
});

四.方法列表

Resizable 方法

方法名	传参	说明
options	none	返回属性对象
enable	none	启用调整功能
disable	none	禁用调整功能

//返回属性对象
 console.log($('#box').resizable('options'));
//禁止调整
 $('#box').resizable('disable');
//启用放置
$('#box').resizable('enable');
PS: 我们可以使用$.fn.resizable.defaults重写默认值对象。
$.fn.resizable.defaults.disabled = true;

李炎恢 jQuery EasyUI 视频教程_哔哩哔哩_bilibili