原文地址：[url=http://www.jackslocum.com/blog/2006/11/24/resizable-reloaded/]http://www.jackslocum.com/blog/2006/11/24/resizable-reloaded/[/url] 这些范例展示了元素如何应用了一个浮动(默认)和装上可缩放的组件。 查看 [url=http://www.ajaxjs.com/yuicn/demos/basic.js]basic.js[/url] 完整代码。 [b]基本范例[/b] 这是个简单的可缩放的范例。在矩形附近可调节大小。这个例子采用了“浮动”的默认处理。

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

---

[b]包裹元素[/b] 一些元素并没有子元素，例如images and textares。过去的做法是，你把这些元素放进一个可缩放的元素里面，作为其的子元素。到了yui-ext .33rc2，组件会将这些元素包裹好，即通过计算borders/padding应调整多少，偏移出合适的句柄。你所需要做的只是声明"wrap:true"。手工加入resizeChild做法也是支持的 [b]调节栏[/b] 注意蓝色的调节栏。属性为 "pinned:true". [b]动态调整[/b] 如果您不想代理调整，可打开动态调整，只要"dynamic:true" 。 下面的textarea打开了动态调整，并附有调节栏。 如此简单的代码，连电脑装机的都会写

[code]var dwrapped = new YAHOO.ext.Resizable('dwrapped', {
  wrap:true,
  pinned:true,
  width:450,
  height:150,
  minWidth:200,
  minHeight: 50,
  dynamic: true
});[/code]

---

[b]按比例缩放[/b] 有些图像的按比例缩放，属性为： preserveRatio:true.

[code]var wrapped = new YAHOO.ext.Resizable('wrapped', {
  wrap:true,
  pinned:true,
  minWidth:50,
  minHeight: 50,
  preserveRatio: true
});[/code]

---

[b]直接方式[/b] 一种直接了当，不用花俏的处理方式。属性为 transparent to true.

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

---

[b]自定义方式[/b]        八个方向的缩放。要使得元素在x、y方向可调节，那么这个元素应该是绝对定位的（positioned absolute）. 你也可以通过属性"handles"来确定某一方向出现与否,而且允许你在CSS里修改它的样式。 这是一张八个方向的缩放的、自定义调节栏的、可移动的按正比例缩放的图片 (做起来不太容易！). [b]双击图片隐藏[/b]

[code]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
});[/code]

---

[b]固定调节（译者注，这个功能好像有点问题，间歇性运行不正常，待修复！）[/b] 每次调节量都是 固定值

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

[b]注意：[/b] 固定调节 和 按比例 是冲突的 ，不能用于一起。

---

[b]加入动画效果[/b] 动画效果有两个参数 easing（特性） 和 duration（持续时间） 并 设置 animate:true,

[code]var animated = new YAHOO.ext.Resizable('animated', {
  width: 200,
  height: 100,
  minWidth:100,
  minHeight:50,
  animate:true,
  easing: YAHOO.util.Easing.backIn,
  duration:.6
});[/code]

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