Class YAHOO.ext.Resizable
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).
By default handles are displayed when the mouse is near the edge of the element. To make the handles displayed all the time,
add a class "yresizable-pinned" to the element. Note: depending on your element you may need to
apply "adjustments" (see below) to get the handles to look right when pinned.
Here's a Resizable with every possible config option and it's default value:
var resizer = new YAHOO.ext.Resizable('element-id', {
resizeChild : false, // true to resize the firstChild or an id/element to resize
adjustments : [0, 0],
minWidth : 5,
minHeight : 5,
maxWidth : 10000,
maxHeight : 10000,
widthIncrement : 0, // snapping
heightIncrement : 0, // snapping
enabled : true,
animate : false, // (ignored if resizeChild is true)
duration : .35,
dynamic : false, // true for real time sizing instead of proxy resizing
multiDirectional : false, // true for 4 way adjustments
disableTrackOver : false, // disable mouse over tracking for pinned resizers
easing = YAHOO.util.Easing.easeOutStrong
});
resizer.on('resize', myHandler);
To hide a particular handle, set it's display to none in CSS, or through script:
resizer.east.setDisplayed(false);
Public Properties
|
adjustments : Array |
Resizable |
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) |
|
corner : YAHOO.ext.Element |
Resizable |
The corner handle |
|
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 |
|
east : YAHOO.ext.Element |
Resizable |
The east handle |
|
enabled : Boolean |
Resizable |
false to disable resizing |
|
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 |
|
north : YAHOO.ext.Element |
Resizable |
The north handle |
|
resizeChild : YAHOO.ext.Element |
Resizable |
True to resizeSize the first child or id/element to resize |
|
south : YAHOO.ext.Element |
Resizable |
The south handle |
|
west : YAHOO.ext.Element |
Resizable |
The west handle |
|
widthIncrement : Number |
Resizable |
The increment to snap the width resize in pixels (dynamic must be true) |
Public Methods
|
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 element |
|
delayedListener(String eventName , Function handler , [Object scope ], [Number delay ]) : Function |
Observable |
Appends an event handler to this element that is delayed the specified number of milliseconds. |
|
fireEvent(String eventName , Object... args ) : void |
Observable |
Fires the specified event with the passed parameters (minus the event name). |
|
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 |
Public Events
|
beforeresize : (YAHOO.ext.Resizable this , YAHOO.ext.EventObject e ) |
Resizable |
Fired before resize is allowed. Set enabled to false to cancel resize. |
|
resize : (YAHOO.ext.Resizable this , Number width , Number height , YAHOO.ext.EventObject e ) |
Resizable |
Fired after a resize. |
Property Details
adjustments
public Array adjustments
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.
corner
public YAHOO.ext.Element corner
The corner handle
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.
east
public YAHOO.ext.Element east
The east handle
This property is defined by Resizable.
enabled
public Boolean enabled
false to disable resizing
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.
north
public YAHOO.ext.Element north
The north handle
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.
south
public YAHOO.ext.Element south
The south handle
This property is defined by Resizable.
west
public YAHOO.ext.Element west
The west handle
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.
Constructor Details
Resizable
public function Resizable(String/HTMLElement/YAHOO.ext.Element el
, Object config
)
Create a new resizable component
Method Details
addListener
public function addListener(String eventName
, Function handler
, [Object scope
], [boolean override
])
Appends an event handler to this element
Parameters:
eventName
: StringThe type of event to listen for
handler
: FunctionThe method the event invokes
scope
: Object(optional) The scope (this object) for the handler
override
: boolean(optional) If true, scope becomes the scope
Returns:
delayedListener
public function delayedListener(String eventName
, Function handler
, [Object scope
], [Number delay
])
Appends an event handler to this element that is delayed the specified number of milliseconds.
Parameters:
eventName
: StringThe type of event to listen for
handler
: FunctionThe method the event invokes
scope
: Object(optional) The scope (this object) for the handler
delay
: Number(optional) The number of milliseconds to delay
Returns:
fireEvent
public function fireEvent(String eventName
, Object... args
)
Fires the specified event with the passed parameters (minus the event name).
purgeListeners
public function purgeListeners()
Removes all listeners for this object
removeListener
public function removeListener(String eventName
, Function handler
, [Object scope
])
resizeTo
public function resizeTo(Number width
, Number height
)
Perform a manual resize
Parameters:
width
: Numberheight
: Number
Returns:
This method is defined by Resizable.
Event Details
beforeresize
public event beforeresize
Fired before resize is allowed. Set enabled to false to cancel resize.
Subscribers will be called with the following parameters:
this
: YAHOO.ext.Resizablee
: YAHOO.ext.EventObjectThe mousedown event
This event is defined by Resizable.
resize
public event resize
Fired after a resize.
Subscribers will be called with the following parameters:
this
: YAHOO.ext.Resizablewidth
: NumberThe new width
height
: NumberThe new height
e
: YAHOO.ext.EventObjectThe mouseup event
This event is defined by Resizable.