原文地址：http://www.jackslocum.com/blog/2006/11/24/resizable-reloaded/

這些范例展示了元素如何應用了一個浮動(默認)和裝上可縮放的組件。

查看 basic.js 完整代碼。

基本范例
這是個簡單的可縮放的范例。在矩形附近可調節大小。這個例子采用了“浮動”的默認處理。

var basic = new YAHOO.ext.Resizable('basic', {    width: 200,    height: 100,    minWidth:100,    minHeight:50});

包裹元素

一些元素并沒有子元素，例如images and textares。過去的做法是，你把這些元素放進一個可縮放的元素里面，作為其的子元素。到了yui-ext .33rc2，組件會將這些元素包裹好，即通過計算borders/padding應調整多少，偏移出合適的句柄。你所需要做的只是聲明"wrap:true"。手工加入resizeChild做法也是支持的

調節欄
注意藍色的調節欄。屬性為 "pinned:true".

動態調整
如果您不想代理調整，可打開動態調整，只要"dynamic:true" 。

下面的textarea打開了動態調整，并附有調節欄。

var dwrapped = new YAHOO.ext.Resizable('dwrapped', {  wrap:true,  pinned:true,  width:450,  height:150,  minWidth:200,  minHeight: 50,  dynamic: true});

按比例縮放
有些圖像的按比例縮放，屬性為： preserveRatio:true.

var wrapped = new YAHOO.ext.Resizable('wrapped', {  wrap:true,  pinned:true,  minWidth:50,  minHeight: 50,  preserveRatio: true});

直接方式
一種直接了當，不用花俏的處理方式。屬性為 transparent to true.

var transparent = new YAHOO.ext.Resizable('transparent', {  wrap:true,  minWidth:50,  minHeight: 50,  preserveRatio: true,  transparent:true});

自定義方式
       八個方向的縮放。要使得元素在x、y方向可調節，那么這個元素應該是絕對定位的（positioned absolute）. 你也可以通過屬性"handles"來確定某一方向出現與否,而且允許你在CSS里修改它的樣式。

這是一張八個方向的縮放的、自定義調節欄的、可移動的按正比例縮放的圖片 (做起來不太容易！).
雙擊圖片隱藏

var custom = new YAHOO.ext.Resizable('custom', {  wrap:true,  pinned:true,  minWidth:50,  minHeight: 50,  preserveRatio: true,  dynamic:true,  handles: 'all', // shorthand for 'n s e w ne nw se sw'  draggable:true});

固定調節（譯者注，這個功能好像有點問題，間歇性運行不正常，待修復！）
每次調節量都是 固定值

var snap = new YAHOO.ext.Resizable('snap', {  pinned:true,  width:250,  height:100,  handles: 'e',  widthIncrement:50,  minWidth: 50,  dynamic: true});

加入動畫效果
動畫效果有兩個參數 easing（特性） 和 duration（持續時間） 并 設置 animate:true,

var animated = new YAHOO.ext.Resizable('animated', {  width: 200,  height: 100,  minWidth:100,  minHeight:50,  animate:true,  easing: YAHOO.util.Easing.backIn,  duration:.6});

JavaScript技術：可縮放Reloaded-一個針對可縮放元素的復用組件，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。