jQuery UI API - 可調(diào)整尺寸小部件（Resizable Widget）

所屬類別

交互（Interactions）

用法

描述：使用鼠標(biāo)改變?cè)氐某叽纭?/p>

版本新增：1.0

依賴：

注釋：jQuery UI 可調(diào)整尺寸（Resizable）插件讓被選元素可調(diào)整尺寸（意味著它們有可拖拽的調(diào)整大小的手柄）。您可以指定一個(gè)或多個(gè)手柄，也可以指定寬度和高度的最小值也最大值。

附加說明：該部件要求一些功能性的 CSS，否則將無法工作。如果您創(chuàng)建了一個(gè)自定義的主題，請(qǐng)使用小部件指定的 CSS 文件作為起點(diǎn)。

快速導(dǎo)航

選項(xiàng) 方法 事件

選項(xiàng) 類型 描述 默認(rèn)值
alsoResize Selector 或 jQuery 或 Element 一個(gè)或多個(gè)通過 resizable 元素進(jìn)行同步調(diào)整尺寸的元素。

代碼實(shí)例：

初始化帶有指定 alsoResize 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 alsoResize 選項(xiàng)：

// getter
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
 
// setter
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" );
false
animate Boolean 調(diào)整尺寸后動(dòng)態(tài)變化到最終尺寸。

代碼實(shí)例：

初始化帶有指定 animate 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 animate 選項(xiàng)：

// getter
var animate = $( ".selector" ).resizable( "option", "animate" );
 
// setter
$( ".selector" ).resizable( "option", "animate", true );
false
animateDuration Number 或 String 當(dāng)使用 animate 選項(xiàng)時(shí)，動(dòng)畫持續(xù)的時(shí)間。

支持多個(gè)類型：

  • Number：持續(xù)時(shí)間，以毫秒計(jì)。
  • String：一個(gè)命名的持續(xù)時(shí)間，比如 "slow" 或 "fast"。

代碼實(shí)例：

初始化帶有指定 animateDuration 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 animateDuration 選項(xiàng)：

// getter
var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
 
// setter
$( ".selector" ).resizable( "option", "animateDuration", "fast" );
"slow"
animateEasing String 當(dāng)使用 animate 選項(xiàng)時(shí)要使用的 Easings。

代碼實(shí)例：

初始化帶有指定 animateEasing 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 animateEasing 選項(xiàng)：

// getter
var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
 
// setter
$( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" );
"swing"
aspectRatio Boolean 或 Number 元素是否應(yīng)該被限制在一個(gè)特定的長(zhǎng)寬比。

支持多個(gè)類型：

  • Boolean：當(dāng)設(shè)置為 true 時(shí)，元素將保持其原有的長(zhǎng)寬比。
  • Number：強(qiáng)制在調(diào)整尺寸時(shí)元素保持特定的長(zhǎng)寬比。

代碼實(shí)例：

初始化帶有指定 aspectRatio 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 aspectRatio 選項(xiàng)：

// getter
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
 
// setter
$( ".selector" ).resizable( "option", "aspectRatio", true );
false
autoHide Boolean 當(dāng)用戶鼠標(biāo)沒有懸浮在元素上時(shí)是否隱藏手柄。

代碼實(shí)例：

初始化帶有指定 autoHide 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 autoHide 選項(xiàng)：

// getter
var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
 
// setter
$( ".selector" ).resizable( "option", "autoHide", true );
false
cancel Selector 防止從指定的元素上開始調(diào)整尺寸。

代碼實(shí)例：

初始化帶有指定 cancel 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 cancel 選項(xiàng)：

// getter
var cancel = $( ".selector" ).resizable( "option", "cancel" );
 
// setter
$( ".selector" ).resizable( "option", "cancel", ".cancel" );
"input, textarea, button, select, option"
containment Selector 或 Element 或 String 約束在指定元素或區(qū)域的邊界內(nèi)調(diào)整尺寸。

支持多個(gè)類型：

  • Selector：可調(diào)整尺寸元素將被包含在 selector 第一個(gè)元素的邊界內(nèi)。如果未找到元素，則不設(shè)置 containment。
  • Element：可調(diào)整尺寸元素將被包含在元素的邊界內(nèi)。
  • String：可能的值："parent"、"document"。

代碼實(shí)例：

初始化帶有指定 containment 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 containment 選項(xiàng)：

// getter
var containment = $( ".selector" ).resizable( "option", "containment" );
 
// setter
$( ".selector" ).resizable( "option", "containment", "parent" );
false
delay Number 鼠標(biāo)按下后直到調(diào)整尺寸開始為止的時(shí)間，以毫秒計(jì)。如果指定了該選項(xiàng)，調(diào)整只有在鼠標(biāo)移動(dòng)超過時(shí)間后才開始。該選項(xiàng)可以防止點(diǎn)擊在某個(gè)元素上時(shí)不必要的調(diào)整尺寸。

代碼實(shí)例：

初始化帶有指定 delay 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 delay 選項(xiàng)：

// getter
var delay = $( ".selector" ).resizable( "option", "delay" );
 
// setter
$( ".selector" ).resizable( "option", "delay", 150 );
0
disabled Boolean 如果設(shè)置為 true，則禁用該 resizable。

代碼實(shí)例：

初始化帶有指定 disabled 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 disabled 選項(xiàng)：

// getter
var disabled = $( ".selector" ).resizable( "option", "disabled" );
 
// setter
$( ".selector" ).resizable( "option", "disabled", true );
false
distance Number 鼠標(biāo)按下后調(diào)整尺寸開始前必須移動(dòng)的距離，以像素計(jì)。如果指定了該選項(xiàng)，調(diào)整只有在鼠標(biāo)移動(dòng)超過距離后才開始。該選項(xiàng)可以防止點(diǎn)擊在某個(gè)元素上時(shí)不必要的調(diào)整尺寸。

代碼實(shí)例：

初始化帶有指定 distance 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 distance 選項(xiàng)：

// getter
var distance = $( ".selector" ).resizable( "option", "distance" );
 
// setter
$( ".selector" ).resizable( "option", "distance", 30 );
1
ghost Boolean 如果設(shè)置為 true，則為調(diào)整尺寸顯示一個(gè)半透明的輔助元素。

代碼實(shí)例：

初始化帶有指定 ghost 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 ghost 選項(xiàng)：

// getter
var ghost = $( ".selector" ).resizable( "option", "ghost" );
 
// setter
$( ".selector" ).resizable( "option", "ghost", true );
false
grid Array 把可調(diào)整尺寸元素對(duì)齊到網(wǎng)格，每個(gè) x 和 y 像素。數(shù)組形式必須是 [ x, y ]。

代碼實(shí)例：

初始化帶有指定 grid 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 grid 選項(xiàng)：

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

支持多個(gè)類型：

  • String：一個(gè)逗號(hào)分隔的列表，列表值為下面所列出的任意值：n, e, s, w, ne, se, sw, nw, all。必要的處理程序由插件自動(dòng)生成。
  • Object：支持下面的鍵：{ n, e, s, w, ne, se, sw, nw }。任何指定的值應(yīng)該是一個(gè)匹配作為處理程序使用的 resizable 的子元素的 jQuery 選擇器。

注釋：當(dāng)生成您自己的處理程序時(shí)，每個(gè)處理程序必須有 ui-resizable-handle class，也可以是適當(dāng)?shù)?appropriate ui-resizable-{direction} class，比如 ui-resizable-s。

代碼實(shí)例：

初始化帶有指定 handles 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 handles 選項(xiàng)：

// getter
var handles = $( ".selector" ).resizable( "option", "handles" );
 
// setter
$( ".selector" ).resizable( "option", "handles", "n, e, s, w" );
"e, s, se"
helper String 一個(gè)將被添加到代理元素的 class 名稱，用于描繪調(diào)整手柄拖拽過程中調(diào)整的輪廓。一旦調(diào)整完成，原來的元素則被重新定義尺寸。

代碼實(shí)例：

初始化帶有指定 helper 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 helper 選項(xiàng)：

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

代碼實(shí)例：

初始化帶有指定 maxHeight 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 maxHeight 選項(xiàng)：

// getter
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
 
// setter
$( ".selector" ).resizable( "option", "maxHeight", 300 );
null
maxWidth Number resizable 允許被調(diào)整到的最大寬度。

代碼實(shí)例：

初始化帶有指定 maxWidth 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 maxWidth 選項(xiàng)：

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

代碼實(shí)例：

初始化帶有指定 minHeight 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 minHeight 選項(xiàng)：

// getter
var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
 
// setter
$( ".selector" ).resizable( "option", "minHeight", 150 );
10
minWidth Number resizable 允許被調(diào)整到的最小寬度。

代碼實(shí)例：

初始化帶有指定 minWidth 選項(xiàng)的 resizable：

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

在初始化后，獲取或設(shè)置 minWidth 選項(xiàng)：

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

方法 返回 描述
destroy() jQuery (plugin only) 完全移除 resizable 功能。這會(huì)把元素返回到它的預(yù)初始化狀態(tài)。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 destroy 方法：

$( ".selector" ).resizable( "destroy" );
disable() jQuery (plugin only) 禁用 resizable。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 disable 方法：

$( ".selector" ).resizable( "disable" );
enable() jQuery (plugin only) 啟用 resizable。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 enable 方法：

$( ".selector" ).resizable( "enable" );
option( optionName ) Object 獲取當(dāng)前與指定的 optionName 關(guān)聯(lián)的值。
  • optionName
    類型：String
    描述：要獲取的選項(xiàng)的名稱。

代碼實(shí)例：

調(diào)用該方法：

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
option() PlainObject 獲取一個(gè)包含鍵/值對(duì)的對(duì)象，鍵/值對(duì)表示當(dāng)前 resizable 選項(xiàng)哈希。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用該方法：

var options = $( ".selector" ).resizable( "option" );
option( optionName, value ) jQuery (plugin only) 設(shè)置與指定的 optionName 關(guān)聯(lián)的 resizable 選項(xiàng)的值。
  • optionName
    類型：String
    描述：要設(shè)置的選項(xiàng)的名稱。
  • value
    類型：Object
    描述：要為選項(xiàng)設(shè)置的值。

代碼實(shí)例：

調(diào)用該方法：

$( ".selector" ).resizable( "option", "disabled", true );
option( options ) jQuery (plugin only) 為 resizable 設(shè)置一個(gè)或多個(gè)選項(xiàng)。
  • options
    類型：Object
    描述：要設(shè)置的 option-value 對(duì)。

代碼實(shí)例：

調(diào)用該方法：

$( ".selector" ).resizable( "option", { disabled: true } );
widget() jQuery 返回一個(gè)包含 resizable 元素的 jQuery 對(duì)象。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 widget 方法：

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

事件 類型 描述
create( event, ui ) resizecreate 當(dāng) resizable 被創(chuàng)建時(shí)觸發(fā)。
  • event
    類型：Event
  • ui
    類型：Object

注意：ui 對(duì)象是空的，這里包含它是為了與其他事件保持一致性。

代碼實(shí)例：

初始化帶有指定 create 回調(diào)的 resizable：

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

綁定一個(gè)事件監(jiān)聽器到 resizecreate 事件：

$( ".selector" ).on( "resizecreate", function( event, ui ) {} );
resize( event, ui ) resize 在調(diào)整尺寸期間當(dāng)調(diào)整手柄拖拽時(shí)觸發(fā)。
  • event
    類型：Event
  • ui
    類型：Object
    • element
      類型：jQuery
      描述：jQuery 對(duì)象，表示要被調(diào)整尺寸的元素。
    • helper
      類型：jQuery
      描述：jQuery 對(duì)象，表示被調(diào)整尺寸的助手（helper）。
    • originalElement
      類型：jQuery
      描述：jQuery 對(duì)象，表示被包裹之前的原始元素。
    • originalPosition
      類型：Object
      描述：resizable 調(diào)整前的位置，表示為 { top, left }。
    • originalSize
      類型：Object
      描述：resizable 調(diào)整前的尺寸，表示為 { width, height }。
    • position
      類型：Object
      描述：當(dāng)前位置，表示為 { top, left }。
    • size
      類型：Object
      描述：當(dāng)前位置，表示為 { width, height }。

代碼實(shí)例：

初始化帶有指定 resize 回調(diào)的 resizable：

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

綁定一個(gè)事件監(jiān)聽器到 resize 事件：

$( ".selector" ).on( "resize", function( event, ui ) {} );
start( event, ui ) resizestart 當(dāng)調(diào)整尺寸操作開始時(shí)觸發(fā)。
  • event
    類型：Event
  • ui
    類型：Object
    • element
      類型：jQuery
      描述：jQuery 對(duì)象，表示要被調(diào)整尺寸的元素。
    • helper
      類型：jQuery
      描述：jQuery 對(duì)象，表示被調(diào)整尺寸的助手（helper）。
    • originalElement
      類型：jQuery
      描述：jQuery 對(duì)象，表示被包裹之前的原始元素。
    • originalPosition
      類型：Object
      描述：resizable 調(diào)整前的位置，表示為 { top, left }。
    • originalSize
      類型：Object
      描述：resizable 調(diào)整前的尺寸，表示為 { width, height }。
    • position
      類型：Object
      描述：當(dāng)前位置，表示為 { top, left }。
    • size
      類型：Object
      描述：當(dāng)前位置，表示為 { width, height }。

代碼實(shí)例：

初始化帶有指定 start 回調(diào)的 resizable：

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

綁定一個(gè)事件監(jiān)聽器到 resizestart 事件：

$( ".selector" ).on( "resizestart", function( event, ui ) {} );
stop( event, ui ) resizestop 當(dāng)調(diào)整尺寸操作停止時(shí)觸發(fā)。
  • event
    類型：Event
  • ui
    類型：Object
    • element
      類型：jQuery
      描述：jQuery 對(duì)象，表示要被調(diào)整尺寸的元素。
    • helper
      類型：jQuery
      描述：jQuery 對(duì)象，表示被調(diào)整尺寸的助手（helper）。
    • originalElement
      類型：jQuery
      描述：jQuery 對(duì)象，表示被包裹之前的原始元素。
    • originalPosition
      類型：Object
      描述：resizable 調(diào)整前的位置，表示為 { top, left }。
    • originalSize
      類型：Object
      描述：resizable 調(diào)整前的尺寸，表示為 { width, height }。
    • position
      類型：Object
      描述：當(dāng)前位置，表示為 { top, left }。
    • size
      類型：Object
      描述：當(dāng)前位置，表示為 { width, height }。

代碼實(shí)例：

初始化帶有指定 stop 回調(diào)的 resizable：

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

綁定一個(gè)事件監(jiān)聽器到 resizestop 事件：

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

實(shí)例

一個(gè)簡(jiǎn)單的 jQuery UI 可調(diào)整尺寸小部件（Resizable Widget）。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>可調(diào)整尺寸小部件（Resizable Widget）演示</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank" >
  <style>
  #resizable {
    width: 100px;
    height: 100px;
    background: #ccc;
}	</style>
  <script src="http://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script>
</head>
<body>
 
<div id="resizable"></div>
 
<script>
$( "#resizable" ).resizable();
</script>
 
</body>
</html>

查看演示