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

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

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

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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjddfj.html