jQuery UI 实例 - 缩放(Resizable)

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

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

默认功能

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

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

#resizable { width: 150px; height: 150px; padding: 0.5em; }

#resizable h3 { text-align: center; margin: 0; }

$(function() {

$( "#resizable" ).resizable();

});

动画

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

jQuery UI 缩放(Resizable) - 动画

#resizable { width: 150px; height: 150px; padding: 0.5em; }

#resizable h3 { text-align: center; margin: 0; }

.ui-resizable-helper { border: 1px dotted gray; }

$(function() {

$( "#resizable" ).resizable({

animate: true

});

});

限制缩放区域

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

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

#container { width: 300px; height: 300px; }

#container h3 { text-align: center; margin: 0; margin-bottom: 10px; }

#resizable { background-position: top left; width: 150px; height: 150px; }

#resizable, #container { padding: 0.5em; }

$(function() {

$( "#resizable" ).resizable({

containment: "#container"

});

});

延迟开始

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

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

#resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; }

#resizable h3, #resizable2 h3 { text-align: center; margin: 0; }

$(function() {

$( "#resizable" ).resizable({

delay: 1000

});

$( "#resizable2" ).resizable({

distance: 40

});

});

时间延迟 (ms):

距离延迟 (px):

助手

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

jQuery UI 缩放(Resizable) - 助手

#resizable { width: 150px; height: 150px; padding: 0.5em; }

#resizable h3 { text-align: center; margin: 0; }

.ui-resizable-helper { border: 2px dotted #00F; }

$(function() {

$( "#resizable" ).resizable({

helper: "ui-resizable-helper"

});

});

最大/最小尺寸

使用 maxHeight、maxWidth、minHeight 和 minWidth 选项限制 resizable 元素的最大或最小高度或宽度。

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

#resizable { width: 200px; height: 150px; padding: 5px; }

#resizable h3 { text-align: center; margin: 0; }

$(function() {

$( "#resizable" ).resizable({

maxHeight: 250,

maxWidth: 350,

minHeight: 150,

minWidth: 200

});

});

保持纵横比

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

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

#resizable { width: 160px; height: 90px; padding: 0.5em; }

#resizable h3 { text-align: center; margin: 0; }

$(function() {

$( "#resizable" ).resizable({

aspectRatio: 16 / 9

});

});

对齐到网格

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

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

#resizable { width: 150px; height: 150px; padding: 0.5em; }

#resizable h3 { text-align: center; margin: 0; }

$(function() {

$( "#resizable" ).resizable({

grid: 50

});

});

同步缩放

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

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

#resizable { background-position: top left; }

#resizable, #also { width: 150px; height: 120px; padding: 0.5em; }

#resizable h3, #also h3 { text-align: center; margin: 0; }

#also { margin-top: 1em; }

$(function() {

$( "#resizable" ).resizable({

alsoResize: "#also"

});

$( "#also" ).resizable();

});

文本框

可缩放的文本框。

jQuery UI 缩放(Resizable) - 文本框

.ui-resizable-se {

bottom: 17px;

}

$(function() {

$( "#resizable" ).resizable({

handles: "se"

});

});

视觉反馈

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

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

#resizable { width: 150px; height: 150px; padding: 0.5em; }

#resizable h3 { text-align: center; margin: 0; }

.ui-resizable-ghost { border: 1px dotted gray; }

$(function() {

$( "#resizable" ).resizable({

ghost: true

});

});