jQuery UI Effects Test Suite

From 3909e6d89e01e4cd8777377c63037896bb95aa2f Mon Sep 17 00:00:00 2001 From: Leif Johansson Date: Fri, 25 Nov 2011 21:18:19 +0100 Subject: new jq layout --- .../tests/visual/effects/effects.all.css | 55 ++++++ .../tests/visual/effects/effects.all.html | 217 +++++++++++++++++++++ .../tests/visual/effects/effects.all.js | 106 ++++++++++ .../tests/visual/effects/effects.scale.html | 159 +++++++++++++++ 4 files changed, 537 insertions(+) create mode 100644 src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.all.css create mode 100644 src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.all.html create mode 100644 src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.all.js create mode 100644 src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.scale.html (limited to 'src/main/webapp/jquery-ui-1.9pre/tests/visual/effects') diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.all.css b/src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.all.css new file mode 100644 index 0000000..1d531b0 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.all.css @@ -0,0 +1,55 @@ + +body,html { + margin: 0; + padding: 0; + font-size: 12px; + font-family: Arial; + background: #191919; + color: #fff; +} +body { margin: 1em; } + +ul.effects { + list-style-type: none; + margin: 0; + padding: 0; +} + +ul.effects li { + list-style-type: none; + margin: 0; + padding: 0; + width: 120px; + height: 100px; + float: left; + margin-top: 20px; + margin-left: 20px; +} + +div.effect { + width: 120px; + height: 100px; + background: #ccc; + border: 5px outset #aaa; + float: left; + cursor: pointer; + cursor: hand; +} + +div.current { + border: 5px outset #FF9C08; + background: #FF9C08; +} + +div.effect p { + color: #191919; + font-weight: bold; + margin: 0px; + padding: 10px; +} + +.ui-effects-transfer { + border: 1px dotted #fff; + background: #666; + opacity: 0.5; +} diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.all.html b/src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.all.html new file mode 100644 index 0000000..ddc6654 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.all.html @@ -0,0 +1,217 @@ + + + + + jQuery UI Effects Test Suite + + + + + + + + + + + + + + + + + + + + +

+
+
Blind up
+
+
+
+
Blind down
+
+
+
+
Blind left
+
+
+
+
Blind right
+
+
+
+
Bounce 3 times
+
+
+
+
Clip horizontally
+
+
+
+
Clip vertically
+
+
+
+
Drop down
+
+
+
+
Drop up
+
+
+
+
Drop left
+
+
+
+
Drop right
+
+
+
+
Explode in 9 pieces
+
+
+
+
Explode in 36 pieces
+
+
+
+
Fade
+
+
+
+
Fold
+
+
+
+
Highlight
+
+
+
+
Pulsate 2 times
+
+
+
+
Puff
+
+
+
+
Scale
+
+
+
+
Shake
+
+
+
+
Size Default Show/Hide
+
+
+
+
Size Toggle
+
+
+
+
Slide down
+
+
+
+
Slide up
+
+
+
+
Slide left
+
+
+
+
Slide right
+
+
+
+
Transfer to first element
+
+
+
+
addClass
+
+
+
+
removeClass
+
+
+
+
toggleClass
+
+
+
+
hide/show (jQuery)
+
+

+ + + diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.all.js b/src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.all.js new file mode 100644 index 0000000..a28c41a --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.all.js @@ -0,0 +1,106 @@ + +$(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/src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.scale.html b/src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.scale.html new file mode 100644 index 0000000..845625e --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/visual/effects/effects.scale.html @@ -0,0 +1,159 @@ + + + + + jQuery UI Effects Test Suite + + + + + + + + + +

+ Positioning + + + Vertical Positioning + + + Horizontal Positioning + + + Vertical Origin + + + Horizontal Origin + +
+ jQuery UI Scale Animation Test + + + +

+ \ No newline at end of file -- cgit v1.1