-
Notifications
You must be signed in to change notification settings - Fork 5.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Maggie Costello Wachs
committed
Jan 16, 2009
1 parent
479eff1
commit 3a65a63
Showing
10 changed files
with
299 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Resizable - Preserve aspect ratio</title> | ||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
<script type="text/javascript" src="../../jquery-1.3.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> | ||
<link type="text/css" href="../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> | ||
<div class="demo"> | ||
|
||
<div id="resizable" class="ui-widget-content"> | ||
<h3 class="ui-widget-header">Preserve aspect ratio</h3> | ||
</div> | ||
|
||
</div><!-- End demo --> | ||
|
||
<div class="demo-description"> | ||
|
||
<p>Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the <strong>aspectRatio</strong> option to true, and optionally pass in a new ratio (i.e., 4/3)</p> | ||
|
||
</div><!-- End demo-description --> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Resizable - Constrain resize area</title> | ||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
<script type="text/javascript" src="../../jquery-1.3.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> | ||
<link type="text/css" href="../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> | ||
<div class="demo"> | ||
|
||
<div id="container" class="ui-widget-content"> | ||
<h3 class="ui-widget-header">Containment</h3> | ||
<div id="resizable" class="ui-state-active"> | ||
<h3 class="ui-widget-header">Resizable</h3> | ||
</div> | ||
</div> | ||
|
||
</div><!-- End demo --> | ||
|
||
<div class="demo-description"> | ||
|
||
<p>Define the boundaries of the resizable area. Use the <strong>containment</strong> option to specify a parent DOM element or a jQuery selector, like 'document.'</p> | ||
|
||
</div><!-- End demo-description --> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Resizable - Delay start</title> | ||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
<script type="text/javascript" src="../../jquery-1.3.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> | ||
<link type="text/css" href="../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> | ||
<div class="demo"> | ||
|
||
<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> | ||
|
||
<!-- ADD DISTANCE DEMO --> | ||
|
||
</div><!-- End demo --> | ||
|
||
<div class="demo-description"> | ||
|
||
<p>Delay the start of resizng for a number of milliseconds with the <strong>delay</strong> option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the <strong>distance</strong> option.</p> | ||
|
||
</div><!-- End demo-description --> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Resizable - Maximum / minimum size</title> | ||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
<script type="text/javascript" src="../../jquery-1.3.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> | ||
<link type="text/css" href="../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> | ||
<div class="demo"> | ||
|
||
<div id="resizable" class="ui-widget-content"> | ||
<h3 class="ui-widget-header">Resize larger / smaller</h3> | ||
</div> | ||
|
||
</div><!-- End demo --> | ||
|
||
<div class="demo-description"> | ||
|
||
<p>Limit the resizable element to a maximum or minimum height or width using the <strong>maxHeight</strong>, <strong>maxWidth</strong>, <strong>minHeight</strong>, and <strong>minWidth</strong> options.</p> | ||
|
||
</div><!-- End demo-description --> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Resizable - Snap to grid</title> | ||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
<script type="text/javascript" src="../../jquery-1.3.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> | ||
<link type="text/css" href="../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> | ||
<div class="demo"> | ||
|
||
<div id="resizable" class="ui-widget-content"> | ||
<h3 class="ui-widget-header">Grid</h3> | ||
</div> | ||
|
||
</div><!-- End demo --> | ||
|
||
<div class="demo-description"> | ||
|
||
<p>Snap the resizable element to a grid. Set the dimensions of grid cells (height and width in pixels) with the <strong>grid</strong> option.</p> | ||
|
||
</div><!-- End demo-description --> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Resizable - Synchronous resize</title> | ||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
<script type="text/javascript" src="../../jquery-1.3.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> | ||
<link type="text/css" href="../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> | ||
<div class="demo"> | ||
|
||
<div id="resizable" class="ui-widget-header"> | ||
<h3 class="ui-state-active">Resize</h3> | ||
</div> | ||
|
||
<div id="also" class="ui-widget-content"> | ||
<h3 class="ui-widget-header">will also resize</h3> | ||
</div> | ||
|
||
</div><!-- End demo --> | ||
|
||
<div class="demo-description"> | ||
|
||
<p>Resize multiple elements simultaneously by clicking and dragging the sides of one. Pass a shared selector into the <strong>alsoResize</strong> option.</p> | ||
|
||
</div><!-- End demo-description --> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Resizable - Visual feedback</title> | ||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
<script type="text/javascript" src="../../jquery-1.3.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> | ||
<link type="text/css" href="../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> | ||
<div class="demo"> | ||
|
||
<div id="resizable" class="ui-widget-content"> | ||
<h3 class="ui-widget-header">Ghost</h3> | ||
</div> | ||
|
||
</div><!-- End demo --> | ||
|
||
<div class="demo-description"> | ||
|
||
<p>Instead of showing the actual element during resize, set the <strong>ghost</strong> option to true to show a semi-transparent part of the element.</p> | ||
|
||
</div><!-- End demo-description --> | ||
</body> | ||
</html> |