Skip to content

Commit 6b6e1d7

Browse files
scottgonzalezscottgonzalez
committed
Resizable demos: coding standards.
1 parent f02c41e commit 6b6e1d7

12 files changed

+176
-156
lines changed

‎demos/resizable/animate.html

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Resizable - Animate</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.resizable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#resizable { width: 150px; height: 150px; padding: 0.5em; }
1515
#resizable h3 { text-align: center; margin: 0; }
1616
.ui-resizable-helper { border: 1px dotted gray; }
1717
</style>
18-
<script type="text/javascript">
18+
<script>
1919
$(function() {
20-
$("#resizable").resizable({
20+
$( "#resizable" ).resizable({
2121
animate: true
2222
});
2323
});
2424
</script>
2525
</head>
2626
<body>
27+
2728
<div class="demo">
2829

2930
<div id="resizable" class="ui-widget-content">
@@ -32,10 +33,11 @@ <h3 class="ui-widget-header">Animate</h3>
3233

3334
</div><!-- End demo -->
3435

35-
<div class="demo-description">
3636

37-
<p>Animate the resize action using the <code>animate</code> 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>
3837

38+
<div class="demo-description">
39+
<p>Animate the resize action using the <code>animate</code> 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>
3940
</div><!-- End demo-description -->
41+
4042
</body>
4143
</html>

‎demos/resizable/aspect-ratio.html

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Resizable - Preserve aspect ratio</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.resizable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#resizable { width: 160px; height: 90px; padding: 0.5em; }
1515
#resizable h3 { text-align: center; margin: 0; }
1616
</style>
17-
<script type="text/javascript">
17+
<script>
1818
$(function() {
19-
$("#resizable").resizable({
20-
aspectRatio: 16/9
19+
$( "#resizable" ).resizable({
20+
aspectRatio: 16 / 9
2121
});
2222
});
2323
</script>
2424
</head>
2525
<body>
26+
2627
<div class="demo">
2728

2829
<div id="resizable" class="ui-widget-content">
@@ -31,10 +32,11 @@ <h3 class="ui-widget-header">Preserve aspect ratio</h3>
3132

3233
</div><!-- End demo -->
3334

34-
<div class="demo-description">
3535

36-
<p>Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the <code>aspectRatio</code> option to true, and optionally pass in a new ratio (i.e., 4/3)</p>
3736

37+
<div class="demo-description">
38+
<p>Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the <code>aspectRatio</code> option to true, and optionally pass in a new ratio (i.e., 4/3)</p>
3839
</div><!-- End demo-description -->
40+
3941
</body>
4042
</html>

‎demos/resizable/constrain-area.html

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Resizable - Constrain resize area</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.resizable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style\>
1414
#container { width: 300px; height: 300px; }
1515
#container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
1616
#resizable { background-position: top left; width: 150px; height: 150px; }
1717
#resizable, #container { padding: 0.5em; }
1818
</style>
19-
<script type="text/javascript">
19+
<script>
2020
$(function() {
21-
$("#resizable").resizable({
22-
containment: '#container'
21+
$( "#resizable" ).resizable({
22+
containment: "#container"
2323
});
2424
});
2525
</script>
2626
</head>
2727
<body>
28+
2829
<div class="demo">
2930

3031
<div id="container" class="ui-widget-content">
@@ -36,10 +37,11 @@ <h3 class="ui-widget-header">Resizable</h3>
3637

3738
</div><!-- End demo -->
3839

39-
<div class="demo-description">
4040

41-
<p>Define the boundaries of the resizable area. Use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
4241

42+
<div class="demo-description">
43+
<p>Define the boundaries of the resizable area. Use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
4344
</div><!-- End demo-description -->
45+
4446
</body>
4547
</html>

‎demos/resizable/default.html

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Resizable - Default functionality</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.resizable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#resizable { width: 150px; height: 150px; padding: 0.5em; }
1515
#resizable h3 { text-align: center; margin: 0; }
1616
</style>
17-
<script type="text/javascript">
17+
<script>
1818
$(function() {
19-
$("#resizable").resizable();
19+
$( "#resizable" ).resizable();
2020
});
2121
</script>
2222
</head>
2323
<body>
24+
2425
<div class="demo">
2526

2627
<div id="resizable" class="ui-widget-content">
@@ -29,10 +30,11 @@ <h3 class="ui-widget-header">Resizable</h3>
2930

3031
</div><!-- End demo -->
3132

32-
<div class="demo-description">
3333

34-
<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>
3534

35+
<div class="demo-description">
36+
<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>
3637
</div><!-- End demo-description -->
38+
3739
</body>
3840
</html>

‎demos/resizable/delay-start.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,33 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Resizable - Delay start</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.resizable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; }
1515
#resizable h3, #resizable2 h3 { text-align: center; margin: 0; }
1616
</style>
17-
<script type="text/javascript">
17+
<script>
1818
$(function() {
19-
$("#resizable").resizable({
19+
$( "#resizable" ).resizable({
2020
delay: 1000
2121
});
2222

23-
$("#resizable2").resizable({
23+
$( "#resizable2" ).resizable({
2424
distance: 40
2525
});
2626
});
2727
</script>
2828
</head>
2929
<body>
30+
3031
<div class="demo">
3132

3233
<h3 class="docs">Time delay (ms):</h3>
@@ -39,14 +40,13 @@ <h3 class="docs">Distance delay (px):</h3>
3940
<h3 class="ui-widget-header">Distance</h3>
4041
</div>
4142

42-
<!-- ADD DISTANCE DEMO -->
43-
4443
</div><!-- End demo -->
4544

46-
<div class="demo-description">
4745

48-
<p>Delay the start of resizng for a number of milliseconds with the <code>delay</code> option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option.</p>
4946

47+
<div class="demo-description">
48+
<p>Delay the start of resizng for a number of milliseconds with the <code>delay</code> option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option.</p>
5049
</div><!-- End demo-description -->
50+
5151
</body>
5252
</html>

‎demos/resizable/helper.html

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Resizable - Helper</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.resizable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#resizable { width: 150px; height: 150px; padding: 0.5em; }
1515
#resizable h3 { text-align: center; margin: 0; }
1616
.ui-resizable-helper { border: 2px dotted #00F; }
1717
</style>
18-
<script type="text/javascript">
18+
<script>
1919
$(function() {
20-
$("#resizable").resizable({
21-
helper: 'ui-resizable-helper'
20+
$( "#resizable" ).resizable({
21+
helper: "ui-resizable-helper"
2222
});
2323
});
2424
</script>
2525
</head>
2626
<body>
27+
2728
<div class="demo">
2829

2930
<div id="resizable" class="ui-widget-content">
@@ -32,10 +33,11 @@ <h3 class="ui-widget-header">Helper</h3>
3233

3334
</div><!-- End demo -->
3435

35-
<div class="demo-description">
3636

37-
<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p>
3837

38+
<div class="demo-description">
39+
<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p>
3940
</div><!-- End demo-description -->
41+
4042
</body>
4143
</html>

‎demos/resizable/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Resizable Demos</title>
6-
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
<link rel="stylesheet" href="../demos.css">
77
</head>
88
<body>
99

0 commit comments

Comments
 (0)