非常教程

jQuery UI 教程教程

jQuery UI API – 可调整尺寸小部件(Resizable Widget)

jQuery UI API – 可调整尺寸小部件(Resizable Widget)

jQuery UI API - 可调整尺寸小部件(Resizable Widget)

所属类别

交互(Interactions)

用法

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

版本新增:1.0

依赖:

  • UI 核心(UI Core)
  • 部件库(Widget Factory)
  • 鼠标交互(Mouse Interaction)

注释:jQuery UI 可调整尺寸(Resizable)插件让被选元素可调整尺寸(意味着它们有可拖拽的调整大小的手柄)。您可以指定一个或多个手柄,也可以指定宽度和高度的最小值也最大值。

附加说明:该部件要求一些功能性的 CSS,否则将无法工作。如果您创建了一个自定义的主题,请使用小部件指定的 CSS 文件作为起点。

快速导航

选项 方法 事件
alsoResize
animate
animateDuration
animateEasing
aspectRatio
autoHide
cancel
containment
delay
disabled
distance
ghost
grid
handles
helper
maxHeight
maxWidth
minHeight
minWidth
destroy
disable
enable
option
widget
create
resize
start
stop

选项 类型 描述 默认值
alsoResize Selector 或 jQuery 或 Element 一个或多个通过 resizable 元素进行同步调整尺寸的元素。

代码实例:

初始化带有指定 alsoResize 选项的 resizable:

$( ".selector" ).resizable({ alsoResize: "#mirror" });
    

在初始化后,获取或设置 alsoResize 选项:

// getter
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
 
// setter
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" );
    
false
animate Boolean 调整尺寸后动态变化到最终尺寸。

代码实例:

初始化带有指定 animate 选项的 resizable:

$( ".selector" ).resizable({ animate: true });
    

在初始化后,获取或设置 animate 选项:

// getter
var animate = $( ".selector" ).resizable( "option", "animate" );
 
// setter
$( ".selector" ).resizable( "option", "animate", true );
    
false
animateDuration Number 或 String 当使用 animate 选项时,动画持续的时间。

支持多个类型:

  • Number:持续时间,以毫秒计。
  • String:一个命名的持续时间,比如 "slow""fast"

代码实例:

初始化带有指定 animateDuration 选项的 resizable:

$( ".selector" ).resizable({ animateDuration: "fast" });
    

在初始化后,获取或设置 animateDuration 选项:

// getter
var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
 
// setter
$( ".selector" ).resizable( "option", "animateDuration", "fast" );
    
"slow"
animateEasing String 当使用 animate 选项时要使用的 Easings。

代码实例:

初始化带有指定 animateEasing 选项的 resizable:

$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
    

在初始化后,获取或设置 animateEasing 选项:

// getter
var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
 
// setter
$( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" );
    
"swing"
aspectRatio Boolean 或 Number 元素是否应该被限制在一个特定的长宽比。

支持多个类型:

  • Boolean:当设置为 true 时,元素将保持其原有的长宽比。
  • Number:强制在调整尺寸时元素保持特定的长宽比。

代码实例:

初始化带有指定 aspectRatio 选项的 resizable:

$( ".selector" ).resizable({ aspectRatio: true });
    

在初始化后,获取或设置 aspectRatio 选项:

// getter
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
 
// setter
$( ".selector" ).resizable( "option", "aspectRatio", true );
    
false
autoHide Boolean 当用户鼠标没有悬浮在元素上时是否隐藏手柄。

代码实例:

初始化带有指定 autoHide 选项的 resizable:

$( ".selector" ).resizable({ autoHide: true });
    

在初始化后,获取或设置 autoHide 选项:

// getter
var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
 
// setter
$( ".selector" ).resizable( "option", "autoHide", true );
    
false
cancel Selector 防止从指定的元素上开始调整尺寸。

代码实例:

初始化带有指定 cancel 选项的 resizable:

$( ".selector" ).resizable({ cancel: ".cancel" });
    

在初始化后,获取或设置 cancel 选项:

// getter
var cancel = $( ".selector" ).resizable( "option", "cancel" );
 
// setter
$( ".selector" ).resizable( "option", "cancel", ".cancel" );
    
"input, textarea, button, select, option"
containment Selector 或 Element 或 String 约束在指定元素或区域的边界内调整尺寸。

支持多个类型:

  • Selector:可调整尺寸元素将被包含在 selector 第一个元素的边界内。如果未找到元素,则不设置 containment。
  • Element:可调整尺寸元素将被包含在元素的边界内。
  • String:可能的值:"parent""document"

代码实例:

初始化带有指定 containment 选项的 resizable:

$( ".selector" ).resizable({ containment: "parent" });
    

在初始化后,获取或设置 containment 选项:

// getter
var containment = $( ".selector" ).resizable( "option", "containment" );
 
// setter
$( ".selector" ).resizable( "option", "containment", "parent" );
    
false
delay Number 鼠标按下后直到调整尺寸开始为止的时间,以毫秒计。如果指定了该选项,调整只有在鼠标移动超过时间后才开始。该选项可以防止点击在某个元素上时不必要的调整尺寸。

代码实例:

初始化带有指定 delay 选项的 resizable:

$( ".selector" ).resizable({ delay: 150 });
    

在初始化后,获取或设置 delay 选项:

// getter
var delay = $( ".selector" ).resizable( "option", "delay" );
 
// setter
$( ".selector" ).resizable( "option", "delay", 150 );
    
0
disabled Boolean 如果设置为 true,则禁用该 resizable。

代码实例:

初始化带有指定 disabled 选项的 resizable:

$( ".selector" ).resizable({ disabled: true });
    

在初始化后,获取或设置 disabled 选项:

// getter
var disabled = $( ".selector" ).resizable( "option", "disabled" );
 
// setter
$( ".selector" ).resizable( "option", "disabled", true );
    
false
distance Number 鼠标按下后调整尺寸开始前必须移动的距离,以像素计。如果指定了该选项,调整只有在鼠标移动超过距离后才开始。该选项可以防止点击在某个元素上时不必要的调整尺寸。

代码实例:

初始化带有指定 distance 选项的 resizable:

$( ".selector" ).resizable({ distance: 30 });
    

在初始化后,获取或设置 distance 选项:

// getter
var distance = $( ".selector" ).resizable( "option", "distance" );
 
// setter
$( ".selector" ).resizable( "option", "distance", 30 );
    
1
ghost Boolean 如果设置为 true,则为调整尺寸显示一个半透明的辅助元素。

代码实例:

初始化带有指定 ghost 选项的 resizable:

$( ".selector" ).resizable({ ghost: true });
    

在初始化后,获取或设置 ghost 选项:

// getter
var ghost = $( ".selector" ).resizable( "option", "ghost" );
 
// setter
$( ".selector" ).resizable( "option", "ghost", true );
    
false
grid Array 把可调整尺寸元素对齐到网格,每个 x 和 y 像素。数组形式必须是 [ x, y ]

代码实例:

初始化带有指定 grid 选项的 resizable:

$( ".selector" ).resizable({ grid: [ 20, 10 ] });
    

在初始化后,获取或设置 grid 选项:

// getter
var grid = $( ".selector" ).resizable( "option", "grid" );
 
// setter
$( ".selector" ).resizable( "option", "grid", [ 20, 10 ] );
    
false
handles String 或 Object 可用于调整尺寸的处理程序。

支持多个类型:

  • String:一个逗号分隔的列表,列表值为下面所列出的任意值:n, e, s, w, ne, se, sw, nw, all。必要的处理程序由插件自动生成。
  • Object:支持下面的键:{ n, e, s, w, ne, se, sw, nw }。任何指定的值应该是一个匹配作为处理程序使用的 resizable 的子元素的 jQuery 选择器。

注释:当生成您自己的处理程序时,每个处理程序必须有 ui-resizable-handle class,也可以是适当的 appropriate ui-resizable-{direction} class,比如 ui-resizable-s。

代码实例:

初始化带有指定 handles 选项的 resizable:

$( ".selector" ).resizable({ handles: "n, e, s, w" });
    

在初始化后,获取或设置 handles 选项:

// getter
var handles = $( ".selector" ).resizable( "option", "handles" );
 
// setter
$( ".selector" ).resizable( "option", "handles", "n, e, s, w" );
    
"e, s, se"
helper String 一个将被添加到代理元素的 class 名称,用于描绘调整手柄拖拽过程中调整的轮廓。一旦调整完成,原来的元素则被重新定义尺寸。

代码实例:

初始化带有指定 helper 选项的 resizable:

$( ".selector" ).resizable({ helper: "resizable-helper" });
    

在初始化后,获取或设置 helper 选项:

// getter
var helper = $( ".selector" ).resizable( "option", "helper" );
 
// setter
$( ".selector" ).resizable( "option", "helper", "resizable-helper" );
    
false
maxHeight Number resizable 允许被调整到的最大高度。

代码实例:

初始化带有指定 maxHeight 选项的 resizable:

$( ".selector" ).resizable({ maxHeight: 300 });
    

在初始化后,获取或设置 maxHeight 选项:

// getter
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
 
// setter
$( ".selector" ).resizable( "option", "maxHeight", 300 );
    
null
maxWidth Number resizable 允许被调整到的最大宽度。

代码实例:

初始化带有指定 maxWidth 选项的 resizable:

$( ".selector" ).resizable({ maxWidth: 300 });
    

在初始化后,获取或设置 maxWidth 选项:

// getter
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
 
// setter
$( ".selector" ).resizable( "option", "maxWidth", 300 );
    
null
minHeight Number resizable 允许被调整到的最小高度。

代码实例:

初始化带有指定 minHeight 选项的 resizable:

$( ".selector" ).resizable({ minHeight: 150 });
    

在初始化后,获取或设置 minHeight 选项:

// getter
var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
 
// setter
$( ".selector" ).resizable( "option", "minHeight", 150 );
    
10
minWidth Number resizable 允许被调整到的最小宽度。

代码实例:

初始化带有指定 minWidth 选项的 resizable:

$( ".selector" ).resizable({ minWidth: 150 });
    

在初始化后,获取或设置 minWidth 选项:

// getter
var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
 
// setter
$( ".selector" ).resizable( "option", "minWidth", 150 );
    
10

方法 返回 描述
destroy() jQuery (plugin only) 完全移除 resizable 功能。这会把元素返回到它的预初始化状态。
  • 该方法不接受任何参数。

代码实例:

调用 destroy 方法:

$( ".selector" ).resizable( "destroy" );
    
disable() jQuery (plugin only) 禁用 resizable。
  • 该方法不接受任何参数。

代码实例:

调用 disable 方法:

$( ".selector" ).resizable( "disable" );
    
enable() jQuery (plugin only) 启用 resizable。
  • 该方法不接受任何参数。

代码实例:

调用 enable 方法:

$( ".selector" ).resizable( "enable" );
    
option( optionName ) Object 获取当前与指定的 optionName 关联的值。
  • optionName
    类型:String
    描述:要获取的选项的名称。

代码实例:

调用该方法:

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
    
option() PlainObject 获取一个包含键/值对的对象,键/值对表示当前 resizable 选项哈希。
  • 该方法不接受任何参数。

代码实例:

调用该方法:

var options = $( ".selector" ).resizable( "option" );
    
option( optionName, value ) jQuery (plugin only) 设置与指定的 optionName 关联的 resizable 选项的值。
  • optionName
    类型:String
    描述:要设置的选项的名称。
  • value
    类型:Object
    描述:要为选项设置的值。

代码实例:

调用该方法:

$( ".selector" ).resizable( "option", "disabled", true );
    
option( options ) jQuery (plugin only) 为 resizable 设置一个或多个选项。
  • options
    类型:Object
    描述:要设置的 option-value 对。

代码实例:

调用该方法:

$( ".selector" ).resizable( "option", { disabled: true } );
    
widget() jQuery 返回一个包含 resizable 元素的 jQuery 对象。
  • 该方法不接受任何参数。

代码实例:

调用 widget 方法:

var widget = $( ".selector" ).resizable( "widget" );
    

事件 类型 描述
create( event, ui ) resizecreate 当 resizable 被创建时触发。
  • event
    类型:Event
  • ui
    类型:Object

注意:ui 对象是空的,这里包含它是为了与其他事件保持一致性。

代码实例:

初始化带有指定 create 回调的 resizable:

$( ".selector" ).resizable({
  create: function( event, ui ) {}
});
    

绑定一个事件监听器到 resizecreate 事件:

$( ".selector" ).on( "resizecreate", function( event, ui ) {} );
    
resize( event, ui ) resize 在调整尺寸期间当调整手柄拖拽时触发。
  • event
    类型:Event
  • ui
    类型:Object
    • element
      类型:jQuery
      描述:jQuery 对象,表示要被调整尺寸的元素。
    • helper
      类型:jQuery
      描述:jQuery 对象,表示被调整尺寸的助手(helper)。
    • originalElement
      类型:jQuery
      描述:jQuery 对象,表示被包裹之前的原始元素。
    • originalPosition
      类型:Object
      描述:resizable 调整前的位置,表示为 { top, left }
    • originalSize
      类型:Object
      描述:resizable 调整前的尺寸,表示为 { width, height }
    • position
      类型:Object
      描述:当前位置,表示为 { top, left }
    • size
      类型:Object
      描述:当前尺寸,表示为 { width, height }

代码实例:

初始化带有指定 resize 回调的 resizable:

$( ".selector" ).resizable({
  resize: function( event, ui ) {}
});
    

绑定一个事件监听器到 resize 事件:

$( ".selector" ).on( "resize", function( event, ui ) {} );
    
start( event, ui ) resizestart 当调整尺寸操作开始时触发。
  • event
    类型:Event
  • ui
    类型:Object
    • element
      类型:jQuery
      描述:jQuery 对象,表示要被调整尺寸的元素。
    • helper
      类型:jQuery
      描述:jQuery 对象,表示被调整尺寸的助手(helper)。
    • originalElement
      类型:jQuery
      描述:jQuery 对象,表示被包裹之前的原始元素。
    • originalPosition
      类型:Object
      描述:resizable 调整前的位置,表示为 { top, left }
    • originalSize
      类型:Object
      描述:resizable 调整前的尺寸,表示为 { width, height }
    • position
      类型:Object
      描述:当前位置,表示为 { top, left }
    • size
      类型:Object
      描述:当前位置,表示为 { width, height }

代码实例:

初始化带有指定 start 回调的 resizable:

$( ".selector" ).resizable({
  start: function( event, ui ) {}
});
    

绑定一个事件监听器到 resizestart 事件:

$( ".selector" ).on( "resizestart", function( event, ui ) {} );
    
stop( event, ui ) resizestop 当调整尺寸操作停止时触发。
  • event
    类型:Event
  • ui
    类型:Object
    • element
      类型:jQuery
      描述:jQuery 对象,表示要被调整尺寸的元素。
    • helper
      类型:jQuery
      描述:jQuery 对象,表示被调整尺寸的助手(helper)。
    • originalElement
      类型:jQuery
      描述:jQuery 对象,表示被包裹之前的原始元素。
    • originalPosition
      类型:Object
      描述:resizable 调整前的位置,表示为 { top, left }
    • originalSize
      类型:Object
      描述:resizable 调整前的尺寸,表示为 { width, height }
    • position
      类型:Object
      描述:当前位置,表示为 { top, left }
    • size
      类型:Object
      描述:当前位置,表示为 { width, height }

代码实例:

初始化带有指定 stop 回调的 resizable:

$( ".selector" ).resizable({
  stop: function( event, ui ) {}
});
    

绑定一个事件监听器到 resizestop 事件:

$( ".selector" ).on( "resizestop", function( event, ui ) {} );
    

实例

一个简单的 jQuery UI 可调整尺寸小部件(Resizable Widget)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>可调整尺寸小部件(Resizable Widget)演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  #resizable {
    width: 100px;
    height: 100px;
    background: #ccc;
}    </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="resizable"></div>
 
<script>
$( "#resizable" ).resizable();
</script>
 
</body>
</html>

jQuery UI API – 可调整尺寸小部件(Resizable Widget)
jQuery UI 教程

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题,可用于创建高度交互的 Web 应用程序。

jQuery UI 教程目录

1.jQuery UI 简介
2.jQuery UI 教程
3.jQuery UI CSS 框架 API
4.jQuery UI 主题
5.jQuery UI 工作原理
6.jQuery UI 如何使用部件库
7.jQuery UI 为什么使用部件库
8.jQuery UI 小部件方法调用
9.jQuery UI 通过部件库扩展小部件
10.jQuery UI 部件库
11.jQuery UI 设计主题
12.jQuery UI API 类别 – UI 核心
13.jQuery UI API 类别 – 主题
14.jQuery UI API 类别 – 选择器
15.jQuery UI API 类别 – 方法
16.jQuery UI API 类别 – 方法重载
17.jQuery UI API 类别 – 交互
18.jQuery UI API 类别 – 特效核心
19.jQuery UI API 类别 – 特效
20.jQuery UI API 文档
21.jQuery UI API – 颜色动画(Color Animation)
22.jQuery UI API – 剪辑特效(Clip Effect)
23.jQuery UI API – 反弹特效(Bounce Effect)
24.jQuery UI API – 百叶窗特效(Blind Effect)
25.jQuery UI API – .addClass()
26.jQuery UI 实例
27.jQuery UI API 类别 – 小部件
28.jQuery UI API 类别 – 实用工具
29.jQuery UI API – 跳动特效(Pulsate Effect)
30.jQuery UI API – 膨胀特效(Puff Effect)
31.jQuery UI API – 突出特效(Highlight Effect)
32.jQuery UI API – .hide()
33.jQuery UI API – 折叠特效(Fold Effect)
34.jQuery UI API – 淡入淡出特效(Fade Effect)
35.jQuery UI API – 爆炸特效(Explode Effect)
36.jQuery UI API – .effect()
37.jQuery UI API – Easings
38.jQuery UI API – 降落特效(Drop Effect)
39.jQuery UI API – 转移特效(Transfer Effect)
40.jQuery UI API – .toggleClass()
41.jQuery UI API – .toggle()
42.jQuery UI API – .switchClass()
43.jQuery UI API – 滑动特效(Slide Effect)
44.jQuery UI API – 尺寸特效(Size Effect)
45.jQuery UI API – .show()
46.jQuery UI API – 震动特效(Shake Effect)
47.jQuery UI API – 缩放特效(Scale Effect)
48.jQuery UI API – .removeClass()
49.jQuery UI API – 可放置小部件(Droppable Widget)
50.jQuery UI API – 可拖拽小部件(Draggable Widget)
51.jQuery UI API – .enableSelection()
52.jQuery UI API – .disableSelection()
53.jQuery UI API – .position()
54.jQuery UI API – .focus()
55.jQuery UI API – 可排序小部件(Sortable Widget)
56.jQuery UI API – 可选择小部件(Selectable Widget)
57.jQuery UI API – 可调整尺寸小部件(Resizable Widget)
58.jQuery UI API – 鼠标交互(Mouse Interaction)
59.jQuery UI API – 堆叠元素(Stacking Elements)
60.jQuery UI API – 图标(Icons)
61.jQuery UI API – CSS 框架(CSS Framework)
62.jQuery UI API – :tabbable Selector
63.jQuery UI API – :focusable Selector
64.jQuery UI API – :data() Selector
65.jQuery UI API – .zIndex()
66.jQuery UI API – .uniqueId()
67.jQuery UI API – .scrollParent()
68.jQuery UI API – .removeUniqueId()
69.jQuery UI API – 插件桥(Widget Plugin Bridge)
70.jQuery UI API – 部件库(Widget Factory)
71.jQuery UI API – jQuery.ui.keyCode
72.jQuery UI API – 滑块部件(Slider Widget)
73.jQuery UI API – 进度条部件(Progressbar Widget)
74.jQuery UI API – 菜单部件(Menu Widget)
75.jQuery UI API – 对话框部件(Dialog Widget)
76.jQuery UI API – 日期选择器部件(Datepicker Widget)
77.jQuery UI API – 按钮部件(Button Widget)
78.jQuery UI API – 自动完成部件(Autocomplete Widget)
79.jQuery UI API – 折叠面板部件(Accordion Widget)
80.jQuery UI API – 工具提示框部件(Tooltip Widget)
81.jQuery UI API – 标签页部件(Tabs Widget)
82.jQuery UI API – 旋转器部件(Spinner Widget)
83.jQuery UI 实例 – 缩放(Resizable)
84.jQuery UI 实例 – 放置(Droppable)
85.jQuery UI 实例 – 拖动(Draggable)
86.jQuery UI 实例 – 滑块(Slider)
87.jQuery UI 实例 – 进度条(Progressbar)
88.jQuery UI 实例 – 菜单(Menu)
89.jQuery UI 实例 – 对话框(Dialog)
90.jQuery UI 实例 – 日期选择器(Datepicker)
91.jQuery UI 实例 – 按钮(Button)
92.jQuery UI 实例 – 自动完成(Autocomplete)
93.jQuery UI 实例 – 折叠面板(Accordion)
94.jQuery UI 实例 – 排序(Sortable)
95.jQuery UI 实例 – 选择(Selectable)
96.jQuery UI 实例 – 切换 Class(Toggle Class)
97.jQuery UI 实例 – 移除 Class(Remove Class)
98.jQuery UI 实例 – 添加 Class(Add Class)
99.jQuery UI 实例 – 切换(Toggle)
100.jQuery UI 实例 – 隐藏(Hide)