The best jQuery UI instance - Zoom (Resizable) Tutorial In 2024, In this tutorial you can learn The default function,Animation,Limit the zoom area,Delayed start,assistant,Maximum / minimum size,Maintain aspect ratio,Snap to Grid,Synchronous Zoom,Text Box,Visual feedback,
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) .
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>
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>
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>
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>
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>
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 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>
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>
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>
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>
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>