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

這些范例展示了元素如何應(yīng)用了一個(gè)浮動(dòng)(默認(rèn))和裝上可縮放的組件。

查看 basic.js 完整代碼。

基本范例
這是個(gè)簡(jiǎn)單的可縮放的范例。在矩形附近可調(diào)節(jié)大小。這個(gè)例子采用了“浮動(dòng)”的默認(rèn)處理。

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

包裹元素

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

調(diào)節(jié)欄
注意藍(lán)色的調(diào)節(jié)欄。屬性為 "pinned:true".

動(dòng)態(tài)調(diào)整
如果您不想代理調(diào)整，可打開動(dòng)態(tài)調(diào)整，只要"dynamic:true" 。

下面的textarea打開了動(dòng)態(tài)調(diào)整，并附有調(diào)節(jié)欄。

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
});

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

 

 

 

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

自定義方式
       八個(gè)方向的縮放。要使得元素在x、y方向可調(diào)節(jié)，那么這個(gè)元素應(yīng)該是絕對(duì)定位的（positioned absolute）. 你也可以通過(guò)屬性"handles"來(lái)確定某一方向出現(xiàn)與否,而且允許你在CSS里修改它的樣式。

這是一張八個(gè)方向的縮放的、自定義調(diào)節(jié)欄的、可移動(dòng)的按正比例縮放的圖片 (做起來(lái)不太容易！).
雙擊圖片隱藏

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
});

固定調(diào)節(jié)（譯者注，這個(gè)功能好像有點(diǎn)問(wèn)題，間歇性運(yùn)行不正常，待修復(fù)?。?/B>
每次調(diào)節(jié)量都是 固定值

var snap = new YAHOO.ext.Resizable('snap', {
  pinned:true,
  width:250,
  height:100,
  handles: 'e',
  widthIncrement:50,
  minWidth: 50,
  dynamic: 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
});