需要加载element
模块,可通过下列方式加载
默认
在任意的 DOM 元素上启用 resizable 功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。
动画
使用 animate 选项(布尔值)使缩放行为动画化。当该选项设置为 true 时,拖拽轮廓到所需的位置,元素会在拖拽停止时以动画形式调整到该尺寸。
动画
限制区域
定义缩放区域的边界,使得这个区域无法超出
助手
助手
最大和最小尺寸
使用 maxHeight、maxWidth、minHeight
和 minWidth
选项限制 resizable
元素的最大或最小高度或宽度
保持纵横比
保持现有的纵横比或设置一个新的纵横比来限制缩放比例。设置 aspectRatio
选项为 true
,且可选地传递一个新的比率(比如,4/3)
对齐到网格
对齐 resizable 元素到网格。通过 grid
选项设置网格单元的尺寸(以像素为单位的高度和宽度)。
同步缩放
通过点击并拖拽一个元素的边来同时调整多个元素的尺寸,给 alsoResize
选项传递一个共享的选择器。
选项
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
alsoResize | Selector 或 jQuery 或 Element | 一个或多个通过 resizable 元素进行同步调整尺寸的元素。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
false |
animate | Boolean | 调整尺寸后动态变化到最终尺寸。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
false |
animateDuration | Number 或 String | 当使用 animate 选项时,动画持续的时间。
支持多个类型:
代码实例: 初始化带有指定 在初始化后,获取或设置 |
"slow" |
animateEasing | String | 当使用 animate 选项时要使用的 Easings。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
"swing" |
aspectRatio | Boolean 或 Number | 元素是否应该被限制在一个特定的长宽比。
支持多个类型:
代码实例: 初始化带有指定 在初始化后,获取或设置 |
false |
autoHide | Boolean | 当用户鼠标没有悬浮在元素上时是否隐藏手柄。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
false |
cancel | Selector | 防止从指定的元素上开始调整尺寸。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
"input, textarea, button, select, option" |
containment | Selector 或 Element 或 String | 约束在指定元素或区域的边界内调整尺寸。
支持多个类型:
代码实例: 初始化带有指定 在初始化后,获取或设置 |
false |
delay | Number | 鼠标按下后直到调整尺寸开始为止的时间,以毫秒计。如果指定了该选项,调整只有在鼠标移动超过时间后才开始。该选项可以防止点击在某个元素上时不必要的调整尺寸。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
0 |
disabled | Boolean | 如果设置为 true ,则禁用该 resizable。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
false |
distance | Number | 鼠标按下后调整尺寸开始前必须移动的距离,以像素计。如果指定了该选项,调整只有在鼠标移动超过距离后才开始。该选项可以防止点击在某个元素上时不必要的调整尺寸。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
1 |
ghost | Boolean | 如果设置为 true ,则为调整尺寸显示一个半透明的辅助元素。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
false |
grid | Array | 把可调整尺寸元素对齐到网格,每个 x 和 y 像素。数组形式必须是 [ x, y ] 。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
false |
handles | String 或 Object | 可用于调整尺寸的处理程序。
支持多个类型:
注释:当生成您自己的处理程序时,每个处理程序必须有 代码实例: 初始化带有指定 在初始化后,获取或设置 |
"e, s, se" |
helper | String | 一个将被添加到代理元素的 class 名称,用于描绘调整手柄拖拽过程中调整的轮廓。一旦调整完成,原来的元素则被重新定义尺寸。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
false |
maxHeight | Number | resizable 允许被调整到的最大高度。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
null |
maxWidth | Number | resizable 允许被调整到的最大宽度。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
null |
minHeight | Number | resizable 允许被调整到的最小高度。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
10 |
minWidth | Number | resizable 允许被调整到的最小宽度。
代码实例: 初始化带有指定 在初始化后,获取或设置 |
10 |
方法
方法 | 返回 | 描述 |
---|---|---|
destroy() | jQuery (plugin only) | 完全移除 resizable 功能。这会把元素返回到它的预初始化状态。
代码实例: 调用 destroy 方法: |
disable() | jQuery (plugin only) | 禁用 resizable。
代码实例: 调用 disable 方法: |
enable() | jQuery (plugin only) | 启用 resizable。
代码实例: 调用 enable 方法: |
option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
代码实例: 调用该方法: |
option() | PlainObject | 获取一个包含键/值对的对象,键/值对表示当前 resizable 选项哈希。
代码实例: 调用该方法: |
option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的 resizable 选项的值。
代码实例: 调用该方法: |
option( options ) | jQuery (plugin only) | 为 resizable 设置一个或多个选项。
代码实例: 调用该方法: |
widget() | jQuery | 返回一个包含 resizable 元素的 jQuery 对象。
代码实例: 调用 widget 方法: |
事件
事件 | 类型 | 描述 |
---|---|---|
create( event, ui ) | resizecreate | 当 resizable 被创建时触发。
注意: 代码实例: 初始化带有指定 create 回调的 resizable: 绑定一个事件监听器到 resizecreate 事件: |
resize( event, ui ) | resize | 在调整尺寸期间当调整手柄拖拽时触发。
代码实例: 初始化带有指定 resize 回调的 resizable: 绑定一个事件监听器到 resize 事件: |
start( event, ui ) | resizestart | 当调整尺寸操作开始时触发。
代码实例: 初始化带有指定 start 回调的 resizable: 绑定一个事件监听器到 resizestart 事件: |
stop( event, ui ) | resizestop | 当调整尺寸操作停止时触发。
代码实例: 初始化带有指定 stop 回调的 resizable: 绑定一个事件监听器到 resizestop 事件: |