Skip to content
Permalink
Browse files

Resizable: Added demos for alsoResize, animate, aspectRation, contain…

…ment, delay, distance, ghost, grid, max height/width, min height/width.
  • Loading branch information...
scottgonzalez committed Dec 29, 2008
1 parent 7596969 commit c0de47d1f64744e96ca08aed891f1ab27fed4831
@@ -0,0 +1,29 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Resizable - Also Resize Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
alsoResize: '#also'
});
});
</script>
</head>
<body>

<div id="resizable" style="width: 200px; height: 200px; background-color: #f00;">
<p>Resize me</p>
</div>

<div id="also" style="width: 100px; height: 100px; background-color: #0f0; position: absolute, top: 300px;">
<p>I will resize with the other div!</p>
</div>

</body>
</html>
@@ -0,0 +1,25 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Resizable - Animate Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
animate: true
});
});
</script>
</head>
<body>

<div id="resizable" style="width: 200px; height: 200px; background-color: #f00;">
<p>Resize me</p>
</div>

</body>
</html>
@@ -0,0 +1,25 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Resizable - Aspect Ratio Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
aspectRatio: 2
});
});
</script>
</head>
<body>

<div id="resizable" style="width: 400px; height: 200px; background-color: #f00;">
<p>Resize me</p>
</div>

</body>
</html>
@@ -0,0 +1,27 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Resizable - Containment Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
containment: '#container'
});
});
</script>
</head>
<body>

<div id="container" style="width: 600px; height: 600px; background-color: #0f0;">
<div id="resizable" style="width: 200px; height: 200px; background-color: #f00;">
<p>Resize me</p>
</div>
</div>

</body>
</html>
@@ -0,0 +1,23 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Resizable - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript">
$(function() {
$("#resizable").resizable();
});
</script>
</head>
<body>

<div id="resizable" style="width: 200px; height: 200px; background-color: #f00;">
<p>Resize me</p>
</div>

</body>
</html>
@@ -0,0 +1,27 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Resizable - Delay Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
delay: 1000
});
});
</script>
</head>
<body>

<p>You must drag the div for at least 1 second before it will resize.</p>

<div id="resizable" style="width: 200px; height: 200px; background-color: #f00;">
<p>Resize me</p>
</div>

</body>
</html>
@@ -0,0 +1,27 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Resizable - Distance Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
distance: 40
});
});
</script>
</head>
<body>

<p>You must drag the div at least 40 pixels before it will resize.</p>

<div id="resizable" style="width: 200px; height: 200px; background-color: #f00;">
<p>Resize me</p>
</div>

</body>
</html>
@@ -0,0 +1,25 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Resizable - Ghost Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
ghost: true
});
});
</script>
</head>
<body>

<div id="resizable" style="width: 200px; height: 200px; background-color: #f00;">
<p>Resize me</p>
</div>

</body>
</html>
@@ -0,0 +1,25 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Resizable - Grid Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
grid: 50
});
});
</script>
</head>
<body>

<div id="resizable" style="width: 200px; height: 200px; background-color: #f00;">
<p>Resize me</p>
</div>

</body>
</html>
@@ -9,6 +9,16 @@
<dl class="nav">
<dt>Resizable</dt>
<dd><a href="default.html">Default</a></dd>
<dd><a href="alsoresize.html">Also Resize</a></dd>
<dd><a href="animate.html">Animate</a></dd>
<dd><a href="aspectratio.html">Aspect Ratio</a></dd>
<dd><a href="containment.html">Containment</a></dd>
<dd><a href="delay.html">Delay</a></dd>
<dd><a href="distance.html">Distance</a></dd>
<dd><a href="ghost.html">Ghost</a></dd>
<dd><a href="grid.html">Grid</a></dd>
<dd><a href="max.html">Max Height / Width</a></dd>
<dd><a href="min.html">Min Height / Width</a></dd>
</dl>

</body>
@@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Resizable - Max Height / Width Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
maxHeight: 400,
maxWidth: 600
});
});
</script>
</head>
<body>

<div id="resizable" style="width: 200px; height: 200px; background-color: #f00;">
<p>Resize me</p>
</div>

</body>
</html>
@@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Resizable - Min Height / Width Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
minHeight: 50,
minWidth: 100
});
});
</script>
</head>
<body>

<div id="resizable" style="width: 200px; height: 200px; background-color: #f00;">
<p>Resize me</p>
</div>

</body>
</html>

0 comments on commit c0de47d

Please sign in to comment.
You can’t perform that action at this time.