JQuery Resizable詳解(轉)

一天一個jQuery UI 組件，今天折騰 resizable 。resizable 是讓對象擁有可調整大小的屬性，類似於windows文件夾一樣可以通過拖動邊或者角來調整文件夾的大小。

要使用resizable ，需要應用一下文件：

XML/HTML代碼

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>  

<script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>  

<script type="text/javascript" src="development-bundle/ui/ui.resizable.js"></script>  

屬性：

alsoResize：
參數是選擇器，參數所指的對象也會跟隨調整大小對象一起進行大小改變。參數所指對象可以是調整大小對象內部元素 也可以是外部元素。

JavaScript代碼

$("#resizable").resizable({ alsoResize: '.other' });  

animate：
調整大小動作發生在調整以后。以漸進加速方式實現動作。也就是說 你在調整的時候對象的大小是不會變化的，當你松開鼠標的時候才開始發生大小變化，變化的過程並不是勻速的。參數是布爾值。

animateDuration：
與上面一個參數配合用，設置多少秒類完成大小變化動作。單位是毫秒。 參數也可以為內置的字符串 'slow', 'normal'

animateEasing：
這個屬性我很納悶，應為我在官方api上面只看到一個參數 就是swing，而默認值就是swing。

JavaScript代碼

$("#resizable").resizable({ animate: true, animateDuration: 500,animateEasing: 'swing'});  

aspectRatio：
設置為true按比例調整大小，可以設置為比例制 如1/2 或者0.5.

JavaScript代碼

$("#resizable").resizable({ aspectRatio: .5});  

autoHide：
自動隱藏右下角調整標識...在加載ui的時候，右下角會有一個類似於QQ右下角那種3斜杠。這個屬性值在設置鼠標沒有放在邊上的時候 不顯示這個。

JavaScript代碼

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

cancel：
屬性是選擇器，所選擇的對象不能調整。比如說用 class選擇器選擇了一批標簽，但是我希望這批標簽里面的 id是#a的不能調整。

JavaScript代碼

$(".resizable").resizable({ cancel: '#a' });  

containment：
限定可調整區域。參數'parent', 'document'，也可以是選擇器或者標簽名。比如說我把調整區域限制在父標簽，那么這個元素最大只能調整成父標簽的大小。

JavaScript代碼

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

delay：
延遲多少毫秒執行調整事件。這樣可以有效的避免因為不經意的操作而誤調整了窗口。也就是說 你鼠標放在邊或者角上的時候需要按下去停留一定的毫秒才能執行調整事件。

JavaScript代碼

$(".resizable").resizable({ delay: 2000 });  //測試用的，按下去2秒后才能調整，否則無效

       distance：延遲多少像素執行調整事件，作用和上面的參數一樣，都是為了防止誤操作。 鼠標按下去移動參數像素以后才能觸發調整事件。

JavaScript代碼

$(".resizable").resizable({ distance: 200 });  

ghost： 設置為true以后，調整時，原始對象並不發生變化，而是復制一份原始對象，並且把它半透明，來顯示你調成的大小，鼠標松開后，半透明的復制對象消失，原始對象直接顯示調整后的大小。

JavaScript代碼

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

grid： 設置調整大小時候x y 軸每次移動多少像素。

JavaScript代碼

$('.selector').draggable({ grid: [50, 20] });  

handles： 可實行調整的邊和角。默認只有 [右邊,下邊,右下角]可以調整。 可以根據參數{ n, e, s, w, ne, se, sw, nw }自由搭配。

JavaScript代碼

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

helper： 拖拽組件也有這個屬性，但是在這個里面 效果不同，這個里面helper的參數是一個字符串（class名字），當調整發生時，會有類似ghost的效果發生，只不過ghost效果所復制的是已 經定義好的，而這里可以自己根據css定義復制出來的 原始對象。同樣，在調整結束后，這個復制對象會消失。

JavaScript代碼

$('.selector').resizable({ helper: 'ui-state-highlight' });  

maxHeight： maxWidth: minHeight: minWidth: 這2個屬性，等同於css里面的 對應屬性。實際上，如果不考慮ie6的話，在css定義 這些屬性比在jQ里面定義這些屬性效率更好。

JavaScript代碼

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