Scalable Reloaded-a reusable component for scalable Elements

Address: http://www.jackslocum.com/blog/2006/11/24/resizable-reloaded/

These examples demonstrate how an element applies a floating (default) and a scalable component.

View the complete basic. js code.

Basic example
This is a simple and scalable example. The size can be adjusted near the rectangle. This example uses the "floating" Default processing.

Resize Me!

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

Package Elements

Some elements do not have child elements, such as images and textares. In the past, you put these elements into a scalable element as its child element. When yui-ext. 33rc2 is reached, the component will wrap these elements, that is, by calculating how much should be adjusted by borders/padding, partial removal of the appropriate handle. All you need to do is declare "wrap: true ". Manual addition of resizeChild is also supported

Adjustment bar
Pay attention to the blue adjustment bar. The property is "pinned: true ".

Dynamic Adjustment
If you do not want to adjust the agent, you can enable dynamic adjustment as long as "dynamic: true ".

The following textarea enables dynamic adjustment with the adjustment bar attached.

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, presponeget, 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.

Such simple code can be written even when a computer is installed.

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

Proportional Scaling
Proportional scaling of some images; attribute: preserveRatio: true.

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

Direct Mode
It is a straightforward way to deal with it. The property is transparent to true.

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

Custom Mode
Scaling in eight directions. To make the element adjustable in the direction of x and y, the element should be positioned absolute ). you can also use the property "handles" to determine whether a certain direction appears or not, and allow you to modify its style in CSS.

This is an eight-direction scaling, a custom adjustment bar, and a mobile scaled image in a proportional manner (it is not easy to do !).
Double-click image hiding

Show Me image appears above

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});

Fixed Adjustment !)
Each adjustment is a fixed value.

 

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

Note:Fixed adjustment conflicts with proportional adjustment and cannot be used together.

Add animation Effects
The animation effect has two parameters: easing (feature) and duration (duration), and the animation is set to 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});

Note: Obviously, animation and dynamic adjustment of dynamic cannot be used together.