首页 > 代码库 > EasyUI基础入门之Resiable(可缩放)
EasyUI基础入门之Resiable(可缩放)
easyui的base插件学习已经进行到Resizable(可缩放)了。照旧看看easyui官网的API。
Resiable
正如其字面意思一样(可伸缩),resiable主要是将一些html元素扩展为可伸缩的，panel、window等,不信的话查阅easyui载入器源代码就能够知道啦!(window是依赖于resizable的)还是以官网的描写叙述来说。
覆盖默认$.fn.resizable.defaults.
属性
| 名称 | 类型 | 描写叙述信息 | 默认值 |
| disabled | boolean | 假设为true则表示能够伸缩 | false |
| handles | string | 暗示了伸缩的方向,‘n‘表明向北方伸缩,‘e‘则表示向东边 | 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 | 返回resiable參数对象 |
| enable | none | 能够调整大小 |
| disable | none | 不能调整大小 |
使用方式
1、通过html标记创建:
2、使用js脚本创建:<div class="easyui-resizable" style="width:100px;height:100px;border:1px solid #ccc;" data-options="maxWidth:800,maxHeight:600"> </div>
<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div>
$('#rr').resizable({
maxWidth:800,
maxHeight:600
});Demo
相同官方站点的Demo,一看就懂!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Draggable - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"jquery-easyui-1.3.6/themes/metro/easyui.css">>好了,就这样了,我也懒得去贴网址了!
独立网站:liangtao.sinaapp.com/?p=200
EasyUI基础入门之Resiable(可缩放)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。