jQuery UI 实例 – 缩放（Resizable）

默认功能

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

  
  
  
  
  
  
  
  


 

  
缩放（Resizable）

 
 

查看演示

动画

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

  
  
  
  
  
  
  
  


 

  
动画

 
 

查看演示

限制缩放区域

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

  
  
  
  
  
  
  
  


 

  
限制
  

    
缩放（Resizable）
  

 
 

查看演示

延迟开始

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

  
  
  
  
  
  
  
  


 
时间延迟 (ms):

  
时间

 
距离延迟 (px):

  
距离

 
 

查看演示

助手

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

  
  
  
  
  
  
  
  


 

  
助手

 
 

查看演示

最大/最小尺寸

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

  
  
  
  
  
  
  
  


 

  
放大/缩小

 
 

查看演示

保持纵横比

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

  
  
  
  
  
  
  
  


 

  
保持纵横比

 
 

查看演示

对齐到网格

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

  
  
  
  
  
  
  
  


 

  
网格

 
 

查看演示

同步缩放

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

  
  
  
  
  
  
  
  


 

  
缩放

 

  
同步缩放

 
 

查看演示

文本框

可缩放的文本框。

查看演示

视觉反馈

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

  
  
  
  
  
  
  
  


 

  
Ghost

 
 

查看演示