jQuery UI Chinese Reference Manual /缩放(Resizable)

缩放(Resizable)

使用鼠标改变元素的尺寸。

如需了解更多有关 resizable 交互的细节,请查看 API 文档 可调整尺寸小部件(Resizable Widget)。

默认功能

在任意的 DOM 元素上启用 resizable 功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。

实例

    jQuery UI 缩放(Resizable) - 默认功能       

缩放(Resizable)


运行实例 »

点击 "运行实例" 按钮查看在线实例

动画

使用animate选项(布尔值)使缩放行为动画化。当该选项设置为 true 时,拖拽轮廓到所需的位置,元素会在拖拽停止时以动画形式调整到该尺寸。

实例

    jQuery UI 缩放(Resizable) - 动画       

动画


运行实例 »

点击 "运行实例" 按钮查看在线实例

限制缩放区域

定义缩放区域的边界。使用containment选项来指定一个父级的 DOM 元素或一个 jQuery 选择器,比如 'document.'。

实例

    jQuery UI 缩放(Resizable) - 限制缩放区域       

限制

缩放(Resizable)


运行实例 »

点击 "运行实例" 按钮查看在线实例

延迟开始

通过delay选项设置延迟开始缩放的毫秒数。通过distance选项设置光标被按下且拖拽指定像素后才允许缩放。

实例

    jQuery UI 缩放(Resizable) - 延迟开始       

时间延迟 (ms):

时间

距离延迟 (px):

距离


运行实例 »

点击 "运行实例" 按钮查看在线实例

助手

通过设置helper选项为一个 CSS class,当缩放时只显示元素的轮廓。

实例

    jQuery UI 缩放(Resizable) - 助手       

助手


运行实例 »

点击 "运行实例" 按钮查看在线实例

最大/最小尺寸

使用maxHeightmaxWidthminHeightminWidth选项限制 resizable 元素的最大或最小高度或宽度。

实例

    jQuery UI 缩放(Resizable) - 最大/最小尺寸       

放大/缩小


运行实例 »

点击 "运行实例" 按钮查看在线实例

保持纵横比

保持现有的纵横比或设置一个新的纵横比来限制缩放比例。设置aspectRatio选项为 true,且可选地传递一个新的比率(比如,4/3)。

实例

    jQuery UI 缩放(Resizable) - 保持纵横比       

保持纵横比


运行实例 »

点击 "运行实例" 按钮查看在线实例

对齐到网格

对齐 resizable 元素到网格。通过grid选项设置网格单元的尺寸(以像素为单位的高度和宽度)。

实例

    jQuery UI 缩放(Resizable) - 对齐到网格       

网格


运行实例 »

点击 "运行实例" 按钮查看在线实例

同步缩放

通过点击并拖拽一个元素的边来同时调整多个元素的尺寸。给alsoResize选项传递一个共享的选择器。

实例

    jQuery UI 缩放(Resizable) - 同步缩放       

缩放

同步缩放


运行实例 »

点击 "运行实例" 按钮查看在线实例

文本框

可缩放的文本框。

实例

    jQuery UI 缩放(Resizable) - 文本框       

运行实例 »

点击 "运行实例" 按钮查看在线实例

视觉反馈

通过设置ghost选项为 true,可在缩放期间显示一个半透明的元素,而不是显示一个实际的元素。

实例

    jQuery UI 缩放(Resizable) - 视觉反馈       

Ghost


运行实例 »

点击 "运行实例" 按钮查看在线实例