|
|
原文地址：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-一個針對可縮放元素的復用組件，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
