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:
$("#resizable").resizable();
<!DOCTYPE html> <html> <head> <link href="https://ajax.ingoogleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.ingoogleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="https://ajax.ingoogleapis.com/ajax/libs/jqueryui/1.8/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>
This event is triggered at the start of a resize operation.
start
event as an init option.
$( ".selector" ).resizable({
start: function(event, ui) { ... }
});
start
event by type: resizestart
.
$( ".selector" ).bind( "resizestart", function(event, ui) {
...
});
This event is triggered during the resize, on the drag of the resize handler.
resize
event as an init option.
$( ".selector" ).resizable({
resize: function(event, ui) { ... }
});
resize
event by type: resize
.
$( ".selector" ).bind( "resize", function(event, ui) {
...
});
This event is triggered at the end of a resize operation.
stop
event as an init option.
$( ".selector" ).resizable({
stop: function(event, ui) { ... }
});
stop
event by type: resizestop
.
$( ".selector" ).bind( "resizestop", function(event, ui) {
...
});
Remove the resizable functionality completely. This will return the element back to its pre-init state.
Disable the resizable.
Enable the resizable.
Get or set any resizable option. If no value is specified, will act as a getter.
Set multiple resizable options at once by providing an options object.
Returns the .ui-resizable element.
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.
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>.