JQuery EasyUI(5)

mac2024-04-05 33

第五章：Resizable（调整大小）组件

学习要点：

加载方式属性列表事件列表方法列表

一、加载方式：

1.class加载方式

2.JS调用

二、属性列表：

Resizable属性属性名值说明disabledboolean默认为false,设置为true,则禁用调整handlesstring默认为n,e,w,s,ne,se,sw,nw,all。声明调整的方位，n表示北，e表示东，s表示南，w表示西，还有ne,se,sw,nw,allminWidthnumber默认10，调整大小时最小宽度minHeigthnumber默认10，调整大小时最小高度maxWidthnumber默认1000，调整大小时最大宽度maxHeigthnumber默认1000，调整大小时最大高度edgenumber 默认5，边框边缘触发大小 <!DOCTYPE html> <html> <head> <title>JQuery Easy UI</title> <meta charset="utf-8"/> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/> </head> <body> <div id="rr" style="width:100px;height:100px;border:1px solid black"> </div> </body> </html> $(function(){ $('#rr').resizable({ //disabled:true, //handles:'e,s,se', //minWidth:200, //minHeight:200, //maxWidth:600, //maxHeight:400, edge:50, }); });

三、事件列表

Resizable事件事件名传参说明onStartResizee在开始改变大小时候触发onResizee在调整大小时触发，当返回false的时候，不会实际改变DOM元素大小onStopResizee在停止更改变大小的时候触发 <!DOCTYPE html> <html> <head> <title>JQuery Easy UI</title> <meta charset="utf-8"/> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/> </head> <body> <div id="rr" style="width:100px;height:100px;border:1px solid black"> </div> </body> </html> $(function(){ $('#rr').resizable({ onStartResize:function(e){ console.log('开始调整的时候触发！'); }, onResize:function(e){ console.log('调整期间的时候触发！'); //return false; }, onStopResize:function(e){ console.log('停止调整的时候触发！'); }, }); });

四、方法列表

Resizable方法方法名传参说明optionsnone返回属性对象enablenone启用调整功能disablenone禁止调整功能

PS：我们可以使用$.fn.resizable.defaults 重写默认值对象。

<!DOCTYPE html> <html> <head> <title>JQuery Easy UI</title> <meta charset="utf-8"/> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/> </head> <body> <div id="rr" style="width:100px;height:100px;border:1px solid black"> </div> </body> </html> $(function(){ $.fn.resizable.defaults.disabled = true; $('#rr').resizable({ onStartResize:function(e){ console.log('开始调整的时候触发！'); }, onResize:function(e){ console.log('调整期间的时候触发！'); //return false; }, onStopResize:function(e){ console.log('停止调整的时候触发！'); }, }); console.log($('#rr').resizable('options')); $('#rr').resizable('enable'); $('#rr').resizable('disable'); });

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/102834988

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载！

最新回复(0)