library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Effects: Update demos to use AMD

Browse Source 
Ref #10119
This commit is contained in:
Alexander Schmitz 2015-06-30 18:57:51 -04:00
parent 6acdd4a444
commit d13f81d88a
10 changed files with 21 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
demos/effect/addClass.html
View File

@ -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>

7
demos/effect/animate.html
View File

@ -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>

22
demos/effect/default.html
View File

@ -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>

7
demos/effect/easing.html
View File

@ -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>

21
demos/effect/hide.html
View File

@ -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>

5
demos/effect/removeClass.html
View File

@ -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>

21
demos/effect/show.html
View File

@ -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>

9
demos/effect/switchClass.html
View File

@ -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>

21
demos/effect/toggle.html
View File

@ -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>

7
demos/effect/toggleClass.html
View File

@ -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>