Resizable Class

The jQuery UI Resizable plugin makes selected elements resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height. All callbacks (start,stop,resize) receive two arguments: The original browser event and a prepared ui object. The ui object has the following fields: ui.helper - a jQuery object containing the helper element ui.originalPosition - {top, left} before resizing started ui.originalSize - {width, height} before resizing started ui.position - {top, left} current position ui.size - {width, height} current size

Namespace: SharpKit.jQuery.UI.Controls

Constructors

Name Description
Resizable(JsString, ResizableOptions) Creates a new instance of Resizable
Resizable(JsString) Creates a new instance of Resizable

Properties

Name Description
alsoResize Resize these elements synchronous when resizing. Default: false Types: Selector, jQuery, Element
animate Animates to the final size after resizing. Default: false
animateDuration Duration time for animating, in milliseconds. Other possible values: 'slow', 'normal', 'fast'. Default: 'slow' Types: Integer, String
animateEasing Easing effect for animating. Default: 'swing'
aspectRatio If set to true, resizing is constrained by the original aspect ratio. Otherwise a custom aspect ratio can be specified, such as 9 / 16, or 0.5. Default: false Types: Boolean, Float
autoHide If set to true, automatically hides the handles except when the mouse hovers over the element. Default: false
cancel Prevents resizing if you start on elements matching the selector. Default: ':input,option'
containment Constrains resizing to within the bounds of the specified element. Possible values: 'parent', 'document', a DOMElement, or a Selector. Default: false Types: String, Element, Selector
delay Tolerance, in milliseconds, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond duration. This can help prevent unintended resizing when clicking on an element. Default: 0
distance Tolerance, in pixels, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond distance. This can help prevent unintended resizing when clicking on an element. Default: 1
ghost If set to true, a semi-transparent helper element is shown for resizing. Default: false
grid Snaps the resizing element to a grid, every x and y pixels. Array values: [x, y] Default: false
handles If specified as a string, should be a comma-split list of any of the following: 'n, e, s, w, ne, se, sw, nw, all'. The necessary handles will be auto-generated by the plugin. If specified as an object, the following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly. Default: 'e, s, se' Types: String, Object
helper This is the css class that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the original element is sized. Default: false
maxHeight This is the maximum height the resizable should be allowed to resize to. Default: null
maxWidth This is the maximum width the resizable should be allowed to resize to. Default: null
minHeight This is the minimum height the resizable should be allowed to resize to. Default: 10
minWidth This is the minimum width the resizable should be allowed to resize to. Default: 10
resize This event is triggered during the resize, on the drag of the resize handler. Default: null
start This event is triggered at the start of a resize operation. Default: null
stop This event is triggered at the end of a resize operation. Default: null
© Copyright 2005-2011 SharpKit. All rights reserved.