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 元素进行同步调整尺寸的元素。 代码实例: 初始化带有指定 $( ".selector" ).resizable({ alsoResize: "#mirror" }); 在初始化后,获取或设置 // getter var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" ); // setter $( ".selector" ).resizable( "option", "alsoResize", "#mirror" ); | false |
animate | Boolean | 调整尺寸后动态变化到最终尺寸。 代码实例: 初始化带有指定 $( ".selector" ).resizable({ animate: true }); 在初始化后,获取或设置 // getter var animate = $( ".selector" ).resizable( "option", "animate" ); // setter $( ".selector" ).resizable( "option", "animate", true ); | false |
animateDuration | Number 或 String | 当使用 animate 选项时,动画持续的时间。支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).resizable({ animateDuration: "fast" }); 在初始化后,获取或设置 // getter var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" ); // setter $( ".selector" ).resizable( "option", "animateDuration", "fast" ); | "slow" |
animateEasing | String | 当使用 animate 选项时要使用的 Easings。代码实例: 初始化带有指定 $( ".selector" ).resizable({ animateEasing: "easeOutBounce" }); 在初始化后,获取或设置 // getter var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" ); // setter $( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" ); | "swing" |
aspectRatio | Boolean 或 Number | 元素是否应该被限制在一个特定的长宽比。 支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).resizable({ aspectRatio: true }); 在初始化后,获取或设置 // getter var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" ); // setter $( ".selector" ).resizable( "option", "aspectRatio", true ); | false |
autoHide | Boolean | 当用户鼠标没有悬浮在元素上时是否隐藏手柄。 代码实例: 初始化带有指定 $( ".selector" ).resizable({ autoHide: true }); 在初始化后,获取或设置 // getter var autoHide = $( ".selector" ).resizable( "option", "autoHide" ); // setter $( ".selector" ).resizable( "option", "autoHide", true ); | false |
cancel | Selector | 防止从指定的元素上开始调整尺寸。 代码实例: 初始化带有指定 $( ".selector" ).resizable({ 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" ).resizable({ containment: "parent" }); 在初始化后,获取或设置 // getter var containment = $( ".selector" ).resizable( "option", "containment" ); // setter $( ".selector" ).resizable( "option", "containment", "parent" ); | false |
delay | Number | 鼠标按下后直到调整尺寸开始为止的时间,以毫秒计。如果指定了该选项,调整只有在鼠标移动超过时间后才开始。该选项可以防止点击在某个元素上时不必要的调整尺寸。 代码实例: 初始化带有指定 $( ".selector" ).resizable({ delay: 150 }); 在初始化后,获取或设置 // getter var delay = $( ".selector" ).resizable( "option", "delay" ); // setter $( ".selector" ).resizable( "option", "delay", 150 ); | 0 |
disabled | Boolean | 如果设置为 true ,则禁用该 resizable。代码实例: 初始化带有指定 $( ".selector" ).resizable({ disabled: true }); 在初始化后,获取或设置 // getter var disabled = $( ".selector" ).resizable( "option", "disabled" ); // setter $( ".selector" ).resizable( "option", "disabled", true ); | false |
distance | Number | 鼠标按下后调整尺寸开始前必须移动的距离,以像素计。如果指定了该选项,调整只有在鼠标移动超过距离后才开始。该选项可以防止点击在某个元素上时不必要的调整尺寸。 代码实例: 初始化带有指定 $( ".selector" ).resizable({ distance: 30 }); 在初始化后,获取或设置 // getter var distance = $( ".selector" ).resizable( "option", "distance" ); // setter $( ".selector" ).resizable( "option", "distance", 30 ); | 1 |
ghost | Boolean | 如果设置为 true ,则为调整尺寸显示一个半透明的辅助元素。代码实例: 初始化带有指定 $( ".selector" ).resizable({ ghost: true }); 在初始化后,获取或设置 // getter var ghost = $( ".selector" ).resizable( "option", "ghost" ); // setter $( ".selector" ).resizable( "option", "ghost", true ); | false |
grid | Array | 把可调整尺寸元素对齐到网格,每个 x 和 y 像素。数组形式必须是 [ x, y ] 。代码实例: 初始化带有指定 $( ".selector" ).resizable({ grid: [ 20, 10 ] }); 在初始化后,获取或设置 // getter var grid = $( ".selector" ).resizable( "option", "grid" ); // setter $( ".selector" ).resizable( "option", "grid", [ 20, 10 ] ); | false |
handles | String 或 Object | 可用于调整尺寸的处理程序。 支持多个类型:
注释:当生成您自己的处理程序时,每个处理程序必须有 代码实例: 初始化带有指定 $( ".selector" ).resizable({ handles: "n, e, s, w" }); 在初始化后,获取或设置 // getter var handles = $( ".selector" ).resizable( "option", "handles" ); // setter $( ".selector" ).resizable( "option", "handles", "n, e, s, w" ); | "e, s, se" |
helper | String | 一个将被添加到代理元素的 class 名称,用于描绘调整手柄拖拽过程中调整的轮廓。一旦调整完成,原来的元素则被重新定义尺寸。 代码实例: 初始化带有指定 $( ".selector" ).resizable({ helper: "resizable-helper" }); 在初始化后,获取或设置 // getter var helper = $( ".selector" ).resizable( "option", "helper" ); // setter $( ".selector" ).resizable( "option", "helper", "resizable-helper" ); | false |
maxHeight | Number | resizable 允许被调整到的最大高度。 代码实例: 初始化带有指定 $( ".selector" ).resizable({ maxHeight: 300 }); 在初始化后,获取或设置 // getter var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" ); // setter $( ".selector" ).resizable( "option", "maxHeight", 300 ); | null |
maxWidth | Number | resizable 允许被调整到的最大宽度。 代码实例: 初始化带有指定 $( ".selector" ).resizable({ maxWidth: 300 }); 在初始化后,获取或设置 // getter var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" ); // setter $( ".selector" ).resizable( "option", "maxWidth", 300 ); | null |
minHeight | Number | resizable 允许被调整到的最小高度。 代码实例: 初始化带有指定 $( ".selector" ).resizable({ minHeight: 150 }); 在初始化后,获取或设置 // getter var minHeight = $( ".selector" ).resizable( "option", "minHeight" ); // setter $( ".selector" ).resizable( "option", "minHeight", 150 ); | 10 |
minWidth | Number | resizable 允许被调整到的最小宽度。 代码实例: 初始化带有指定 $( ".selector" ).resizable({ minWidth: 150 }); 在初始化后,获取或设置 // 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 关联的值。
代码实例: 调用该方法: var isDisabled = $( ".selector" ).resizable( "option", "disabled" ); |
option() | PlainObject | 获取一个包含键/值对的对象,键/值对表示当前 resizable 选项哈希。
代码实例: 调用该方法: var options = $( ".selector" ).resizable( "option" ); |
option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的 resizable 选项的值。
代码实例: 调用该方法: $( ".selector" ).resizable( "option", "disabled", true ); |
option( options ) | jQuery (plugin only) | 为 resizable 设置一个或多个选项。
代码实例: 调用该方法: $( ".selector" ).resizable( "option", { disabled: true } ); |
widget() | jQuery | 返回一个包含 resizable 元素的 jQuery 对象。
代码实例: 调用 widget 方法: var widget = $( ".selector" ).resizable( "widget" ); |
事件 | 类型 | 描述 |
---|---|---|
create( event, ui ) | resizecreate | 当 resizable 被创建时触发。
注意: 代码实例: 初始化带有指定 create 回调的 resizable: $( ".selector" ).resizable({ create: function( event, ui ) {} }); 绑定一个事件监听器到 resizecreate 事件: $( ".selector" ).on( "resizecreate", function( event, ui ) {} ); |
resize( event, ui ) | resize | 在调整尺寸期间当调整手柄拖拽时触发。
代码实例: 初始化带有指定 resize 回调的 resizable: $( ".selector" ).resizable({ resize: function( event, ui ) {} }); 绑定一个事件监听器到 resize 事件: $( ".selector" ).on( "resize", function( event, ui ) {} ); |
start( event, ui ) | resizestart | 当调整尺寸操作开始时触发。
代码实例: 初始化带有指定 start 回调的 resizable: $( ".selector" ).resizable({ start: function( event, ui ) {} }); 绑定一个事件监听器到 resizestart 事件: $( ".selector" ).on( "resizestart", function( event, ui ) {} ); |
stop( event, ui ) | resizestop | 当调整尺寸操作停止时触发。
代码实例: 初始化带有指定 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>