可缩放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打开了动态调整，并附有调节栏。

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.

 

 

 

如此简单的代码，连电脑装机的都会写

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里修改它的样式。

这是一张八个方向的缩放的、自定义调节栏的、可移动的按正比例缩放的图片 (做起来不太容易！).
双击图片隐藏

Show Me图片出现在上方

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是不能用在一起的。