可缩放Reloaded-一个针对可缩放元素的复用组件

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

这些范例展示了元素如何应用了一个浮动（默认）和装上可缩放的组件。

查看 basic.js 完整代码。

基本范例
这是个简单的可缩放的范例。在矩形附近可调节大小。这个例子采用了“浮动”的默认处理。

Resize Me！

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,

Animate Me！

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

注意：很明显的原因动画和动态调整dynamic是不能用在一起的。