Skip to content

Commit d13f81d

Browse files
committed
Effects: Update demos to use AMD
Ref #10119
1 parent 6acdd4a commit d13f81d

File tree

10 files changed

+21
-106
lines changed

10 files changed

+21
-106
lines changed

demos/effect/addClass.html

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,15 @@
44
<meta charset="utf-8">
55
<title>jQuery UI Effects - addClass demo</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
7-
<script src="../../external/jquery/jquery.js"></script>
8-
<script src="../../ui/effect.js"></script>
97
<link rel="stylesheet" href="../demos.css">
108
<style>
119
.toggler { width: 500px; height: 200px; position: relative; }
1210
#button { padding: .5em 1em; text-decoration: none; }
1311
#effect { width: 240px; padding: 1em; border: 1px solid #000; background: #eee; color: #333; }
1412
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 120px; padding: 30px; margin: 10px; font-size: 1.1em; }
1513
</style>
16-
<script>
17-
$(function() {
14+
<script src="../../external/requirejs/require.js"></script>
15+
<script src="../bootstrap.js">
1816
$( "#button" ).on( "click", function() {
1917
$( "#effect" ).addClass( "newClass", 1000, callback );
2018
});
@@ -24,7 +22,6 @@
2422
$( "#effect" ).removeClass( "newClass" );
2523
}, 1500 );
2624
}
27-
});
2825
</script>
2926
</head>
3027
<body>

demos/effect/animate.html

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,15 @@
44
<meta charset="utf-8">
55
<title>jQuery UI Effects - Animate demo</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
7-
<script src="../../external/jquery/jquery.js"></script>
8-
<script src="../../ui/effect.js"></script>
97
<link rel="stylesheet" href="../demos.css">
108
<style>
119
.toggler { width: 500px; height: 200px; position: relative; }
1210
#button { padding: .5em 1em; text-decoration: none; }
1311
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
1412
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
1513
</style>
16-
<script>
17-
$(function() {
14+
<script src="../../external/requirejs/require.js"></script>
15+
<script src="../bootstrap.js">
1816
var state = true;
1917
$( "#button" ).on( "click", function() {
2018
if ( state ) {
@@ -32,7 +30,6 @@
3230
}
3331
state = !state;
3432
});
35-
});
3633
</script>
3734
</head>
3835
<body>

demos/effect/default.html

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,6 @@
44
<meta charset="utf-8">
55
<title>jQuery UI Effects - Effect demo</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
7-
<script src="../../external/jquery/jquery.js"></script>
8-
<script src="../../ui/effect.js"></script>
9-
<script src="../../ui/effect-blind.js"></script>
10-
<script src="../../ui/effect-bounce.js"></script>
11-
<script src="../../ui/effect-clip.js"></script>
12-
<script src="../../ui/effect-drop.js"></script>
13-
<script src="../../ui/effect-explode.js"></script>
14-
<script src="../../ui/effect-fade.js"></script>
15-
<script src="../../ui/effect-fold.js"></script>
16-
<script src="../../ui/effect-highlight.js"></script>
17-
<script src="../../ui/effect-puff.js"></script>
18-
<script src="../../ui/effect-pulsate.js"></script>
19-
<script src="../../ui/effect-scale.js"></script>
20-
<script src="../../ui/effect-shake.js"></script>
21-
<script src="../../ui/effect-size.js"></script>
22-
<script src="../../ui/effect-slide.js"></script>
23-
<script src="../../ui/effect-transfer.js"></script>
247
<link rel="stylesheet" href="../demos.css">
258
<style>
269
.toggler { width: 500px; height: 200px; position: relative; }
@@ -29,8 +12,8 @@
2912
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
3013
.ui-effects-transfer { border: 2px dotted gray; }
3114
</style>
32-
<script>
33-
$(function() {
15+
<script src="../../external/requirejs/require.js"></script>
16+
<script src="../bootstrap.js" data-modules="effects-all">
3417
// run the currently selected effect
3518
function runEffect() {
3619
// get effect type from
@@ -63,7 +46,6 @@
6346
runEffect();
6447
return false;
6548
});
66-
});
6749
</script>
6850
</head>
6951
<body>

demos/effect/easing.html

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,15 @@
44
<meta charset="utf-8">
55
<title>jQuery UI Effects - Easing demo</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
7-
<script src="../../external/jquery/jquery.js"></script>
8-
<script src="../../ui/effect.js"></script>
97
<link rel="stylesheet" href="../demos.css">
108
<style>
119
.graph {
1210
float: left;
1311
margin-left: 10px;
1412
}
1513
</style>
16-
<script>
17-
$(function() {
14+
<script src="../../external/requirejs/require.js"></script>
15+
<script src="../bootstrap.js">
1816
if ( !$( "<canvas>" )[0].getContext ) {
1917
$( "<div>" ).text(
2018
"Your browser doesn't support canvas, which is required for this demo."
@@ -88,7 +86,6 @@
8886

8987
graph.width( width ).height( height + text.height() + 10 );
9088
});
91-
});
9289
</script>
9390
</head>
9491
<body>

demos/effect/hide.html

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,15 @@
44
<meta charset="utf-8">
55
<title>jQuery UI Effects - Hide Demo</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
7-
<script src="../../external/jquery/jquery.js"></script>
8-
<script src="../../ui/effect.js"></script>
9-
<script src="../../ui/effect-blind.js"></script>
10-
<script src="../../ui/effect-bounce.js"></script>
11-
<script src="../../ui/effect-clip.js"></script>
12-
<script src="../../ui/effect-drop.js"></script>
13-
<script src="../../ui/effect-explode.js"></script>
14-
<script src="../../ui/effect-fade.js"></script>
15-
<script src="../../ui/effect-fold.js"></script>
16-
<script src="../../ui/effect-highlight.js"></script>
17-
<script src="../../ui/effect-puff.js"></script>
18-
<script src="../../ui/effect-pulsate.js"></script>
19-
<script src="../../ui/effect-scale.js"></script>
20-
<script src="../../ui/effect-shake.js"></script>
21-
<script src="../../ui/effect-size.js"></script>
22-
<script src="../../ui/effect-slide.js"></script>
237
<link rel="stylesheet" href="../demos.css">
248
<style>
259
.toggler { width: 500px; height: 200px; }
2610
#button { padding: .5em 1em; text-decoration: none; }
2711
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
2812
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
2913
</style>
30-
<script>
31-
$(function() {
14+
<script src="../../external/requirejs/require.js"></script>
15+
<script src="../bootstrap.js" data-modules="effects-all">
3216
// run the currently selected effect
3317
function runEffect() {
3418
// get effect type from
@@ -58,7 +42,6 @@
5842
$( "#button" ).on( "click", function() {
5943
runEffect();
6044
});
61-
});
6245
</script>
6346
</head>
6447
<body>

demos/effect/removeClass.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
#effect { position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
1414
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
1515
</style>
16-
<script>
17-
$(function() {
16+
<script src="../../external/requirejs/require.js"></script>
17+
<script src="../bootstrap.js">
1818
$( "#button" ).on( "click", function() {
1919
$( "#effect" ).removeClass( "newClass", 1000, callback );
2020
});
@@ -24,7 +24,6 @@
2424
$( "#effect" ).addClass( "newClass" );
2525
}, 1500 );
2626
}
27-
});
2827
</script>
2928
</head>
3029
<body>

demos/effect/show.html

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,15 @@
44
<meta charset="utf-8">
55
<title>jQuery UI Effects - Show Demo</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
7-
<script src="../../external/jquery/jquery.js"></script>
8-
<script src="../../ui/effect.js"></script>
9-
<script src="../../ui/effect-blind.js"></script>
10-
<script src="../../ui/effect-bounce.js"></script>
11-
<script src="../../ui/effect-clip.js"></script>
12-
<script src="../../ui/effect-drop.js"></script>
13-
<script src="../../ui/effect-explode.js"></script>
14-
<script src="../../ui/effect-fade.js"></script>
15-
<script src="../../ui/effect-fold.js"></script>
16-
<script src="../../ui/effect-highlight.js"></script>
17-
<script src="../../ui/effect-puff.js"></script>
18-
<script src="../../ui/effect-pulsate.js"></script>
19-
<script src="../../ui/effect-scale.js"></script>
20-
<script src="../../ui/effect-shake.js"></script>
21-
<script src="../../ui/effect-size.js"></script>
22-
<script src="../../ui/effect-slide.js"></script>
237
<link rel="stylesheet" href="../demos.css">
248
<style>
259
.toggler { width: 500px; height: 200px; }
2610
#button { padding: .5em 1em; text-decoration: none; }
2711
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
2812
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
2913
</style>
30-
<script>
31-
$(function() {
14+
<script src="../../external/requirejs/require.js"></script>
15+
<script src="../bootstrap.js" data-modules="effects-all">
3216
// run the currently selected effect
3317
function runEffect() {
3418
// get effect type from
@@ -60,7 +44,6 @@
6044
});
6145

6246
$( "#effect" ).hide();
63-
});
6447
</script>
6548
</head>
6649
<body>

demos/effect/switchClass.html

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@
44
<meta charset="utf-8">
55
<title>jQuery UI Effects - switchClass Demo</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
7-
<script src="../../external/jquery/jquery.js"></script>
8-
<script src="../../ui/effect.js"></script>
97
<link rel="stylesheet" href="../demos.css">
108
<style>
119
.toggler { width: 500px; height: 200px; position: relative; }
@@ -14,13 +12,12 @@
1412
.newClass { width: 240px; padding: 1em; letter-spacing: 0; margin: 0; }
1513
.anotherNewClass { text-indent: 40px; letter-spacing: .2em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.1em; }
1614
</style>
17-
<script>
18-
$(function() {
19-
$( "#button" ).on( "click", function(){
15+
<script src="../../external/requirejs/require.js"></script>
16+
<script src="../bootstrap.js">
17+
$( "#button" ).on( "click", function() {
2018
$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
2119
$( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 );
2220
});
23-
});
2421
</script>
2522
</head>
2623
<body>

demos/effect/toggle.html

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,6 @@
44
<meta charset="utf-8">
55
<title>jQuery UI Effects - Toggle Demo</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
7-
<script src="../../external/jquery/jquery.js"></script>
8-
<script src="../../ui/effect.js"></script>
9-
<script src="../../ui/effect-blind.js"></script>
10-
<script src="../../ui/effect-bounce.js"></script>
11-
<script src="../../ui/effect-clip.js"></script>
12-
<script src="../../ui/effect-drop.js"></script>
13-
<script src="../../ui/effect-explode.js"></script>
14-
<script src="../../ui/effect-fade.js"></script>
15-
<script src="../../ui/effect-fold.js"></script>
16-
<script src="../../ui/effect-highlight.js"></script>
17-
<script src="../../ui/effect-puff.js"></script>
18-
<script src="../../ui/effect-pulsate.js"></script>
19-
<script src="../../ui/effect-scale.js"></script>
20-
<script src="../../ui/effect-shake.js"></script>
21-
<script src="../../ui/effect-size.js"></script>
22-
<script src="../../ui/effect-slide.js"></script>
237
<link rel="stylesheet" href="../demos.css">
248
<style>
259
.toggler {
@@ -42,8 +26,8 @@
4226
text-align: center;
4327
}
4428
</style>
45-
<script>
46-
$(function() {
29+
<script src="../../external/requirejs/require.js"></script>
30+
<script src="../bootstrap.js" data-modules="effects-all">
4731
// run the currently selected effect
4832
function runEffect() {
4933
// get effect type from
@@ -66,7 +50,6 @@
6650
$( "#button" ).on( "click", function() {
6751
runEffect();
6852
});
69-
});
7053
</script>
7154
</head>
7255
<body>

demos/effect/toggleClass.html

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,18 @@
44
<meta charset="utf-8">
55
<title>jQuery UI Effects - toggleClass Demo</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
7-
<script src="../../external/jquery/jquery.js"></script>
8-
<script src="../../ui/effect.js"></script>
97
<link rel="stylesheet" href="../demos.css">
108
<style>
119
.toggler { width: 500px; height: 200px; position: relative; }
1210
#button { padding: .5em 1em; text-decoration: none; }
1311
#effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
1412
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
1513
</style>
16-
<script>
17-
$(function() {
14+
<script src="../../external/requirejs/require.js"></script>
15+
<script src="../bootstrap.js">
1816
$( "#button" ).on( "click", function() {
1917
$( "#effect" ).toggleClass( "newClass", 1000 );
2018
});
21-
});
2219
</script>
2320
</head>
2421
<body>

0 commit comments

Comments
 (0)