jQuery UI API - 可調整尺寸小部件（Resizable Widget） · W3School jQuery UI 教程

# jQuery UI API - 可調整尺寸小部件（Resizable Widget） ## 所屬類別 [交互（Interactions）](ref-interactions.html) ## 用法 **描述：**使用鼠標改變元素的尺寸。 **版本新增：**1.0 **依賴：** * [UI 核心（UI Core）](ref-ui-core.html) * [部件庫（Widget Factory）](api-jQuery-widget.html) * [鼠標交互（Mouse Interaction）](api-mouse.html) **注釋：**jQuery UI 可調整尺寸（Resizable）插件讓被選元素可調整尺寸（意味著它們有可拖拽的調整大小的手柄）。您可以指定一個或多個手柄，也可以指定寬度和高度的最小值也最大值。 **附加說明：**該部件要求一些功能性的 CSS，否則將無法工作。如果您創建了一個自定義的主題，請使用小部件指定的 CSS 文件作為起點。 ### 快速導航 | 選項 | 方法 | 事件 | | --- | --- | --- | | [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) | [destroy](#method-destroy)[disable](#method-disable)[enable](#method-enable)[option](#method-option)[widget](#method-widget) | [create](#event-create)[resize](#event-resize)[start](#event-start)[stop](#event-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](#option-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](#option-animate)` 選項時要使用的 [Easings](api-easings.html)。 **代碼實例：** 初始化帶有指定 `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> ```