Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
the textarea in a div and set "resizeChild" to true (or the id of the textarea), or set wrap:true in your config and
the element will be wrapped for you automatically.
Here's a Resizable with every possible config option and it's default value:
var resizer = new YAHOO.ext.Resizable('element-id', {
resizeChild : false,
adjustments : [0, 0],
minWidth : 5,
minHeight : 5,
maxWidth : 10000,
maxHeight : 10000,
enabled : true,
wrap: false, // true to wrap the element
width: null, // initial size
height: null, // initial size
animate : false,
duration : .35,
dynamic : false,
handles : false,
multiDirectional : false,
disableTrackOver : false,
easing : YAHOO.util.Easing ? YAHOO.util.Easing.easeOutStrong : null,
widthIncrement : 0,
heightIncrement : 0,
pinned : false,
width : null,
height : null,
preserveRatio : false,
transparent: false,
minX: 0,
minY: 0,
draggable: false
});
resizer.on('resize', myHandler);
To hide a particular handle, set it's display to none in CSS, or through script:
resizer.east.setDisplayed(false);
|
adjustments : Array/String |
Resizable |
String "auto" or an array [width, height] with values to be added to the resize operation's new size. |
|
animate : Boolean |
Resizable |
True to animate the resize (not compatible with dynamic sizing) |
|
disableTrackOver : Boolean |
Resizable |
true to disable mouse tracking. This is only applied at config time. |
|
draggable : Boolean |
Resizable |
convenience to initialize drag drop. |
|
duration : Float |
Resizable |
Animation duration |
|
dynamic : Boolean |
Resizable |
True to resize the element while dragging instead of using a proxy |
|
easing : YAHOO.util.Easing |
Resizable |
Animation easing |
|
enabled : Boolean |
Resizable |
false to disable resizing |
|
handles : String |
Resizable |
String consisting of the resize handles to display. Valid handles are
n (north), s (south) e (east), w (west), ne (n... |
|
height : Number |
Resizable |
The initial height for the element |
|
heightIncrement : Number |
Resizable |
The increment to snap the height resize in pixels (dynamic must be true) |
|
maxHeight : Number |
Resizable |
The maximum height for the element |
|
maxWidth : Number |
Resizable |
The maximum width for the element |
|
minHeight : Number |
Resizable |
The minimum height for the element |
|
minWidth : Number |
Resizable |
The minimum width for the element |
|
minX : Number |
Resizable |
The minimum allowed page X for the element (only used for west resizing, defaults to 0) |
|
minY : Number |
Resizable |
The minimum allowed page Y for the element (only used for north resizing, defaults to 0) |
|
pinned : Boolean |
Resizable |
true to pin the resize handles. This is only applied at config time. |
|
preserveRatio : Boolean |
Resizable |
true to preserve the initial size ratio. |
|
resizeChild : YAHOO.ext.Element |
Resizable |
True to resizeSize the first child or id/element to resize |
|
transparent : Boolean |
Resizable |
true for transparent handles. This is only applied at config time. |
|
width : Number |
Resizable |
The initial width for the element |
|
widthIncrement : Number |
Resizable |
The increment to snap the width resize in pixels (dynamic must be true) |
|
Resizable(String/HTMLElement/YAHOO.ext.Element el , Object config ) |
Resizable |
Create a new resizable component |
|
addListener(String eventName , Function handler , [Object scope ], [boolean override ]) : void |
Observable |
Appends an event handler to this component |
|
bufferedListener(String eventName , Function handler , [Object scope ], [Number millis ]) : Function |
Observable |
Appends an event handler to this component that is buffered. If the event is triggered more than once
in the specifie... |
|
delayedListener(String eventName , Function handler , [Object scope ], [Number delay ]) : Function |
Observable |
Appends an event handler to this component that is delayed the specified number of milliseconds. This
is useful for e... |
|
fireEvent(String eventName , Object... args ) : Boolean |
Observable |
Fires the specified event with the passed parameters (minus the event name). |
|
getEl() : YAHOO.ext.Element |
Resizable |
Returns the element this component is bound to. |
|
getResizeChild() : YAHOO.ext.Element |
Resizable |
Returns the resizeChild element (or null). |
|
on(String eventName , Function handler , [Object scope ], [boolean override ]) : void |
Observable |
Appends an event handler to this element (shorthand for addListener) |
|
purgeListeners() : void |
Observable |
Removes all listeners for this object |
|
removeListener(String eventName , Function handler , [Object scope ]) : void |
Observable |
Removes a listener |
|
resizeTo(Number width , Number height ) : void |
Resizable |
Perform a manual resize |
adjustments
public Array/String adjustments
String "auto" or an array [width, height] with values to be added to the resize operation's new size.
This property is defined by Resizable.
animate
public Boolean animate
True to animate the resize (not compatible with dynamic sizing)
This property is defined by Resizable.
disableTrackOver
public Boolean disableTrackOver
true to disable mouse tracking. This is only applied at config time.
This property is defined by Resizable.
draggable
public Boolean draggable
convenience to initialize drag drop.
This property is defined by Resizable.
duration
public Float duration
Animation duration
This property is defined by Resizable.
dynamic
public Boolean dynamic
True to resize the element while dragging instead of using a proxy
This property is defined by Resizable.
easing
public YAHOO.util.Easing easing
Animation easing
This property is defined by Resizable.
enabled
public Boolean enabled
false to disable resizing
This property is defined by Resizable.
handles
public String handles
String consisting of the resize handles to display. Valid handles are
n (north), s (south) e (east), w (west), ne (northeast), nw (northwest), se (southeast), sw (southwest)
and all (which applies them all). If this is blank it defaults to "e,s,se". Handles can be delimited using
a space, comma or semi-colon. This is only applied at config time.
This property is defined by Resizable.
height
public Number height
The initial height for the element
This property is defined by Resizable.
heightIncrement
public Number heightIncrement
The increment to snap the height resize in pixels (dynamic must be true)
This property is defined by Resizable.
maxHeight
public Number maxHeight
The maximum height for the element
This property is defined by Resizable.
maxWidth
public Number maxWidth
The maximum width for the element
This property is defined by Resizable.
minHeight
public Number minHeight
The minimum height for the element
This property is defined by Resizable.
minWidth
public Number minWidth
The minimum width for the element
This property is defined by Resizable.
minX
public Number minX
The minimum allowed page X for the element (only used for west resizing, defaults to 0)
This property is defined by Resizable.
minY
public Number minY
The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
This property is defined by Resizable.
pinned
public Boolean pinned
true to pin the resize handles. This is only applied at config time.
This property is defined by Resizable.
preserveRatio
public Boolean preserveRatio
true to preserve the initial size ratio.
This property is defined by Resizable.
resizeChild
public YAHOO.ext.Element resizeChild
True to resizeSize the first child or id/element to resize
This property is defined by Resizable.
transparent
public Boolean transparent
true for transparent handles. This is only applied at config time.
This property is defined by Resizable.
width
public Number width
The initial width for the element
This property is defined by Resizable.
widthIncrement
public Number widthIncrement
The increment to snap the width resize in pixels (dynamic must be true)
This property is defined by Resizable.