]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 6e4092f)
Added effects visual test pages
authorRichard Worth <rdworth@gmail.com>
Mon, 9 Jun 2008 12:19:59 +0000 (12:19 +0000)
committerRichard Worth <rdworth@gmail.com>
Mon, 9 Jun 2008 12:19:59 +0000 (12:19 +0000)
tests/visual/effects.all.css [new file with mode: 0644] patch | blob
tests/visual/effects.all.html [new file with mode: 0644] patch | blob
tests/visual/effects.all.js [new file with mode: 0644] patch | blob

diff --git a/tests/visual/effects.all.css b/tests/visual/effects.all.css
new file mode 100644 (file)
index 0000000..587c646
--- /dev/null
+++ b/tests/visual/effects.all.css
@@ -0,0 +1,49 @@
+body,html {\r
+       margin: 0;\r
+       padding: 0;\r
+       font-size: 12px;\r
+       font-family: Arial;\r
+       background: #000;\r
+}\r
+\r
+ul.effects {\r
+       margin: 0;\r
+       padding: 0;\r
+}\r
+\r
+ul.effects li {\r
+       margin: 0;\r
+       padding: 0;\r
+       width: 120px;\r
+       height: 100px;\r
+       float: left;\r
+       margin-top: 20px;\r
+       margin-left: 20px;\r
+}\r
+\r
+div.effect {\r
+       width: 120px;\r
+       height: 100px;\r
+       background: #333;\r
+       border: 5px outset #aaa;\r
+       float: left;\r
+       cursor: pointer;\r
+       cursor: hand;\r
+}\r
+\r
+div.current {\r
+       border: 5px outset #FF0000;\r
+       background: #660000;\r
+}\r
+\r
+div.effect p {\r
+       color: #eee;\r
+       margin: 0px;\r
+       padding: 10px;\r
+}\r
+\r
+.ui-effects-transfer {\r
+       border: 1px dotted #fff;\r
+       background: #666;\r
+       opacity: 0.5;\r
+}
\ No newline at end of file
diff --git a/tests/visual/effects.all.html b/tests/visual/effects.all.html
new file mode 100644 (file)
index 0000000..2664a3a
--- /dev/null
+++ b/tests/visual/effects.all.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>\r
+<html>\r
+<head>\r
+       <meta http-equiv="Content-type" content="text/html; charset=utf-8" />\r
+       <title>Effects Test Suite</title>\r
+       <link rel="stylesheet" href="effects.all.css" type="text/css" media="screen" title="no title" charset="utf-8" />\r
+       \r
+       <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
+       <script type="text/javascript" src="../../ui/effects.core.js"></script>\r
+       \r
+       <script type="text/javascript" src="../../ui/effects.blind.js"></script>\r
+       <script type="text/javascript" src="../../ui/effects.bounce.js"></script>\r
+       <script type="text/javascript" src="../../ui/effects.clip.js"></script>\r
+       <script type="text/javascript" src="../../ui/effects.drop.js"></script>\r
+       <script type="text/javascript" src="../../ui/effects.explode.js"></script>\r
+       <script type="text/javascript" src="../../ui/effects.fold.js"></script>\r
+       <script type="text/javascript" src="../../ui/effects.highlight.js"></script>\r
+       <script type="text/javascript" src="../../ui/effects.pulsate.js"></script>\r
+       <script type="text/javascript" src="../../ui/effects.scale.js"></script>\r
+       <script type="text/javascript" src="../../ui/effects.shake.js"></script>\r
+       <script type="text/javascript" src="../../ui/effects.slide.js"></script>\r
+       <script type="text/javascript" src="../../ui/effects.transfer.js"></script>\r
+       \r
+       <script type="text/javascript" src="effects.all.js"></script>\r
+</head>\r
+<body>\r
+\r
+<ul class="effects">\r
+\r
+       <li>\r
+               <div class="effect" id="blindHorizontally">\r
+                       <p>Blind horizontally</p>\r
+               </div>\r
+       </li>\r
+\r
+       <li>\r
+               <div class="effect" id="blindVertically">\r
+                       <p>Blind vertically</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="bounce3times">\r
+               <p>Bounce 3 times</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="clipHorizontally">\r
+               <p>Clip horizontally</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="clipVertically">\r
+               <p>Clip vertically</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="dropDown">\r
+               <p>Drop down</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="dropUp">\r
+               <p>Drop up</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="dropLeft">\r
+               <p>Drop left</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="dropRight">\r
+               <p>Drop right</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="explode9">\r
+               <p>Explode in 9 pieces</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="explode36">\r
+               <p>Explode in 36 pieces</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="fold">\r
+               <p>Fold</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="highlight">\r
+               <p>Highlight</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="pulsate">\r
+               <p>Pulsate 2 times</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="puff">\r
+               <p>Puff</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="scale">\r
+               <p>Scale</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="shake">\r
+               <p>Shake</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="slideDown">\r
+               <p>Slide down</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="slideUp">\r
+               <p>Slide up</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="slideLeft">\r
+               <p>Slide left</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="slideRight">\r
+               <p>Slide right</p>\r
+               </div>\r
+       </li>\r
+       \r
+       <li>\r
+               <div class="effect" id="transfer">\r
+               <p>Transfer to first element</p>\r
+               </div>\r
+       </li>\r
+\r
+</ul>\r
+\r
+</body>\r
+</html>\r
diff --git a/tests/visual/effects.all.js b/tests/visual/effects.all.js
new file mode 100644 (file)
index 0000000..ebf0ad0
--- /dev/null
+++ b/tests/visual/effects.all.js
@@ -0,0 +1,65 @@
+$(document).ready(function() {\r
+       \r
+       $("div.effect")\r
+               .hover(function() {\r
+                       $(this).addClass("hover");\r
+               }, function() {\r
+                       $(this).removeClass("hover");\r
+               })\r
+               ;\r
+       \r
+       \r
+       var effect = function(el, n, o) {\r
+               \r
+               $.extend(o, {\r
+                       easing: "easeOutQuint"\r
+               });\r
+               \r
+               $(el).bind("click", function() {\r
+                       \r
+                       $(this).addClass("current").hide(n, o, 1000, function() {\r
+                               var self = this;\r
+                               window.setTimeout(function() {\r
+                                       $(self).show(n, o, 1000, function() { $(this).removeClass("current"); });\r
+                               },500);\r
+                       });\r
+               });\r
+               \r
+       };\r
+               \r
+\r
+       effect("#blindHorizontally", "blind", { direction: "horizontal" });\r
+       effect("#blindVertically", "blind", { direction: "vertical" });\r
+       \r
+       effect("#bounce3times", "bounce", { times: 3 });\r
+       \r
+       effect("#clipHorizontally", "clip", { direction: "horizontal" });\r
+       effect("#clipVertically", "clip", { direction: "vertical" });\r
+       \r
+       effect("#dropDown", "drop", { direction: "down" });\r
+       effect("#dropUp", "drop", { direction: "up" });\r
+       effect("#dropLeft", "drop", { direction: "left" });\r
+       effect("#dropRight", "drop", { direction: "right" });\r
+       \r
+       effect("#explode9", "explode", {  });\r
+       effect("#explode36", "explode", { pieces: 36 });\r
+       \r
+       effect("#fold", "fold", { size: 50 });\r
+       \r
+       effect("#highlight", "highlight", {  });\r
+       \r
+       effect("#pulsate", "pulsate", { times: 2 });\r
+       \r
+       effect("#puff", "puff", { times: 2 });\r
+       effect("#scale", "scale", {  });\r
+       \r
+       $("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); });\r
+       \r
+       effect("#slideDown", "slide", { direction: "down" });\r
+       effect("#slideUp", "slide", { direction: "up" });\r
+       effect("#slideLeft", "slide", { direction: "left" });\r
+       effect("#slideRight", "slide", { direction: "right" });\r
+       \r
+       $("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); });\r
+       \r
+});
\ No newline at end of file
The official jQuery user interface library: https://github.com/jquery/jquery-ui