ドキュメント

UI/API/1.7.2/Resizable

From jQuery JavaScript Library

Jump to: navigation, search

jQuery UI Resizable

Overview

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

Dependencies

  • UI Core

Example

A simple jQuery UI Resizable.

$("#resizable").resizable();

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  <style type="text/css">
    #resizable { width: 100px; height: 100px; background: silver; }
  </style>
  <script>
  $(document).ready(function() {
    $("#resizable").resizable();
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="resizable"></div>

</body>
</html>

Options

  • disabled

    Type:
    Boolean
    Default:
    false

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

    Code examples

    Initialize a resizable with the disabled option specified.
    $( ".selector" ).resizable({ disabled: true });
    Get or set the disabled option, after init.
    //getter
    var disabled = $( ".selector" ).resizable( "option", "disabled" );
    //setter
    $( ".selector" ).resizable( "option", "disabled", true );
  • alsoResize

    Type:
    Selector, jQuery, Element
    Default:
    false

    Resize these elements synchronous when resizing.

    Code examples

    Initialize a resizable with the alsoResize option specified.
    $( ".selector" ).resizable({ alsoResize: '.other' });
    Get or set the alsoResize option, after init.
    //getter
    var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
    //setter
    $( ".selector" ).resizable( "option", "alsoResize", '.other' );
  • animate

    Type:
    Boolean
    Default:
    false

    Animates to the final size after resizing.

    Code examples

    Initialize a resizable with the animate option specified.
    $( ".selector" ).resizable({ animate: true });
    Get or set the animate option, after init.
    //getter
    var animate = $( ".selector" ).resizable( "option", "animate" );
    //setter
    $( ".selector" ).resizable( "option", "animate", true );
  • animateDuration

    Type:
    Integer, String
    Default:
    'slow'

    Duration time for animating, in milliseconds. Other possible values: 'slow', 'normal', 'fast'.

    Code examples

    Initialize a resizable with the animateDuration option specified.
    $( ".selector" ).resizable({ animateDuration: 500 });
    Get or set the animateDuration option, after init.
    //getter
    var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
    //setter
    $( ".selector" ).resizable( "option", "animateDuration", 500 );
  • animateEasing

    Type:
    String
    Default:
    'swing'

    Easing effect for animating.

    Code examples

    Initialize a resizable with the animateEasing option specified.
    $( ".selector" ).resizable({ animateEasing: 'swing' });
    Get or set the animateEasing option, after init.
    //getter
    var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
    //setter
    $( ".selector" ).resizable( "option", "animateEasing", 'swing' );
  • aspectRatio

    Type:
    Boolean, Float
    Default:
    false

    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.

    Code examples

    Initialize a resizable with the aspectRatio option specified.
    $( ".selector" ).resizable({ aspectRatio: .75 });
    Get or set the aspectRatio option, after init.
    //getter
    var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
    //setter
    $( ".selector" ).resizable( "option", "aspectRatio", .75 );
  • autoHide

    Type:
    Boolean
    Default:
    false

    If set to true, automatically hides the handles except when the mouse hovers over the element.

    Code examples

    Initialize a resizable with the autoHide option specified.
    $( ".selector" ).resizable({ autoHide: true });
    Get or set the autoHide option, after init.
    //getter
    var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
    //setter
    $( ".selector" ).resizable( "option", "autoHide", true );
  • cancel

    Type:
    Selector
    Default:
    ':input,option'

    Prevents resizing if you start on elements matching the selector.

    Code examples

    Initialize a resizable with the cancel option specified.
    $( ".selector" ).resizable({ cancel: ':input,option' });
    Get or set the cancel option, after init.
    //getter
    var cancel = $( ".selector" ).resizable( "option", "cancel" );
    //setter
    $( ".selector" ).resizable( "option", "cancel", ':input,option' );
  • containment

    Type:
    String, Element, Selector
    Default:
    false

    Constrains resizing to within the bounds of the specified element. Possible values: 'parent', 'document', a DOMElement, or a Selector.

    Code examples

    Initialize a resizable with the containment option specified.
    $( ".selector" ).resizable({ containment: 'parent' });
    Get or set the containment option, after init.
    //getter
    var containment = $( ".selector" ).resizable( "option", "containment" );
    //setter
    $( ".selector" ).resizable( "option", "containment", 'parent' );
  • delay

    Type:
    Integer
    Default:
    0

    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.

    Code examples

    Initialize a resizable with the delay option specified.
    $( ".selector" ).resizable({ delay: 20 });
    Get or set the delay option, after init.
    //getter
    var delay = $( ".selector" ).resizable( "option", "delay" );
    //setter
    $( ".selector" ).resizable( "option", "delay", 20 );
  • distance

    Type:
    Integer
    Default:
    1

    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.

    Code examples

    Initialize a resizable with the distance option specified.
    $( ".selector" ).resizable({ distance: 20 });
    Get or set the distance option, after init.
    //getter
    var distance = $( ".selector" ).resizable( "option", "distance" );
    //setter
    $( ".selector" ).resizable( "option", "distance", 20 );
  • ghost

    Type:
    Boolean
    Default:
    false

    If set to true, a semi-transparent helper element is shown for resizing.

    Code examples

    Initialize a resizable with the ghost option specified.
    $( ".selector" ).resizable({ ghost: true });
    Get or set the ghost option, after init.
    //getter
    var ghost = $( ".selector" ).resizable( "option", "ghost" );
    //setter
    $( ".selector" ).resizable( "option", "ghost", true );
  • grid

    Type:
    Array
    Default:
    false

    Snaps the resizing element to a grid, every x and y pixels. Array values: [x, y]

    Code examples

    Initialize a resizable with the grid option specified.
    $( ".selector" ).resizable({ grid: [50, 50] });
    Get or set the grid option, after init.
    //getter
    var grid = $( ".selector" ).resizable( "option", "grid" );
    //setter
    $( ".selector" ).resizable( "option", "grid", [50, 50] );
  • handles

    Type:
    String, Object
    Default:
    'e, s, se'

    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.

    Code examples

    Initialize a resizable with the handles option specified.
    $( ".selector" ).resizable({ handles: 'n, e, s, w' });
    Get or set the handles option, after init.
    //getter
    var handles = $( ".selector" ).resizable( "option", "handles" );
    //setter
    $( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );
  • helper

    Type:
    String
    Default:
    false

    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.

    Code examples

    Initialize a resizable with the helper option specified.
    $( ".selector" ).resizable({ helper: 'ui-state-highlight' });
    Get or set the helper option, after init.
    //getter
    var helper = $( ".selector" ).resizable( "option", "helper" );
    //setter
    $( ".selector" ).resizable( "option", "helper", 'ui-state-highlight' );
  • maxHeight

    Type:
    Integer
    Default:
    null

    This is the maximum height the resizable should be allowed to resize to.

    Code examples

    Initialize a resizable with the maxHeight option specified.
    $( ".selector" ).resizable({ maxHeight: 300 });
    Get or set the maxHeight option, after init.
    //getter
    var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
    //setter
    $( ".selector" ).resizable( "option", "maxHeight", 300 );
  • maxWidth

    Type:
    Integer
    Default:
    null

    This is the maximum width the resizable should be allowed to resize to.

    Code examples

    Initialize a resizable with the maxWidth option specified.
    $( ".selector" ).resizable({ maxWidth: 250 });
    Get or set the maxWidth option, after init.
    //getter
    var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
    //setter
    $( ".selector" ).resizable( "option", "maxWidth", 250 );
  • minHeight

    Type:
    Integer
    Default:
    10

    This is the minimum height the resizable should be allowed to resize to.

    Code examples

    Initialize a resizable with the minHeight option specified.
    $( ".selector" ).resizable({ minHeight: 150 });
    Get or set the minHeight option, after init.
    //getter
    var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
    //setter
    $( ".selector" ).resizable( "option", "minHeight", 150 );
  • minWidth

    Type:
    Integer
    Default:
    10

    This is the minimum width the resizable should be allowed to resize to.

    Code examples

    Initialize a resizable with the minWidth option specified.
    $( ".selector" ).resizable({ minWidth: 75 });
    Get or set the minWidth option, after init.
    //getter
    var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
    //setter
    $( ".selector" ).resizable( "option", "minWidth", 75 );

Events

  • start

    Type:
    resizestart

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

    Code examples

    Supply a callback function to handle the start event as an init option.
    $( ".selector" ).resizable({
       start: function(event, ui) { ... }
    });
    Bind to the start event by type: resizestart.
    $( ".selector" ).bind( "resizestart", function(event, ui) {
      ...
    });
  • resize

    Type:
    resize

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

    Code examples

    Supply a callback function to handle the resize event as an init option.
    $( ".selector" ).resizable({
       resize: function(event, ui) { ... }
    });
    Bind to the resize event by type: resize.
    $( ".selector" ).bind( "resize", function(event, ui) {
      ...
    });
  • stop

    Type:
    resizestop

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

    Code examples

    Supply a callback function to handle the stop event as an init option.
    $( ".selector" ).resizable({
       stop: function(event, ui) { ... }
    });
    Bind to the stop event by type: resizestop.
    $( ".selector" ).bind( "resizestop", function(event, ui) {
      ...
    });

Methods

  • destroy

    Signature:
    .resizable( "destroy" )

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

  • disable

    Signature:
    .resizable( "disable" )

    Disable the resizable.

  • enable

    Signature:
    .resizable( "enable" )

    Enable the resizable.

  • option

    Signature:
    .resizable( "option" , optionName , [value] )

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

  • option

    Signature:
    .resizable( "option" , options )

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

  • widget

    Signature:
    .resizable( "widget" )

    Returns the .ui-resizable element.

Theming

The jQuery UI Resizable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.resizable.css stylesheet that can be modified. These classes are highlighed in bold below.

Sample markup with jQuery UI CSS Framework classes

<div class="ui-resizable">
   <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div>
   <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div>
   <div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
</div>

Note: This is a sample of markup generated by the resizable plugin, not markup you should use to create a resizable. The only markup needed for that is <div></div>.