本文使用Jquery UI實現了可改變大小的層，效果預覽網址：http:///keleyi/phtml/resizable.htm
以下是完整代碼，保存到html文件，打開也可以預覽效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI實現可改變大小層-</title>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http:///keleyi/pmedia/jquery/ui/1.10.2/themes/smoothness/jquery-ui-1.10.2.custom.min.css" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/ui/1.10.2/jquery-ui.js"></script>
<style type="text/css">
#resizable_keleyi_com { width: 150px; height: 150px; padding: 4px; }
#resizable_keleyi_com h3 { text-align: center; margin: 0;font-size:12px; }
</style>
</head>
<body>
<div id="resizable_keleyi_com" class="ui-widget-content">
<h3 class="ui-widget-header">可改變大小層</h3>
這裡是內容<br />
www.
</div>
<script type="text/javascript">
$(function () {
$("#resizable_keleyi_com").resizable({minWidth:100,minHeight:50});
});
</script>
<br />
移動光標，當光標變成雙箭頭，按住鼠標拖動則可以改變層的大小。<br />
<a href="http:///a/bjac/7e8897e5ec0849e9.htm" target="_blank">原文</a>
</body>
</html>
resizable方法的屬性：
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 });