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

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

查看 basic.js 完整代碼。

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

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

包裹元素

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

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

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

下面的textarea打開了動態(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
});

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

 

 

 

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

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

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

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é)（譯者注，這個功能好像有點問題，間歇性運行不正常，待修復！）
每次調(diào)節(jié)量都是 固定值

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

加入動畫效果
動畫效果有兩個參數(shù) easing（特性） 和 duration（持續(xù)時間） 并 設置 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
});

最新評論