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

学习要点:

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

第 5 章 Resizable(调整大小)组件相关推荐

Resizable(调整大小)组件
一．加载方式 //class 加载方式 <div id="rr" class="easyui-resizable" data-options=" ...
【EasyUI篇】Resizable （调整大小组件）
微信公众号:程序yuan 关注可了解更多的教程.问题或建议,请公众号留言; 查看--> 全套EasyUI示例目录 Resizable (调整大小组件) JSP文件 <%--Created ...
第十四章：Element-ui组件库
第十四章:Element-ui组件库一.常用的UI组件库 1.1 移动端常用UI组件库 Vant组件库 Mint组件库 Cube组件库 1.2 PC端常用UI组件库 Element UI组件库饿了 ...
【正点原子STM32连载】第二十六章 USMART调试组件实验摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
1)实验平台:正点原子MiniPro H750开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=677017430560 3)全套实验源码+手册+视频 ...
第17章使用WebBroker组件创建Web服务器
WebBroker是一套VCL工具,可以帮助您建立Web服务器程序.WebBroker与Delphi企业版一同发布,也可单独购买并与Delphi专业版配合使用.WebBroker可用于建立Web服务器 ...
卜若的代码笔记-一周速通LayaAir-第二章：获取组件
1.按照Unity的求解思路,现在我们得在Scene上操作下面是它的Hierarchy面板,我们选择UI,右键,可以创建一些UI元素,比如创建一个Button. 2.从Unity的角度思考问题,那么 ...
CakePHP 2.x CookBook 中文版第五章控制器之组件
为什么80%的码农都做不了架构师?>>> 组件组件是在多个控制器中共享的逻辑包.如果你发现自己想要在控制器间复制粘贴某些东西时,你就应该考虑将一些功能包装在一个组件中了. C ...
错误:在keystone中无法找到默认角色user_第四章 keystone认证组件安装1
1.在控制节点安装rabbitmq.memcached组件 apt-get -y install rabbitmq-server memcached python-pymysql # 设置openst ...
黑客攻防技术宝典Web实战篇第2版—第10章测试后端组件
10.1 注入操作系统命令 1.许多时候,开发者直接向服务器发送操作系统指令,但如果应用程序向操作系统发送用户输入指令,可能受到命令注入攻击.通常所有的注入命令都可在Web服务器的进程中安全运行,使得 ...

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

学习要点:

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

二.属性列表

三.事件列表

四.方法列表

第 5 章 Resizable(调整大小)组件相关推荐

最新文章

热门文章