diff options
Diffstat (limited to 'tests/visual')
| -rw-r--r-- | tests/visual/effects/effects.all.css (renamed from tests/visual/effects.all.css) | 1 | ||||
| -rw-r--r-- | tests/visual/effects/effects.all.html (renamed from tests/visual/effects.all.html) | 38 | ||||
| -rw-r--r-- | tests/visual/effects/effects.all.js (renamed from tests/visual/effects.all.js) | 0 | ||||
| -rw-r--r-- | tests/visual/effects/effects.scale.html | 159 |
4 files changed, 179 insertions, 19 deletions
diff --git a/tests/visual/effects.all.css b/tests/visual/effects/effects.all.css index d2ed94026..1d531b026 100644 --- a/tests/visual/effects.all.css +++ b/tests/visual/effects/effects.all.css @@ -5,6 +5,7 @@ body,html { font-size: 12px; font-family: Arial; background: #191919; + color: #fff; } body { margin: 1em; } diff --git a/tests/visual/effects.all.html b/tests/visual/effects/effects.all.html index fed35de8a..a2f8f62ef 100644 --- a/tests/visual/effects.all.html +++ b/tests/visual/effects/effects.all.html @@ -1,25 +1,25 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Test Suite</title> - <link rel="stylesheet" href="effects.all.css" type="text/css" /> - <script type="text/javascript" src="../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.fade.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script> - <script type="text/javascript" src="effects.all.js"></script> + <link rel="stylesheet" href="effects.all.css" type="text/css"> + <script src="../../../jquery-1.5.1.js"></script> + <script src="../../../ui/jquery.effects.core.js"></script> + <script src="../../../ui/jquery.effects.blind.js"></script> + <script src="../../../ui/jquery.effects.bounce.js"></script> + <script src="../../../ui/jquery.effects.clip.js"></script> + <script src="../../../ui/jquery.effects.drop.js"></script> + <script src="../../../ui/jquery.effects.explode.js"></script> + <script src="../../../ui/jquery.effects.fade.js"></script> + <script src="../../../ui/jquery.effects.fold.js"></script> + <script src="../../../ui/jquery.effects.highlight.js"></script> + <script src="../../../ui/jquery.effects.pulsate.js"></script> + <script src="../../../ui/jquery.effects.scale.js"></script> + <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> </head> <body> diff --git a/tests/visual/effects.all.js b/tests/visual/effects/effects.all.js index a28c41a89..a28c41a89 100644 --- a/tests/visual/effects.all.js +++ b/tests/visual/effects/effects.all.js diff --git a/tests/visual/effects/effects.scale.html b/tests/visual/effects/effects.scale.html new file mode 100644 index 000000000..9521a1872 --- /dev/null +++ b/tests/visual/effects/effects.scale.html @@ -0,0 +1,159 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects Test Suite</title> + <link rel="stylesheet" href="effects.all.css" type="text/css"> + <script src="../../../jquery-1.5.1.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 type="text/javascript" charset="utf-8"> + jQuery(function( $ ) { + var test = $( "#testBox" ), + opts = $( ".arg" ), + optsRev = $( opts.get().reverse() ), + doer = $( "#doAnim" ), + current = $( "#current" ), + cleanStyle = test[0].style, + total = 1; + + opts.each(function() { + total *= this.options.length; + }); + + opts.change( doAnim ); + doer.click( doAnim ); + $( "#cyclePrev" ).click(function() { + cycle( -1 ); + }); + $( "#cycleNext" ).click(function() { + cycle( 1 ); + }); + + function cycle( direction ) { + optsRev.each(function() { + var cur = this.selectedIndex, + next = cur + direction, + len = this.options.length; + + this.selectedIndex = ( next + len ) % len; + + if ( ( next+len ) % len === next ) return false; + }); + doAnim(); + } + + + function doAnim() { + var cur = 0; + opts.each(function() { + cur *= this.options.length + cur += this.selectedIndex; + }); + cur++; + current.text( "Configuration: " + cur + " of " + total ); + run.apply(test, opts.map(function() { + return $(this).val(); + }).get()); + } + + function run( position, v, h, vo, ho ) { + var el = this, + style = el[0].style, + effect = { + effect: "scale", + mode: "effect", + percent: 200, + origin: [ vo, ho ], + duration: 500 + }; + el.stop(true, true); + if ( typeof style === "object" ) { + style.cssText = ""; + } else { + el[0].style = ""; + } + el.css( "position", position ) + .css( h, 5 ) + .css( v, 5 ) + .delay( 100 ) + .effect( effect ); + } + }); + </script> + <style type="text/css"> + #testArea { +/* border: 5px dashed #777;*/ + width: 200px; + height: 200px; + position: relative; + } + #testBox { + width: 50px; + height: 50px; + background-color: #bada55; + color: black; + border: 10px solid #fff; + margin: 10px; + padding: 10px; + } + label { + display: block; + } + #controls { + position: absolute; + z-index: 300; + left: 50%; + top: 50%; + margin-left: -200px; + width: 400px; + opacity: 0.8; + } + </style> +</head> +<body> + <div id="testArea"> + <div id="testBox"> + </div> + </div> + <div id="controls"> + <label for="pos">Positioning + <select id="pos" class="arg"> + <option value="absolute">absolute</option> + <option value="relative">relative</option> + <option value="fixed">fixed</option> + </select> + </label> + <label for="vertPos">Vertical Positioning + <select id="vertPos" class="arg"> + <option value="top">top</option> + <option value="bottom">bottom</option> + </select> + </label> + <label for="horizPos">Horizontal Positioning + <select id="horizPos" class="arg"> + <option value="left">left</option> + <option value="right">right</option> + </select> + </label> + <label for="vertOrigin">Vertical Origin + <select id="vertOrigin" class="arg"> + <option value="top">top</option> + <option value="middle">middle</option> + <option value="bottom">bottom</option> + </select> + </label> + <label for="horizOrigin">Horizontal Origin + <select id="horizOrigin" class="arg"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right">right</option> + </select> + </label><br /> + <label id="current">jQuery UI Scale Animation Test</label> + <button id="cyclePrev">Back</button> + <button id="doAnim">Run Animation</button> + <button id="cycleNext">Forward</button> + </div> +</body>
\ No newline at end of file |