diff options
author | Scott González <scott.gonzalez@gmail.com> | 2012-05-15 12:52:18 -0400 |
---|---|---|
committer | Scott González <scott.gonzalez@gmail.com> | 2012-05-15 12:52:18 -0400 |
commit | 44a086b92cbf5a9f20cba23fc7a44d92f9eda5e2 (patch) | |
tree | c15d2e359264020e1d5e6e89e784d1ecce694be9 /tests/visual/effects | |
parent | 1f2469234b15d79d97c692ed97a5eaeb67c7b697 (diff) | |
download | jquery-ui-44a086b92cbf5a9f20cba23fc7a44d92f9eda5e2.tar.gz jquery-ui-44a086b92cbf5a9f20cba23fc7a44d92f9eda5e2.zip |
Visual tests: Effects cleanup.
Diffstat (limited to 'tests/visual/effects')
-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.js | 106 | ||||
-rw-r--r-- | tests/visual/effects/effects.css (renamed from tests/visual/effects/effects.all.css) | 12 | ||||
-rw-r--r-- | tests/visual/effects/effects.js | 107 | ||||
-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; |