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

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

查看 basic.js 完整代碼。

基本范例
這是個(gè)簡單的可縮放的范例。在矩形附近可調(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。過去的做法是，你把這些元素放進(jìn)一個(gè)可縮放的元素里面，作為其的子元素。到了yui-ext .33rc2，組件會(huì)將這些元素包裹好，即通過計(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)該是絕對定位的（positioned absolute）. 你也可以通過屬性"handles"來確定某一方向出現(xiàn)與否,而且允許你在CSS里修改它的樣式。

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

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)問題，間歇性運(yùn)行不正常，待修復(fù)！）
每次調(diào)節(jié)量都是 固定值

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

加入動(dòng)畫效果
動(dòng)畫效果有兩個(gè)參數(shù) easing（特性） 和 duration（持續(xù)時(shí)間） 并 設(shè)置 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技術(shù)：可縮放Reloaded-一個(gè)針對可縮放元素的復(fù)用組件，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。