aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlexander Schmitz <arschmitz@gmail.com>2015-06-30 18:57:51 -0400
committerAlexander Schmitz <arschmitz@gmail.com>2015-07-21 11:00:41 -0400
commitd13f81d88a18836844ea4dc0f4e572fe07dafbb0 (patch)
tree3b64d66e93592c701f095621b40b89576c4c161d
parent6acdd4a44447d4a4a002284b82c9e4e3e9df009b (diff)
downloadjquery-ui-d13f81d88a18836844ea4dc0f4e572fe07dafbb0.tar.gz
jquery-ui-d13f81d88a18836844ea4dc0f4e572fe07dafbb0.zip
Effects: Update demos to use AMD
Ref #10119
Diffstat
-rw-r--r--demos/effect/addClass.html7
-rw-r--r--demos/effect/animate.html7
-rw-r--r--demos/effect/default.html22
-rw-r--r--demos/effect/easing.html7
-rw-r--r--demos/effect/hide.html21
-rw-r--r--demos/effect/removeClass.html5
-rw-r--r--demos/effect/show.html21
-rw-r--r--demos/effect/switchClass.html9
-rw-r--r--demos/effect/toggle.html21
-rw-r--r--demos/effect/toggleClass.html7
10 files changed, 21 insertions, 106 deletions
diff --git a/demos/effect/addClass.html b/demos/effect/addClass.html
index 915a72f2d..09de61312 100644
--- a/demos/effect/addClass.html
+++ b/demos/effect/addClass.html
@@ -4,8 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Effects - addClass demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
- <script src="../../external/jquery/jquery.js"></script>
- <script src="../../ui/effect.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
@@ -13,8 +11,8 @@
#effect { width: 240px; padding: 1em; border: 1px solid #000; background: #eee; color: #333; }
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 120px; padding: 30px; margin: 10px; font-size: 1.1em; }
</style>
- <script>
- $(function() {
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
$( "#button" ).on( "click", function() {
$( "#effect" ).addClass( "newClass", 1000, callback );
});
@@ -24,7 +22,6 @@
$( "#effect" ).removeClass( "newClass" );
}, 1500 );
}
- });
</script>
</head>
<body>
diff --git a/demos/effect/animate.html b/demos/effect/animate.html
index 853b72326..603e93fe9 100644
--- a/demos/effect/animate.html
+++ b/demos/effect/animate.html
@@ -4,8 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Effects - Animate demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
- <script src="../../external/jquery/jquery.js"></script>
- <script src="../../ui/effect.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
@@ -13,8 +11,8 @@
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
- <script>
- $(function() {
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
var state = true;
$( "#button" ).on( "click", function() {
if ( state ) {
@@ -32,7 +30,6 @@
}
state = !state;
});
- });
</script>
</head>
<body>
diff --git a/demos/effect/default.html b/demos/effect/default.html
index 624318f22..bd28652a6 100644
--- a/demos/effect/default.html
+++ b/demos/effect/default.html
@@ -4,23 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Effects - Effect demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
- <script src="../../external/jquery/jquery.js"></script>
- <script src="../../ui/effect.js"></script>
- <script src="../../ui/effect-blind.js"></script>
- <script src="../../ui/effect-bounce.js"></script>
- <script src="../../ui/effect-clip.js"></script>
- <script src="../../ui/effect-drop.js"></script>
- <script src="../../ui/effect-explode.js"></script>
- <script src="../../ui/effect-fade.js"></script>
- <script src="../../ui/effect-fold.js"></script>
- <script src="../../ui/effect-highlight.js"></script>
- <script src="../../ui/effect-puff.js"></script>
- <script src="../../ui/effect-pulsate.js"></script>
- <script src="../../ui/effect-scale.js"></script>
- <script src="../../ui/effect-shake.js"></script>
- <script src="../../ui/effect-size.js"></script>
- <script src="../../ui/effect-slide.js"></script>
- <script src="../../ui/effect-transfer.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
@@ -29,8 +12,8 @@
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
</style>
- <script>
- $(function() {
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js" data-modules="effects-all">
// run the currently selected effect
function runEffect() {
// get effect type from
@@ -63,7 +46,6 @@
runEffect();
return false;
});
- });
</script>
</head>
<body>
diff --git a/demos/effect/easing.html b/demos/effect/easing.html
index 26d0a96b5..5985dc699 100644
--- a/demos/effect/easing.html
+++ b/demos/effect/easing.html
@@ -4,8 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Effects - Easing demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
- <script src="../../external/jquery/jquery.js"></script>
- <script src="../../ui/effect.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.graph {
@@ -13,8 +11,8 @@
margin-left: 10px;
}
</style>
- <script>
- $(function() {
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
if ( !$( "<canvas>" )[0].getContext ) {
$( "<div>" ).text(
"Your browser doesn't support canvas, which is required for this demo."
@@ -88,7 +86,6 @@
graph.width( width ).height( height + text.height() + 10 );
});
- });
</script>
</head>
<body>
diff --git a/demos/effect/hide.html b/demos/effect/hide.html
index b19ec0209..1fcd6477e 100644
--- a/demos/effect/hide.html
+++ b/demos/effect/hide.html
@@ -4,22 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Effects - Hide Demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
- <script src="../../external/jquery/jquery.js"></script>
- <script src="../../ui/effect.js"></script>
- <script src="../../ui/effect-blind.js"></script>
- <script src="../../ui/effect-bounce.js"></script>
- <script src="../../ui/effect-clip.js"></script>
- <script src="../../ui/effect-drop.js"></script>
- <script src="../../ui/effect-explode.js"></script>
- <script src="../../ui/effect-fade.js"></script>
- <script src="../../ui/effect-fold.js"></script>
- <script src="../../ui/effect-highlight.js"></script>
- <script src="../../ui/effect-puff.js"></script>
- <script src="../../ui/effect-pulsate.js"></script>
- <script src="../../ui/effect-scale.js"></script>
- <script src="../../ui/effect-shake.js"></script>
- <script src="../../ui/effect-size.js"></script>
- <script src="../../ui/effect-slide.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler { width: 500px; height: 200px; }
@@ -27,8 +11,8 @@
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
- <script>
- $(function() {
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js" data-modules="effects-all">
// run the currently selected effect
function runEffect() {
// get effect type from
@@ -58,7 +42,6 @@
$( "#button" ).on( "click", function() {
runEffect();
});
- });
</script>
</head>
<body>
diff --git a/demos/effect/removeClass.html b/demos/effect/removeClass.html
index f4a902185..0980bae83 100644
--- a/demos/effect/removeClass.html
+++ b/demos/effect/removeClass.html
@@ -13,8 +13,8 @@
#effect { position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
</style>
- <script>
- $(function() {
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
$( "#button" ).on( "click", function() {
$( "#effect" ).removeClass( "newClass", 1000, callback );
});
@@ -24,7 +24,6 @@
$( "#effect" ).addClass( "newClass" );
}, 1500 );
}
- });
</script>
</head>
<body>
diff --git a/demos/effect/show.html b/demos/effect/show.html
index f95c513ae..4bb0919e4 100644
--- a/demos/effect/show.html
+++ b/demos/effect/show.html
@@ -4,22 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Effects - Show Demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
- <script src="../../external/jquery/jquery.js"></script>
- <script src="../../ui/effect.js"></script>
- <script src="../../ui/effect-blind.js"></script>
- <script src="../../ui/effect-bounce.js"></script>
- <script src="../../ui/effect-clip.js"></script>
- <script src="../../ui/effect-drop.js"></script>
- <script src="../../ui/effect-explode.js"></script>
- <script src="../../ui/effect-fade.js"></script>
- <script src="../../ui/effect-fold.js"></script>
- <script src="../../ui/effect-highlight.js"></script>
- <script src="../../ui/effect-puff.js"></script>
- <script src="../../ui/effect-pulsate.js"></script>
- <script src="../../ui/effect-scale.js"></script>
- <script src="../../ui/effect-shake.js"></script>
- <script src="../../ui/effect-size.js"></script>
- <script src="../../ui/effect-slide.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler { width: 500px; height: 200px; }
@@ -27,8 +11,8 @@
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
- <script>
- $(function() {
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js" data-modules="effects-all">
// run the currently selected effect
function runEffect() {
// get effect type from
@@ -60,7 +44,6 @@
});
$( "#effect" ).hide();
- });
</script>
</head>
<body>
diff --git a/demos/effect/switchClass.html b/demos/effect/switchClass.html
index f7c6d12da..c02f4420b 100644
--- a/demos/effect/switchClass.html
+++ b/demos/effect/switchClass.html
@@ -4,8 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Effects - switchClass Demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
- <script src="../../external/jquery/jquery.js"></script>
- <script src="../../ui/effect.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
@@ -14,13 +12,12 @@
.newClass { width: 240px; padding: 1em; letter-spacing: 0; margin: 0; }
.anotherNewClass { text-indent: 40px; letter-spacing: .2em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.1em; }
</style>
- <script>
- $(function() {
- $( "#button" ).on( "click", function(){
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
+ $( "#button" ).on( "click", function() {
$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
$( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 );
});
- });
</script>
</head>
<body>
diff --git a/demos/effect/toggle.html b/demos/effect/toggle.html
index e646ec994..65c4747a9 100644
--- a/demos/effect/toggle.html
+++ b/demos/effect/toggle.html
@@ -4,22 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Effects - Toggle Demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
- <script src="../../external/jquery/jquery.js"></script>
- <script src="../../ui/effect.js"></script>
- <script src="../../ui/effect-blind.js"></script>
- <script src="../../ui/effect-bounce.js"></script>
- <script src="../../ui/effect-clip.js"></script>
- <script src="../../ui/effect-drop.js"></script>
- <script src="../../ui/effect-explode.js"></script>
- <script src="../../ui/effect-fade.js"></script>
- <script src="../../ui/effect-fold.js"></script>
- <script src="../../ui/effect-highlight.js"></script>
- <script src="../../ui/effect-puff.js"></script>
- <script src="../../ui/effect-pulsate.js"></script>
- <script src="../../ui/effect-scale.js"></script>
- <script src="../../ui/effect-shake.js"></script>
- <script src="../../ui/effect-size.js"></script>
- <script src="../../ui/effect-slide.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler {
@@ -42,8 +26,8 @@
text-align: center;
}
</style>
- <script>
- $(function() {
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js" data-modules="effects-all">
// run the currently selected effect
function runEffect() {
// get effect type from
@@ -66,7 +50,6 @@
$( "#button" ).on( "click", function() {
runEffect();
});
- });
</script>
</head>
<body>
diff --git a/demos/effect/toggleClass.html b/demos/effect/toggleClass.html
index 20161a81a..e1e3778ce 100644
--- a/demos/effect/toggleClass.html
+++ b/demos/effect/toggleClass.html
@@ -4,8 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Effects - toggleClass Demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
- <script src="../../external/jquery/jquery.js"></script>
- <script src="../../ui/effect.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
@@ -13,12 +11,11 @@
#effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
</style>
- <script>
- $(function() {
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
$( "#button" ).on( "click", function() {
$( "#effect" ).toggleClass( "newClass", 1000 );
});
- });
</script>
</head>
<body>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-11 03:08:21 +0000