JQuery UI - resizable

·概述 resizable插件可以讓選中的元素具有改變尺寸的功能。

官方示例地址：http://jqueryui.com/demos/resizable/

所有的事件回調函數都有兩個參數：event和ui，瀏覽器自有event對象，和經過封裝的ui對象

ui.helper - 表示當前被改變尺寸的元素的JQuery對象

ui.originalPosition - 表示未改變尺寸之前元素的位置{top,left}

ui.originalSize - 表示未改變尺寸之前元素的大小{width,height}

ui.position - 表示當前被改變尺寸的元素的坐標值對象{top,left}

ui.size - 表示當前被改變尺寸的元素的大小值對象{width,height}

·參數（參數名 : 參數類型 : 默認值）

alsoResize : Selector, jQuery, ElementDefault : false  

當調整元素大小時，同步改變另一個（或一組）元素的大小。  

初始：$('.selector').resizable({ alsoResize: '.other' });  

獲取：var alsoResize = $('.selector').resizable('option', 'alsoResize');  

設置：$('.selector').resizable('option', 'alsoResize', '.other');

animate : Boolean : false  

在調整元素大小結束之后是否顯示動畫  

初始：$('.selector').resizable({ animate: true });  

獲取：var animate = $('.selector').resizable('option', 'animate');  

設置：$('.selector').resizable('option', 'animate', true);

animateDuration : Integer, String : 'slow'  

動畫效果的持續時間。（單位：毫秒）可選值：'slow', 'normal', 'fast'  

初始：$('.selector').resizable({ animateDuration: 500 });  

獲取：var animateDuration = $('.selector').resizable('option', 'animateDuration');  

設置：$('.selector').resizable('option', 'animateDuration', 500);

animateEasing : String : 'swing'   選擇何種動畫效果。  

初始：$('.selector').resizable({ animateEasing: 'swing' });  

獲取：var animateEasing = $('.selector').resizable('option', 'animateEasing');  

設置：$('.selector').resizable('option', 'animateEasing', 'swing');

aspectRatio : Boolean, Float : false  

如果設置為true，則元素的可調整尺寸受原來大小的限制。例如：9 / 16, or 0.5  

初始：$('.selector').resizable({ aspectRatio: .75 });  

獲取：var aspectRatio = $('.selector').resizable('option', 'aspectRatio');  

設置：$('.selector').resizable('option', 'aspectRatio', .75);

autoHide : Boolean : false  

如果設置為true，則默認隱藏掉可調整大小的手柄，除非鼠標移至元素上。  

初始：$('.selector').resizable({ autoHide: true });  

獲取：var autoHide = $('.selector').resizable('option', 'autoHide');  

設置：$('.selector').resizable('option', 'autoHide', true);

cancel : Selector : ':input,option'  

阻止resizable插件加載在與你匹配的元素上。  

初始：$('.selector').resizable({ cancel: ':input,option' });  

獲取：var cancel = $('.selector').resizable('option', 'cancel');  

設置：$('.selector').resizable('option', 'cancel', ':input,option');

containment : String, Element, Selector : false  

控制元素只能在某一個元素的大小之內改變。允許值：'parent', 'document', DOM元素, 或一個選擇器.  

初始：$('.selector').resizable({ containment: 'parent' });  

獲取：var containment = $('.selector').resizable('option', 'containment');  

設置：$('.selector').resizable('option', 'containment', 'parent');

delay : Integer : 0  

以毫秒為單位，當發生鼠標點擊手柄改變大小，延遲多少毫秒后才激活事件。  

初始：$('.selector').resizable({ delay: 20 });  

獲取：var delay = $('.selector').resizable('option', 'delay');  

設置：$('.selector').resizable('option', 'delay', 20);

distance : Integer : 1  

以像素為單位，當發生鼠標點擊手柄改變大小，延遲多少像素后才激活事件。  

初始：$('.selector').resizable({ distance: 20 });  

獲取：var distance = $('.selector').resizable('option', 'distance');  

設置：$('.selector').resizable('option', 'distance', 20);

ghost : Boolean : false  

如果設置為true，則在調整元素大小時，有一個半透明的輔助對象顯示。  

初始：$('.selector').resizable({ ghost: true });  

獲取：var grid = $('.selector').resizable('option', 'ghost');  

設置：$('.selector').resizable('option', 'ghost', true);

grid : Array : false  

設置元素調整的大小隨網格變化，允許的數據為：{x,y}  

初始：$('.selector').resizable({ grid: [50, 50] });  

獲取：var grid = $('.selector').resizable('option', 'grid');  

設置：$('.selector').resizable('option', 'grid', [50, 50]);

handles : String, Object : 'e, s, se'  

設置resizable插件允許生成在元素的哪個邊上，可選值：n, e, s, w, ne, se, sw, nw, all  

初始：$('.selector').resizable({ handles: 'n, e, s, w' });  

獲取：var handles = $('.selector').resizable('option', 'handles');  

設置：$('.selector').resizable('option', 'handles', 'n, e, s, w');

helper : String : false  

一個CSS類，當調整元素大小時，將被添加到輔助元素中，一但調整結束則恢復正常。  

初始：$('.selector').resizable({ helper: 'ui-state-highlight' });   獲取：var helper = $('.selector').resizable('option', 'helper');   設置：$('.selector').resizable('option', 'helper', 'ui-state-highlight');

maxHeight : Integer : null  

設置允許元素調整的最大高度。  

初始：$('.selector').resizable({ maxHeight: 300 });  

獲取：var maxHeight = $('.selector').resizable('option', 'maxHeight');  

設置：$('.selector').resizable('option', 'maxHeight', 300);

maxWidth : Integer : null  

設置允許元素調整的最大寬度。  

初始：$('.selector').resizable({ maxWidth: 250 });  

獲取：var maxWidth = $('.selector').resizable('option', 'maxWidth');  

設置：$('.selector').resizable('option', 'maxWidth', 250);

minHeight : Integer : 10  

設置允許元素調整的最小高度。  

初始：$('.selector').resizable({ minHeight: 150 });  

獲取：var minHeight = $('.selector').resizable('option', 'minHeight');  

設置：$('.selector').resizable('option', 'minHeight', 150);

minWidth : Integer : 10  

設置允許元素調整的最小寬度。  

初始：$('.selector').resizable({ minWidth: 75 });  

獲取：var minWidth = $('.selector').resizable('option', 'minWidth');  

設置：$('.selector').resizable('option', 'minWidth', 75);

·事件

start  

當元素調整動作開始時觸發。  

初始：$('.selector').resizable({ start: function(event, ui) { ... } });  

綁定：$('.selector').bind('resizestart', function(event, ui) { ... });

resize  

當元素調整動作過程中觸發。  

初始：$('.selector').resizable({ resize: function(event, ui) { ... } });  

綁定：$('.selector').bind('resize', function(event, ui) { ... });

stop  

當元素調整動作結束時觸發。  

初始：$('.selector').resizable({ stop: function(event, ui) { ... } });  

綁定：$('.selector').bind('resizestop', function(event, ui) { ... });

·方法

destory  

從元素中移除拖拽功能。  

用法：.droppable( 'destroy' )

disable  

禁用元素的拖拽功能。  

用法：.droppable( 'disable' )

enable  

啟用元素的拖拽功能。  

用法：.droppable( 'enable' )

option  

獲取或設置元素的參數。  

用法：.droppable( 'option' , optionName , [value] )