Categories

.resizable()

Categories: UI

.resizable( [ options ] )

Plugin: jQuery.ui.resizable

Description: Apply the Resizable widget for each element in the set of matched elements

  • .resizable( [ options ] )

    version added: 1.0

    options   A map of additional options pass to the widget.

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
  • disabled

    Disables (true) or enables (false) the resizable. Can be set when initialising (first creating) the resizable.

    Default: false

  • alsoResize

    Resize these elements synchronous when resizing.

    Default: false

  • 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'

  • 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

  • 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

  • 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.

  • 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'

  • 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

  • create

    This event is triggered when resizable is created.

  • start

    This event is triggered at the start of a resize operation.

  • resize

    This event is triggered during the resize, on the drag of the resize handler.

  • stop

    This event is triggered at the end of a resize operation.

  • destroy

    • .resizable( "destroy" )

      version added: 1.0

    Remove the resizable functionality completely. This will return the element back to its pre-init state.

  • disable

    • .resizable( "disable" )

      version added: 1.0

    Disable the resizable.

  • enable

    • .resizable( "enable" )

      version added: 1.0

    Enable the resizable.

  • option

    • .resizable( "option" , optionName , [value] )

      version added: 1.0

    Get or set any resizable option. If no value is specified, will act as a getter.

  • option

    • .resizable( "option" , options )

      version added: 1.0

    Set multiple resizable options at once by providing an options object.

  • widget

    • .resizable( "widget" )

      version added: 1.0

    Returns the .ui-resizable element.