JavaScript Tutorial/jQuery/UI Resizable
Содержание
- 1 30. Animated resizable
- 2 30. containment: ".container", aspectRatio: true
- 3 30. Get resized height and width
- 4 30. ghost your resizable
- 5 30. jQuery UI Resizable - Animate
- 6 30. jQuery UI Resizable - Constrain resize area
- 7 30. jQuery UI Resizable - Default functionality
- 8 30. jQuery UI Resizable - Delay start
- 9 30. jQuery UI Resizable - Maximum / minimum size
- 10 30. jQuery UI Resizable - Preserve aspect ratio
- 11 30. jQuery UI Resizable - Snap to grid
- 12 30. jQuery UI Resizable - Synchronous resize
- 13 30. jQuery UI Resizable - Visual feedback
- 14 30. Set max Width, max Height, min width and min height
30. Animated resizable
<source lang="javascript">
<html lang="en"> <head>
<title></title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
var resizeOpts = {
helper: "proxy",
knobHandles: true,
animate: true,
animateDuration: "fast"
}
$(".resize").resizable(resizeOpts);
});
</script>
</head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse auctor ligula vel odio. Nam et sem vitae nibh convallis euismod. Aenean vitae urna quis augue adipiscing hendrerit. Nam faucibus. Phasellus eros. Ut bibendum eros at nibh. Sed erat. Aenean id enim vitae leo aliquet rutrum. Mauris fringilla euismod orci. Morbi tempus purus eget felis. Sed dui eros, tempor id, iaculis vel, pretium eget, nunc. Pellentesque vehicula tincidunt arcu. Ut a velit. In dapibus, lacus vitae lobortis dictum, libero pede venenatis magna, eu sagittis nunc erat sed ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus est dolor, mollis congue, ullamcorper eu, auctor ut, augue.</div> </div> </body> </html></source>
30. containment: ".container", aspectRatio: true
<source lang="javascript">
<html lang="en"> <head>
<title></title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
var resizeOpts = {
containment: ".container",
aspectRatio: true
}
$(".resize").resizable(resizeOpts);
});
</script>
</head> <body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse auctor ligula vel odio. Nam et sem vitae nibh convallis euismod. Aenean vitae urna quis augue adipiscing hendrerit. Nam faucibus. Phasellus eros. Ut bibendum eros at nibh. Sed erat. Aenean id enim vitae leo aliquet rutrum. Mauris fringilla euismod orci. Morbi tempus purus eget felis. Sed dui eros, tempor id, iaculis vel, pretium eget, nunc. Pellentesque vehicula tincidunt arcu. Ut a velit. In dapibus, lacus vitae lobortis dictum, libero pede venenatis magna, eu sagittis nunc erat sed ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus est dolor, mollis congue, ullamcorper eu, auctor ut, augue.
</div>
</body> </html></source>
30. Get resized height and width
<source lang="javascript">
<html lang="en"> <head>
<title></title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
var resizeOpts = {
stop: reportNewSize
};
function reportNewSize() {
alert($(this).height() + " pixels high, and " + $(this).width() + " pixels wide");
}
$(".resize").resizable(resizeOpts);
});
</script>
</head> <body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse auctor ligula vel odio. Nam et sem vitae nibh convallis euismod. Aenean vitae urna quis augue adipiscing hendrerit. Nam faucibus. Phasellus eros. Ut bibendum eros at nibh. Sed erat. Aenean id enim vitae leo aliquet rutrum. Mauris fringilla euismod orci. Morbi tempus purus eget felis. Sed dui eros, tempor id, iaculis vel, pretium eget, nunc. Pellentesque vehicula tincidunt arcu. Ut a velit. In dapibus, lacus vitae lobortis dictum, libero pede venenatis magna, eu sagittis nunc erat sed ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus est dolor, mollis congue, ullamcorper eu, auctor ut, augue.
</div>
</body> </html></source>
30. ghost your resizable
<source lang="javascript">
<html lang="en"> <head>
<title></title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
var resizeOpts = {
ghost: true
}
$(".resize").resizable(resizeOpts);
});
</script>
</head> <body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse auctor ligula vel odio. Nam et sem vitae nibh convallis euismod. Aenean vitae urna quis augue adipiscing hendrerit. Nam faucibus. Phasellus eros. Ut bibendum eros at nibh. Sed erat. Aenean id enim vitae leo aliquet rutrum. Mauris fringilla euismod orci. Morbi tempus purus eget felis. Sed dui eros, tempor id, iaculis vel, pretium eget, nunc. Pellentesque vehicula tincidunt arcu. Ut a velit. In dapibus, lacus vitae lobortis dictum, libero pede venenatis magna, eu sagittis nunc erat sed ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus est dolor, mollis congue, ullamcorper eu, auctor ut, augue.
</div>
</body> </html></source>
30. jQuery UI Resizable - Animate
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Resizable - Animate</title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted gray; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
animate: true
});
});
</script>
</head> <body>
<p>Animate the resize action using the animate option (boolean). When this option is set to true, drag the outline to the desired location; the element animates to that size on drag stop.</p>
</body> </html></source>
30. jQuery UI Resizable - Constrain resize area
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Resizable - Constrain resize area</title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<style type="text/css">
#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 type="text/javascript">
$(function() {
$("#resizable").resizable({
containment: "#container"
});
});
</script>
</head> <body>
<p>Define the boundaries of the resizable area. Use the containment option to specify a parent DOM element or a jQuery selector, like "document."</p>
</body> </html></source>
30. jQuery UI Resizable - Default functionality
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Resizable - Default functionality</title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable();
});
</script>
</head> <body>
<p>Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.</p>
</body> </html></source>
30. jQuery UI Resizable - Delay start
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Resizable - Delay start</title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<style type="text/css">
#resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3, #resizable2 h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
delay: 1000
});
$("#resizable2").resizable({
distance: 40
});
});
</script>
</head> <body>
Time delay (ms):
Distance delay (px):
<p>Delay the start of resizng for a number of milliseconds with the delay option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the distance option.</p>
</body> </html></source>
30. jQuery UI Resizable - Maximum / minimum size
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Resizable - Maximum / minimum size</title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 200px; height: 150px; padding: 5px; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
maxHeight: 250,
maxWidth: 350,
minHeight: 150,
minWidth: 200
});
});
</script>
</head> <body>
<p>Limit the resizable element to a maximum or minimum height or width using the maxHeight, maxWidth, minHeight, and minWidth options.</p>
</body> </html></source>
30. jQuery UI Resizable - Preserve aspect ratio
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Resizable - Preserve aspect ratio</title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 160px; height: 90px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
aspectRatio: 16/9
});
});
</script>
</head> <body>
<p>Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the aspectRatio option to true, and optionally pass in a new ratio (i.e., 4/3)</p>
</body> </html></source>
30. jQuery UI Resizable - Snap to grid
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Resizable - Snap to grid</title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
grid: 50
});
});
</script>
</head> <body>
<p>Snap the resizable element to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option.</p>
</body> </html></source>
30. jQuery UI Resizable - Synchronous resize
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Resizable - Synchronous resize</title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<style type="text/css">
#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 type="text/javascript">
$(function() {
$("#resizable").resizable({
alsoResize: "#also"
});
$("#also").resizable();
});
</script>
</head> <body>
<p>Resize multiple elements simultaneously by clicking and dragging the sides of one. Pass a shared selector into the alsoResize option.</p>
</body> </html></source>
30. jQuery UI Resizable - Visual feedback
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Resizable - Visual feedback</title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-ghost { border: 1px dotted gray; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
ghost: true
});
});
</script>
</head> <body>
<p>Instead of showing the actual element during resize, set the ghost option to true to show a semi-transparent part of the element.</p>
</body> </html></source>
30. Set max Width, max Height, min width and min height
<source lang="javascript">
<html lang="en"> <head>
<title></title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<link type="text/css" href="js/demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
var resizeOpts = {
maxWidth: 500,
maxHeight: 500,
minWidth: 100,
minHeight: 100
}
$(".resize").resizable(resizeOpts);
});
</script>
</head> <body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse auctor ligula vel odio. Nam et sem vitae nibh convallis euismod. Aenean vitae urna quis augue adipiscing hendrerit. Nam faucibus. Phasellus eros. Ut bibendum eros at nibh. Sed erat. Aenean id enim vitae leo aliquet rutrum. Mauris fringilla euismod orci. Morbi tempus purus eget felis. Sed dui eros, tempor id, iaculis vel, pretium eget, nunc. Pellentesque vehicula tincidunt arcu. Ut a velit. In dapibus, lacus vitae lobortis dictum, libero pede venenatis magna, eu sagittis nunc erat sed ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus est dolor, mollis congue, ullamcorper eu, auctor ut, augue.
</div>
</body>
</html></source>