aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorScott González <scott.gonzalez@gmail.com>2012-05-15 12:52:18 -0400
committerScott González <scott.gonzalez@gmail.com>2012-05-15 12:52:18 -0400
commit44a086b92cbf5a9f20cba23fc7a44d92f9eda5e2 (patch)
treec15d2e359264020e1d5e6e89e784d1ecce694be9
parent1f2469234b15d79d97c692ed97a5eaeb67c7b697 (diff)
downloadjquery-ui-44a086b92cbf5a9f20cba23fc7a44d92f9eda5e2.tar.gz
jquery-ui-44a086b92cbf5a9f20cba23fc7a44d92f9eda5e2.zip
Visual tests: Effects cleanup.
Diffstat
-rw-r--r--tests/visual/effects/all.html (renamed from tests/visual/effects/effects.all.html)10
-rw-r--r--tests/visual/effects/effects.all.js106
-rw-r--r--tests/visual/effects/effects.css (renamed from tests/visual/effects/effects.all.css)12
-rw-r--r--tests/visual/effects/effects.js107
-rw-r--r--tests/visual/effects/scale.html (renamed from tests/visual/effects/effects.scale.html)8
5 files changed, 118 insertions, 125 deletions
diff --git a/tests/visual/effects/effects.all.html b/tests/visual/effects/all.html
index acb8dc41a..15bfcd254 100644
--- a/tests/visual/effects/effects.all.html
+++ b/tests/visual/effects/all.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
- <link rel="stylesheet" href="effects.all.css" type="text/css">
+ <link rel="stylesheet" href="effects.css">
<script src="../../../jquery-1.7.2.js"></script>
<script src="../../../ui/jquery.effects.core.js"></script>
<script src="../../../ui/jquery.effects.blind.js"></script>
@@ -19,7 +19,7 @@
<script src="../../../ui/jquery.effects.shake.js"></script>
<script src="../../../ui/jquery.effects.slide.js"></script>
<script src="../../../ui/jquery.effects.transfer.js"></script>
- <script src="effects.all.js"></script>
+ <script src="effects.js"></script>
</head>
<body>
@@ -186,19 +186,19 @@
<p>Transfer to first element</p>
</div>
</li>
-
+
<li>
<div class="effect" id="addClass">
<p>addClass</p>
</div>
</li>
-
+
<li>
<div class="effect" id="removeClass">
<p>removeClass</p>
</div>
</li>
-
+
<li>
<div class="effect" id="toggleClass">
<p>toggleClass</p>
diff --git a/tests/visual/effects/effects.all.js b/tests/visual/effects/effects.all.js
deleted file mode 100644
index a28c41a89..000000000
--- a/tests/visual/effects/effects.all.js
+++ /dev/null
@@ -1,106 +0,0 @@
-
-$(function() {
- var duration = 1000, wait = 500;
-
- $("div.effect")
- .hover(function() { $(this).addClass("hover"); },
- function() { $(this).removeClass("hover"); });
-
- var effect = function(el, n, o) {
-
- $.extend(o, {
- easing: "easeOutQuint"
- });
-
- $(el).bind("click", function() {
-
- $(this).addClass("current")
- // delaying the initial animation makes sure that the queue stays in tact
- .delay( 10 )
- .hide( n, o, duration )
- .delay( wait )
- .show( n, o, duration, function() {
- $( this ).removeClass("current");
- });
- });
-
- };
-
- $("#hide").click(function() {
- var el = $(this);
- el.addClass("current").hide(duration, function() {
- setTimeout(function() {
- el.show(duration, function() { el.removeClass("current"); });
- }, wait);
- });
- });
-
- effect("#blindLeft", "blind", { direction: "left" });
- effect("#blindUp", "blind", { direction: "up" });
- effect("#blindRight", "blind", { direction: "right" });
- effect("#blindDown", "blind", { direction: "down" });
-
- effect("#bounce3times", "bounce", { times: 3 });
-
- effect("#clipHorizontally", "clip", { direction: "horizontal" });
- effect("#clipVertically", "clip", { direction: "vertical" });
-
- effect("#dropDown", "drop", { direction: "down" });
- effect("#dropUp", "drop", { direction: "up" });
- effect("#dropLeft", "drop", { direction: "left" });
- effect("#dropRight", "drop", { direction: "right" });
-
- effect("#explode9", "explode", {});
- effect("#explode36", "explode", { pieces: 36 });
-
- effect("#fade", "fade", {});
-
- effect("#fold", "fold", { size: 50 });
-
- effect("#highlight", "highlight", {});
-
- effect("#pulsate", "pulsate", { times: 2 });
-
- effect("#puff", "puff", { times: 2 });
- effect("#scale", "scale", {});
- effect("#size", "size", {});
- $("#sizeToggle").bind("click", function() {
- var opts = { to: { width: 300, height: 300 }};
- $(this).addClass('current')
- .toggle("size", opts, duration)
- .delay(wait)
- .toggle("size", opts, duration, function() {
- $(this).removeClass("current");
- });
- });
-
- $("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); });
-
- effect("#slideDown", "slide", { direction: "down" });
- effect("#slideUp", "slide", { direction: "up" });
- effect("#slideLeft", "slide", { direction: "left" });
- effect("#slideRight", "slide", { direction: "right" });
-
- $("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); });
-
- $("#addClass").click(function() {
- $(this).addClass(function() {
- window.console && console.log(arguments);
- return "current";
- }, duration, function() {
- $(this).removeClass("current");
- });
- });
- $("#removeClass").click(function() {
- $(this).addClass("current").removeClass(function() {
- window.console && console.log(arguments);
- return "current";
- }, duration);
- });
- $("#toggleClass").click(function() {
- $(this).toggleClass(function() {
- window.console && console.log(arguments);
- return "current";
- }, duration);
- });
-});
diff --git a/tests/visual/effects/effects.all.css b/tests/visual/effects/effects.css
index 1d531b026..460019f24 100644
--- a/tests/visual/effects/effects.all.css
+++ b/tests/visual/effects/effects.css
@@ -1,13 +1,9 @@
-
-body,html {
- margin: 0;
+body {
+ margin: 1em;
padding: 0;
- font-size: 12px;
- font-family: Arial;
background: #191919;
color: #fff;
}
-body { margin: 1em; }
ul.effects {
list-style-type: none;
@@ -16,8 +12,6 @@ ul.effects {
}
ul.effects li {
- list-style-type: none;
- margin: 0;
padding: 0;
width: 120px;
height: 100px;
@@ -44,7 +38,7 @@ div.current {
div.effect p {
color: #191919;
font-weight: bold;
- margin: 0px;
+ margin: 0;
padding: 10px;
}
diff --git a/tests/visual/effects/effects.js b/tests/visual/effects/effects.js
new file mode 100644
index 000000000..624e0b128
--- /dev/null
+++ b/tests/visual/effects/effects.js
@@ -0,0 +1,107 @@
+$(function() {
+
+var duration = 1000,
+ wait = 500;
+
+function effect( elem, name, options ) {
+ $.extend( options, {
+ easing: "easeOutQuint"
+ });
+
+ $( elem ).click(function() {
+ $( this )
+ .addClass( "current" )
+ // delaying the initial animation makes sure that the queue stays in tact
+ .delay( 10 )
+ .hide( name, options, duration )
+ .delay( wait )
+ .show( name, options, duration, function() {
+ $( this ).removeClass( "current" );
+ });
+ });
+}
+
+$( "#hide" ).click(function() {
+ $( this )
+ .addClass( "current" )
+ .hide( duration )
+ .delay( wait )
+ .show( duration, function() {
+ $( this ).removeClass( "current" );
+ });
+});
+
+effect( "#blindLeft", "blind", { direction: "left" } );
+effect( "#blindUp", "blind", { direction: "up" } );
+effect( "#blindRight", "blind", { direction: "right" } );
+effect( "#blindDown", "blind", { direction: "down" } );
+
+effect( "#bounce3times", "bounce", { times: 3 } );
+
+effect( "#clipHorizontally", "clip", { direction: "horizontal" } );
+effect( "#clipVertically", "clip", { direction: "vertical" } );
+
+effect( "#dropDown", "drop", { direction: "down" } );
+effect( "#dropUp", "drop", { direction: "up" } );
+effect( "#dropLeft", "drop", { direction: "left" } );
+effect( "#dropRight", "drop", { direction: "right" } );
+
+effect( "#explode9", "explode", {} );
+effect( "#explode36", "explode", { pieces: 36 } );
+
+effect( "#fade", "fade", {} );
+
+effect( "#fold", "fold", { size: 50 } );
+
+effect( "#highlight", "highlight", {} );
+
+effect( "#pulsate", "pulsate", { times: 2 } );
+
+effect( "#puff", "puff", { times: 2 } );
+effect( "#scale", "scale", {} );
+effect( "#size", "size", {} );
+$( "#sizeToggle" ).click(function() {
+ var options = { to: { width: 300, height: 300 } };
+ $( this )
+ .addClass( "current" )
+ .toggle( "size", options, duration )
+ .delay( wait )
+ .toggle( "size", options, duration, function() {
+ $( this ).removeClass( "current" );
+ });
+});
+
+$( "#shake" ).click(function() {
+ $( this )
+ .addClass( "current" )
+ .effect( "shake", {}, 100, function() {
+ $( this ).removeClass( "current" );
+ });
+});
+
+effect( "#slideDown", "slide", { direction: "down" } );
+effect( "#slideUp", "slide", { direction: "up" } );
+effect( "#slideLeft", "slide", { direction: "left" } );
+effect( "#slideRight", "slide", { direction: "right" } );
+
+$( "#transfer" ).click(function() {
+ $( this )
+ .addClass( "current" )
+ .effect( "transfer", { to: "div:eq(0)" }, 1000, function() {
+ $( this ).removeClass( "current" );
+ });
+});
+
+$( "#addClass" ).click(function() {
+ $( this ).addClass( "current", duration, function() {
+ $( this ).removeClass( "current" );
+ });
+});
+$( "#removeClass" ).click(function() {
+ $( this ).addClass( "current" ).removeClass( "current", duration );
+});
+$( "#toggleClass" ).click(function() {
+ $( this ).toggleClass( "current", duration );
+});
+
+});
diff --git a/tests/visual/effects/effects.scale.html b/tests/visual/effects/scale.html
index 708543257..add2ba01c 100644
--- a/tests/visual/effects/effects.scale.html
+++ b/tests/visual/effects/scale.html
@@ -3,13 +3,12 @@
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
- <link rel="stylesheet" href="effects.all.css" type="text/css">
+ <link rel="stylesheet" href="effects.css">
<script src="../../../jquery-1.7.2.js"></script>
<script src="../../../ui/jquery.effects.core.js"></script>
<script src="../../../ui/jquery.effects.scale.js"></script>
- <script src="effects.all.js"></script>
<script>
- jQuery(function( $ ) {
+ $(function() {
var test = $( "#testBox" ),
opts = $( ".arg" ),
optsRev = $( opts.get().reverse() ),
@@ -82,9 +81,8 @@
}
});
</script>
- <style type="text/css">
+ <style>
#testArea {
-/* border: 5px dashed #777;*/
width: 200px;
height: 200px;
position: relative;
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-23 08:05:54 +0000