Skip to content
Permalink
Browse files

Effects: Update demos to use AMD

Ref #10119
  • Loading branch information...
arschmitz committed Jun 30, 2015
1 parent 6acdd4a commit d13f81d88a18836844ea4dc0f4e572fe07dafbb0
@@ -4,17 +4,15 @@
<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; }
#button { padding: .5em 1em; text-decoration: none; }
#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>
@@ -4,17 +4,15 @@
<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; }
#button { padding: .5em 1em; text-decoration: none; }
#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>
@@ -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>
@@ -4,17 +4,15 @@
<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 {
float: left;
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>
@@ -4,31 +4,15 @@
<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; }
#button { padding: .5em 1em; text-decoration: none; }
#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>
@@ -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>
@@ -4,31 +4,15 @@
<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; }
#button { padding: .5em 1em; text-decoration: none; }
#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>
@@ -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>
@@ -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>
@@ -4,21 +4,18 @@
<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; }
#button { padding: .5em 1em; text-decoration: none; }
#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>

0 comments on commit d13f81d

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