Scalable reloaded-A reusable component _yui for a scalable element. Ext Related

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

These examples show how elements apply a float (default) and a scalable component.

View the Basic.js complete code.

Basic example
This is a simple, scalable paradigm. Adjustable size around the rectangle. This example uses the default processing of "floating".

Resize me!

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

Parcel Element

Some elements do not have child elements, such as images and textares. In the past, you put these elements into a scalable element as a child element. by Yui-ext. 33RC2, the component will wrap these elements, that is, by calculating how much borders/padding should be adjusted to offset the appropriate handle. All you have to do is declare "wrap:true". Manual addition to the Resizechild procedure is also supported

Adjustment bar
Notice the blue adjustment bar. property is "Pinned:true".

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

The following textarea opens the dynamic adjustment and is accompanied by an adjustable bar.

<textarea id="dwrapped">Lorem ipsum dolor sit amet, consectetuer adipiscing. 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. 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. </textarea>

Such a simple code, even the computer installed will write

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

Scale by scale
Some images are scaled proportionally, and the properties are: Preserveratio:true.

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

Direct Way
A straightforward, not fancy way of handling. property is transparent to true.

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

Custom Way
Eight-direction scaling. To make the element adjustable in the x and y direction, the element should be absolutely positioned (positioned absolute). You can also use the attribute "handles" to determine whether a certain direction appears or not, and allows you to modify its style in CSS.

This is a eight-direction scaled, custom adjustable bar, movable proportional zoom picture (not easy to do!). ).
Double-click picture Hide

Show me picture 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 (translator note, this function seems to have a problem, intermittent operation is not normal, to be repaired!) ）
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 and proportional conflict, cannot be used together.

Add animation effect
The animation effect has two parameters easing (attributes) and duration (duration) and sets the 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
});

Note: There are obvious reasons why animations and dynamic adjustment dynamics cannot be used together.