jQuery UI instance - Zoom (Resizable)
Use the mouse to change the size of the element.
For more details about the resizable interaction, see the API documentation resizable widgets (the Resizable the Widget) .
The default function
Enable resizable function on any DOM element. Drag the mouse to the right or bottom border to the desired width or height.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI scaling (Resizable) - The default function </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {width: 150px; height: 150px; padding: 0.5em;}
#resizable h3 {text-align: center; margin: 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ();
});
</ Script>
</ Head>
<Body>
<Div id = "resizable" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Zoom (Resizable) </ h3>
</ Div>
</ Body>
</ Html>
Animation
Use animate option (Boolean) enables scaling behavior of the animation. When this option is set to true, the outline drag to the desired location, stop dragging when the elements are animated to adjust the size.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI scaling (Resizable) - Anime </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {width: 150px; height: 150px; padding: 0.5em;}
#resizable h3 {text-align: center; margin: 0;}
.ui-resizable-helper {border: 1px dotted gray;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
animate: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "resizable" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Animation </ h3>
</ Div>
</ Body>
</ Html>
Limit the zoom area
Defined scaling boundaries. Use containment option to specify a parent DOM element or a jQuery selector, such as 'document.'.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI scaling (Resizable) - limit the zoom area </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#container {width: 300px; height: 300px;}
#container h3 {text-align: center; margin: 0; margin-bottom: 10px;}
#resizable {background-position: top left; width: 150px; height: 150px;}
#resizable, #container {padding: 0.5em;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
containment: "#container"
});
});
</ Script>
</ Head>
<Body>
<Div id = "container" class = "ui-widget-content">
<H3 class = "ui-widget-header"> limit </ h3>
<Div id = "resizable" class = "ui-state-active">
<H3 class = "ui-widget-header"> Zoom (Resizable) </ h3>
</ Div>
</ Div>
</ Body>
</ Html>
Delayed start
By delay delay milliseconds begin scaling option. By distance option is pressed and drag the cursor to the specified pixel before allowing scaling.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI scaling (Resizable) - delayed start </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable, # resizable2 {width: 150px; height: 150px; padding: 0.5em;}
#resizable h3, # resizable2 h3 {text-align: center; margin: 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
delay: 1000
});
$ ( "# Resizable2") .resizable ({
distance: 40
});
});
</ Script>
</ Head>
<Body>
<H3 class = "docs"> Time Delay (ms): </ h3>
<Div id = "resizable" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Time </ h3>
</ Div>
<H3 class = "docs"> distance delay (px): </ h3>
<Div id = "resizable2" class = "ui-widget-content">
<H3 class = "ui-widget-header"> distance </ h3>
</ Div>
</ Body>
</ Html>
assistant
By setting the helper option to a CSS class, when zoomed to display only the contour elements.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI scaling (Resizable) - assistant </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {width: 150px; height: 150px; padding: 0.5em;}
#resizable h3 {text-align: center; margin: 0;}
.ui-resizable-helper {border: 2px dotted # 00F;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
helper: "ui-resizable-helper"
});
});
</ Script>
</ Head>
<Body>
<Div id = "resizable" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Assistant </ h3>
</ Div>
</ Body>
</ Html>
Maximum / minimum size
Use maxHeight , maxWidth , minHeight and minWidth option limits the maximum or minimum element resizable height or width.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI scaling (Resizable) - Maximum / minimum size </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {width: 200px; height: 150px; padding: 5px;}
#resizable h3 {text-align: center; margin: 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
maxHeight: 250,
maxWidth: 350,
minHeight: 150,
minWidth: 200
});
});
</ Script>
</ Head>
<Body>
<Div id = "resizable" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Zoom In / Out </ h3>
</ Div>
</ Body>
</ Html>
Maintain aspect ratio
Maintain the current aspect ratio or set a new limit to the aspect ratio scaling. Setting aspectRatio option is true, and optionally deliver a new rate (for example, 4/3).
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI scaling (Resizable) - Maintain aspect ratio </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {width: 160px; height: 90px; padding: 0.5em;}
#resizable h3 {text-align: center; margin: 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
aspectRatio: 16/9
});
});
</ Script>
</ Head>
<Body>
<Div id = "resizable" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Maintain aspect ratio </ h3>
</ Div>
</ Body>
</ Html>
Snap to Grid
Resizable elements aligned to the grid. By grid size option to set the grid cells (pixels height and width).
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI scaling (Resizable) - Snap to Grid </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {width: 150px; height: 150px; padding: 0.5em;}
#resizable h3 {text-align: center; margin: 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
grid: 50
});
});
</ Script>
</ Head>
<Body>
<Div id = "resizable" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Grid </ h3>
</ Div>
</ Body>
</ Html>
Synchronous Zoom
By clicking and dragging an element of edge to resize multiple elements simultaneously. To alsoResize options passed a shared selector.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI scaling (Resizable) - Synchronous Zoom </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {background-position: top left;}
#resizable, #also {width: 150px; height: 120px; padding: 0.5em;}
#resizable h3, #also h3 {text-align: center; margin: 0;}
#also {margin-top: 1em;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
alsoResize: "#also"
});
$ ( "#also") .resizable ();
});
</ Script>
</ Head>
<Body>
<Div id = "resizable" class = "ui-widget-header">
<H3 class = "ui-state-active"> Zoom </ h3>
</ Div>
<Div id = "also" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Zoom sync </ h3>
</ Div>
</ Body>
</ Html>
Text Box
Scalable text box.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI scaling (Resizable) - Box </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-resizable-se {
bottom: 17px;
}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
handles: "se"
});
});
</ Script>
</ Head>
<Body>
<Textarea id = "resizable" rows = "5" cols = "20"> </ textarea>
</ Body>
</ Html>
Visual feedback
By setting the ghost option is true, the element can be displayed in a translucent during zooming, instead of displaying an actual element.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI scaling (Resizable) - visual feedback </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {width: 150px; height: 150px; padding: 0.5em;}
#resizable h3 {text-align: center; margin: 0;}
.ui-resizable-ghost {border: 1px dotted gray;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
ghost: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "resizable" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Ghost </ h3>
</ Div>
</ Body>
</ Html>