缩放
最后更新于:2022-04-02 03:13:57
[TOC]
## 可调整尺寸小部件
demo
```
//style
.ui-resizable-helper { border: 1px dotted gray; }
//给拖动的部件添加虚线
$(".demo").resizable({
animate: true,
aspectRatio: 16 / 9 , //保持纵横比
containment: "#container", //限制缩放区域
helper: "ui-resizable-helper", //默认 ui-resizable-helper 拖动时自动添加的类
ghost: true,//一个半透明视觉框
})
```
选项
```
alsoResize:Selector 同步调整其他 部件
animate:Boolean 设置动画
aspectRatio:Boolean,Number 限制长宽比
autoHide:Boolean 当用户鼠标没有悬浮在元素上时是否隐藏手柄
delay:Number 鼠标按下调整按钮的生效时间
disabled:Boolean 禁用拖拽
ghost:Boolean 为调整尺寸显示一个半透明的辅助元素
grid:Array 可调整尺寸元素对齐到网格,每个 x 和 y 像素。数组形式必须是 [ x, y ]
minHeight-maxHeight 设置元素的高界限
minWidth-maxWidth 设置元素的高界限
```
事件
```
create( event, ui ) 当 resizable 被创建时触发。
resize( event, ui ) 在调整尺寸期间当调整手柄拖拽时触发。
start( event, ui ) 当调整尺寸操作开始时触发。
stop( event, ui ) 当调整尺寸操作停止时触发。
```
';