Resizable Widget · jQuery UI API 中文文檔 1.10

# Resizable Widget Categories: [Interactions](http://www.css88.com/jquery-ui-api/category/interactions/ "View all posts in Interactions") ## version added: 1.0 **Description:** 使用鼠標改變一個元素的尺寸。 ## QuickNav[Examples](#entry-examples) ### Options + [alsoResize](#option-alsoResize) + [animate](#option-animate) + [animateDuration](#option-animateDuration) + [animateEasing](#option-animateEasing) + [aspectRatio](#option-aspectRatio) + [autoHide](#option-autoHide) + [cancel](#option-cancel) + [containment](#option-containment) + [delay](#option-delay) + [disabled](#option-disabled) + [distance](#option-distance) + [ghost](#option-ghost) + [grid](#option-grid) + [handles](#option-handles) + [helper](#option-helper) + [maxHeight](#option-maxHeight) + [maxWidth](#option-maxWidth) + [minHeight](#option-minHeight) + [minWidth](#option-minWidth) ### Methods + [destroy](#method-destroy) + [disable](#method-disable) + [enable](#method-enable) + [option](#method-option) + [widget](#method-widget) ### Events + [create](#event-create) + [resize](#event-resize) + [start](#event-start) + [stop](#event-stop) jQuery UI Resizable 插件使選定的內容可以調整大小(這以為著那么擁有一些可以拖動的手柄). 你可以指定一個或者多個操作手柄以及指定最小和最大寬度與高度. ### Dependencies * [UI Core](/category/ui-core/) * [Widget Factory](/jQuery.widget/) * [Mouse Interaction](/mouse/) ### 其他注意事項： * 這個widget需要一些功能性的CSS，否則將無法正常工作。如果你建立一個自定義的主題，使用widget指定的CSS文件作為一個激活點。 ## Options ### alsoResize**Type:** [Selector](http://api.jquery.com/Types/#Selector) or [jQuery](http://api.jquery.com/Types/#jQuery) or [Element](http://api.jquery.com/Types/#Element) **Default:** `false`在重置元素尺寸大小的同時重置指定的一個或多個元素的尺寸大小。**Code examples:** 使用指定的 `alsoResize` 參數初始化resizable : ``` $( ".selector" ).resizable({ alsoResize: "#mirror" }); ``` 在初始化后設置或者獲取 `alsoResize` 參數 : ``` // getter var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" ); // setter $( ".selector" ).resizable( "option", "alsoResize", "#mirror" ); ``` ### animate**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `false`在調整大小后使用一段動畫完成調整.**Code examples:** 使用指定的 `animate` 參數初始化resizable : ``` $( ".selector" ).resizable({ animate: true }); ``` 在初始化后設置或者獲取 `animate` 參數 : ``` // getter var animate = $( ".selector" ).resizable( "option", "animate" ); // setter $( ".selector" ).resizable( "option", "animate", true ); ``` ### animateDuration**Type:** [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String) **Default:** `"slow"`當使用[`animate`](#option-animate)選項時，動畫持續的時間。單位毫秒。**允許使用的值:** * **Number**: 毫秒數。 * **String**: 一個表示持續時間的字符串，比如 `"slow"` or `"fast"`。 **Code examples:** 使用指定的 `animateDuration` 參數初始化resizable : ``` $( ".selector" ).resizable({ animateDuration: "fast" }); ``` 在初始化后設置或者獲取 `animateDuration` 參數 : ``` // getter var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" ); // setter $( ".selector" ).resizable( "option", "animateDuration", "fast" ); ``` ### animateEasing**Type:** [String](http://api.jquery.com/Types/#String) **Default:** `"swing"`動畫執行時的緩沖效果。當使用[`animate`](#option-animate)選項時，哪個[easing](/easings/) （緩沖函數）被應用。**Code examples:** 使用指定的 `animateEasing` 參數初始化resizable : ``` $( ".selector" ).resizable({ animateEasing: "easeOutBounce" }); ``` 在初始化后設置或者獲取 `animateEasing` 參數 : ``` // getter var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" ); // setter $( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" ); ``` ### aspectRatio**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Number](http://api.jquery.com/Types/#Number) **Default:** `false`該元素是否應限制在一個特定的比例進行縮放。**允許使用的值:** * **Boolean**: 如果設置為`true`, 大小將按照原先的寬高比進行調整。 * **Number**: 強制元素調整大小時保持一個特定的寬高比。 **Code examples:** 使用指定的 `aspectRatio` 參數初始化resizable : ``` $( ".selector" ).resizable({ aspectRatio: true }); ``` 在初始化后設置或者獲取 `aspectRatio` 參數 : ``` // getter var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" ); // setter $( ".selector" ).resizable( "option", "aspectRatio", true ); ``` ### autoHide**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `false`如果設置為真, 將會自動隱藏調整手柄圖標,除非鼠標移動到該元素上.**Code examples:** 使用指定的 `autoHide` 參數初始化resizable : ``` $( ".selector" ).resizable({ autoHide: true }); ``` 在初始化后設置或者獲取 `autoHide` 參數 : ``` // getter var autoHide = $( ".selector" ).resizable( "option", "autoHide" ); // setter $( ".selector" ).resizable( "option", "autoHide", true ); ``` ### cancel**Type:** [Selector](http://api.jquery.com/Types/#Selector) **Default:** `"input,textarea,button,select,option"`如果設置了選擇器匹配,將拒絕對匹配元素的大小調整.**Code examples:** 使用指定的 `cancel` 參數初始化resizable : ``` $( ".selector" ).resizable({ cancel: ".cancel" }); ``` 在初始化后設置或者獲取 `cancel` 參數 : ``` // getter var cancel = $( ".selector" ).resizable( "option", "cancel" ); // setter $( ".selector" ).resizable( "option", "cancel", ".cancel" ); ``` ### containment**Type:** [Selector](http://api.jquery.com/Types/#Selector) or [Element](http://api.jquery.com/Types/#Element) or [String](http://api.jquery.com/Types/#String) **Default:** `false`使用指定的元素強制性限制大小調整的界限.**允許使用的值：** * **Selector**:resizable元素將被限制在該選擇器匹配的第一個元素的邊界內。如果沒有匹配的元素，那么設置將不起作用。 * **Element**: resizable元素將被限制在這個元素的邊界內。 * **String**: 可能的值： `"parent"` 和 `"document"`. **Code examples:** 使用指定的 `containment` 參數初始化resizable : ``` $( ".selector" ).resizable({ containment: "parent" }); ``` 在初始化后設置或者獲取 `containment` 參數 : ``` // getter var containment = $( ".selector" ).resizable( "option", "containment" ); // setter $( ".selector" ).resizable( "option", "containment", "parent" ); ``` ### delay**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `0`設定需要經過多少毫秒以后調整才會開始. 如果指定了該參數, 調整不會馬上開始,除非鼠標調整動作已經持續了指定的時間.這可以防止誤操作對元素進行了非預期的調整.**Code examples:** 使用指定的 `delay` 參數初始化resizable : ``` $( ".selector" ).resizable({ delay: 150 }); ``` 在初始化后設置或者獲取 `delay` 參數 : ``` // getter var delay = $( ".selector" ).resizable( "option", "delay" ); // setter $( ".selector" ).resizable( "option", "delay", 150 ); ``` ### disabled**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `false`如果設置為 `true` 將禁止resizable（縮放）。**Code examples:** 使用指定的 `disabled` 參數初始化resizable : ``` $( ".selector" ).resizable({ disabled: true }); ``` 在初始化后設置或者獲取 `disabled` 參數 : ``` // getter var disabled = $( ".selector" ).resizable( "option", "disabled" ); // setter $( ".selector" ).resizable( "option", "disabled", true ); ``` ### distance**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `1`設定調整操作需要移動多少個像素后調整才會開始. 如果指定了該參數, 調整不會馬上開始,直到鼠標移動了指定的像素后.這可以防止誤操作對元素進行了非預期的調整.**Code examples:** 使用指定的 `distance` 參數初始化resizable : ``` $( ".selector" ).resizable({ distance: 30 }); ``` 在初始化后設置或者獲取 `distance` 參數 : ``` // getter var distance = $( ".selector" ).resizable( "option", "distance" ); // setter $( ".selector" ).resizable( "option", "distance", 30 ); ``` ### ghost**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `false`如果設置為`true`, 將會在調整過程中看到一個半透明的輔助元素。**Code examples:** 使用指定的 `ghost` 參數初始化resizable : ``` $( ".selector" ).resizable({ ghost: true }); ``` 在初始化后設置或者獲取 `ghost` 參數 : ``` // getter var ghost = $( ".selector" ).resizable( "option", "ghost" ); // setter $( ".selector" ).resizable( "option", "ghost", true ); ``` ### grid**Type:** [Array](http://api.jquery.com/Types/#Array) **Default:** `false`設置調整x和y改變的像素. 調整大小的元素到網格，每x和y個像素。數組值: [x, y]。**Code examples:** 使用指定的 `grid` 參數初始化resizable : ``` $( ".selector" ).resizable({ grid: [ 20, 10 ] }); ``` 在初始化后設置或者獲取 `grid` 參數 : ``` // getter var grid = $( ".selector" ).resizable( "option", "grid" ); // setter $( ".selector" ).resizable( "option", "grid", [ 20, 10 ] ); ``` ### handles**Type:** [String](http://api.jquery.com/Types/#String) or [Object](http://api.jquery.com/Types/#Object) **Default:** `"e, s, se"`哪個處理程序被用來resizing（縮放大小）。**允許使用的值：** * **String**: 如果指定一個字符串, 應該是下列清單中的組合:'n, e, s, w, ne, se, sw, nw, all',每項之間使用逗號分隔. 必要的手柄將由插件自動生成. * **Object**: 如果指定一個對象, 要支持下面的鍵值: { n, e, s, w, ne, se, sw, nw }. 指定的用戶調整手柄的任何值應該是一個jQuery選擇器匹配的子元素. 如果該操作柄不是resizable的一個子元素, 你可以提供一個有效的DOMElement 或者直接提供一個jQuery對象. _注意: 當生成您自己的手柄，每個手柄必須有`ui-resizable-handle` 樣式類，以及適當的`ui-resizable-{direction}`樣式類，例如`ui-resizable-s`。_ **Code examples:** 使用指定的 `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" ); ``` ### helper**Type:** [String](http://api.jquery.com/Types/#String) **Default:** `false`為大小調整時的代理元素指定一個css樣式.當調整完成時,這些元素將回到它以前的狀態.**Code examples:** 使用指定的 `helper` 參數初始化resizable : ``` $( ".selector" ).resizable({ helper: "resizable-helper" }); ``` 在初始化后設置或者獲取 `helper` 參數 : ``` // getter var helper = $( ".selector" ).resizable( "option", "helper" ); // setter $( ".selector" ).resizable( "option", "helper", "resizable-helper" ); ``` ### maxHeight**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `null`為大小調整設定一個最大高度.**Code examples:** 使用指定的 `maxHeight` 參數初始化resizable : ``` $( ".selector" ).resizable({ maxHeight: 300 }); ``` 在初始化后設置或者獲取 `maxHeight` 參數 : ``` // getter var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" ); // setter $( ".selector" ).resizable( "option", "maxHeight", 300 ); ``` ### maxWidth**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `null`為大小調整設定一個最大寬度.**Code examples:** 使用指定的 `maxWidth` 參數初始化resizable : ``` $( ".selector" ).resizable({ maxWidth: 300 }); ``` 在初始化后設置或者獲取 `maxWidth` 參數 : ``` // getter var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" ); // setter $( ".selector" ).resizable( "option", "maxWidth", 300 ); ``` ### minHeight**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `10`為大小調整設定一個最小高度.**Code examples:** 使用指定的 `minHeight` 參數初始化resizable : ``` $( ".selector" ).resizable({ minHeight: 150 }); ``` 在初始化后設置或者獲取 `minHeight` 參數 : ``` // getter var minHeight = $( ".selector" ).resizable( "option", "minHeight" ); // setter $( ".selector" ).resizable( "option", "minHeight", 150 ); ``` ### minWidth**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `10`為大小調整設定一個最小寬度.**Code examples:** 使用指定的 `minWidth` 參數初始化resizable : ``` $( ".selector" ).resizable({ minWidth: 150 }); ``` 在初始化后設置或者獲取 `minWidth` 參數 : ``` // getter var minWidth = $( ".selector" ).resizable( "option", "minWidth" ); // setter $( ".selector" ).resizable( "option", "minWidth", 150 ); ``` ## Methods ### destroy() 完全移除調整功能. 這將使元素返回到之前的初始化狀態. * 這個方法不接受任何參數。 **Code examples:** 調用 destroy 方法： ``` $( ".selector" ).resizable( "destroy" ); ``` ### disable() 關閉resizable. * 這個方法不接受任何參數。 **Code examples:** 調用 disable 方法： ``` $( ".selector" ).resizable( "disable" ); ``` ### enable() 打開resizable. * 這個方法不接受任何參數。 **Code examples:** 調用 enable 方法： ``` $( ".selector" ).resizable( "enable" ); ``` ### option( optionName )Returns: [Object](http://api.jquery.com/Types/#Object) 通過指定的`optionName`，獲取當前關聯的值。 * **optionName**Type: [String](http://api.jquery.com/Types/#String)要獲取值的選項名 **Code examples:** 調用這個方法： ``` var isDisabled = $( ".selector" ).resizable( "option", "disabled" ); ``` ### option()Returns: [PlainObject](http://api.jquery.com/Types/#PlainObject) 獲取一個對象，它包含表示當前resizable的選項hash的鍵/值對。 * 這個方法不接受任何參數。 **Code examples:** 調用這個方法： ``` var options = $( ".selector" ).resizable( "option" ); ``` ### option( optionName, value ) 通過指定的`optionName`，設置resizable的相關選項值。 * **optionName**Type: [String](http://api.jquery.com/Types/#String)要設置值的選項名。 * **value**Type: [Object](http://api.jquery.com/Types/#Object)要設置選項的值。 **Code examples:** 調用這個方法： ``` $( ".selector" ).resizable( "option", "disabled", true ); ``` ### option( options ) 為resizable設置一個或多個選項。 * **options**Type: [Object](http://api.jquery.com/Types/#Object)設置的選項/值對的對象。 **Code examples:** 調用這個方法： ``` $( ".selector" ).resizable( "option", { disabled: true } ); ``` ### widget()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) 返回一個`jQuery`，它包含了resizable元素。 * 這個方法不接受任何參數。 **Code examples:** 調用 widget 方法： ``` var widget = $( ".selector" ).resizable( "widget" ); ``` ## Events ### create( event, ui )Type: `resizecreate` 此事件會在resizable創建時觸發。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) _注意：`ui` 對象是空對象，包括是為了和其他事件的一致性。_ **Code examples:** 使用指定的 create 回調初始化一個resizable： ``` $( ".selector" ).resizable({ create: function( event, ui ) {} }); ``` 綁定一個事件監聽到resizecreate事件： ``` $( ".selector" ).on( "resizecreate", function( event, ui ) {} ); ``` ### resize( event, ui )Type: `resize` 這個事件將在拖動手柄進行調整時觸發. * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **element**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一個jQuery對象代表被 resized 的元素。 * **helper**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一個jQuery對象代表被resized元素的助手。 * **originalElement**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一個jQuery對象代表被包裹前原先的元素。 * **originalPosition**Type: [Object](http://api.jquery.com/Types/#Object)resizable元素被resized（縮放）前的CSS的position（位置）對象，如`{ left, top }` 。 * **originalSize**Type: [Object](http://api.jquery.com/Types/#Object)resizable元素被resized（縮放）前的尺寸對象，如`{ width, height }`。 * **position**Type: [Object](http://api.jquery.com/Types/#Object)當前可resizable（縮放）元素的CSS的position（位置）對象，如{ top, left }。 * **size**Type: [Object](http://api.jquery.com/Types/#Object)當前可resizable（縮放）元素的尺寸對象，`{ width, height }`。 **Code examples:** 使用指定的 resize 回調初始化一個resizable： ``` $( ".selector" ).resizable({ resize: function( event, ui ) {} }); ``` 綁定一個事件監聽到resize事件： ``` $( ".selector" ).on( "resize", function( event, ui ) {} ); ``` ### start( event, ui )Type: `resizestart` 這個事件將在調整操作開始時觸發. * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **element**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一個jQuery對象代表被 resized 的元素。 * **helper**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一個jQuery對象代表被resized元素的助手。 * **originalElement**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一個jQuery對象代表被包裹前原先的元素。 * **originalPosition**Type: [Object](http://api.jquery.com/Types/#Object)resizable元素被resized（縮放）前的CSS的position（位置）對象，如`{ left, top }` 。 * **originalSize**Type: [Object](http://api.jquery.com/Types/#Object)resizable元素被resized（縮放）前的尺寸對象，如`{ width, height }`。 * **position**Type: [Object](http://api.jquery.com/Types/#Object)當前可resizable（縮放）元素的CSS的position（位置）對象，如{ top, left }。 * **size**Type: [Object](http://api.jquery.com/Types/#Object)當前可resizable（縮放）元素的尺寸對象，`{ width, height }`。 **Code examples:** 使用指定的 start 回調初始化一個resizable： ``` $( ".selector" ).resizable({ start: function( event, ui ) {} }); ``` 綁定一個事件監聽到 resizestart 事件： ``` $( ".selector" ).on( "resizestart", function( event, ui ) {} ); ``` ### stop( event, ui )Type: `resizestop` 這個事件將在調整操作結束后觸發. * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **element**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一個jQuery對象代表被 resized 的元素。 * **helper**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一個jQuery對象代表被resized元素的助手。 * **originalElement**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一個jQuery對象代表被包裹前原先的元素。 * **originalPosition**Type: [Object](http://api.jquery.com/Types/#Object)resizable元素被resized（縮放）前的CSS的position（位置）對象，如`{ left, top }` 。 * **originalSize**Type: [Object](http://api.jquery.com/Types/#Object)resizable元素被resized（縮放）前的尺寸對象，如`{ width, height }`。 * **position**Type: [Object](http://api.jquery.com/Types/#Object)當前可resizable（縮放）元素的CSS的position（位置）對象，如{ top, left }。 * **size**Type: [Object](http://api.jquery.com/Types/#Object)當前可resizable（縮放）元素的尺寸對象，`{ width, height }`。 **Code examples:** 使用指定的 stop 回調初始化一個resizable： ``` $( ".selector" ).resizable({ stop: function( event, ui ) {} }); ``` 綁定一個事件監聽到 resizestop 事件： ``` $( ".selector" ).on( "resizestop", function( event, ui ) {} ); ``` ## Example: #### A simple jQuery UI Resizable. ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>resizable demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> <style> #resizable { width: 100px; height: 100px; background: #ccc; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> </head> <body> <div id="resizable"></div> <script> $( "#resizable" ).resizable(); </script> </body> </html> ```