third-party/jquery-ui-1.10.2/tests/visual/effects/scale.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Effects Test Suite</title>
   6         <link rel="stylesheet" href="effects.css">
   7         <script src="../../../jquery-1.9.1.js"></script>
   8         <script src="../../../ui/jquery.ui.effect.js"></script>
   9         <script src="../../../ui/jquery.ui.effect-scale.js"></script>
  10         <script>
  11         $(function() {
  12                 var test = $( "#testBox" ),
  13                         opts = $( ".arg" ),
  14                         optsRev = $( opts.get().reverse() ),
  15                         doer = $( "#doAnim" ),
  16                         current = $( "#current" ),
  17                         cleanStyle = test[0].style,
  18                         total = 1;
  19
  20                 opts.each(function() {
  21                         total *= this.options.length;
  22                 });
  23
  24                 opts.change( doAnim );
  25                 doer.click( doAnim );
  26                 $( "#cyclePrev" ).click(function() {
  27                         cycle( -1 );
  28                 });
  29                 $( "#cycleNext" ).click(function() {
  30                         cycle( 1 );
  31                 });
  32
  33                 function cycle( direction ) {
  34                         optsRev.each(function() {
  35                                 var cur = this.selectedIndex,
  36                                         next = cur + direction,
  37                                         len = this.options.length;
  38
  39                                 this.selectedIndex = ( next + len ) % len;
  40
  41                                 if ( ( next+len ) % len === next ) return false;
  42                         });
  43                         doAnim();
  44                 }
  45
  46
  47                 function doAnim() {
  48                         var cur = 0;
  49                         opts.each(function() {
  50                                 cur *= this.options.length
  51                                 cur += this.selectedIndex;
  52                         });
  53                         cur++;
  54                         current.text( "Configuration: " + cur + " of " + total );
  55                         run.apply(test, opts.map(function() {
  56                                 return $(this).val();
  57                         }).get());
  58                 }
  59
  60                 function run( position, v, h, vo, ho ) {
  61                         var el = this,
  62                                 style = el[0].style,
  63                                 effect = {
  64                                         effect: "scale",
  65                                         mode: "effect",
  66                                         percent: 200,
  67                                         origin: [ vo, ho ],
  68                                         duration: 500
  69                                 };
  70                         el.stop(true, true);
  71                         if ( typeof style === "object" ) {
  72                                 style.cssText = "";
  73                         } else {
  74                                 el[0].style = "";
  75                         }
  76                         el.css( "position", position )
  77                                 .css( h, 5 )
  78                                 .css( v, 5 )
  79                                 .delay( 100 )
  80                                 .effect( effect );
  81                 }
  82         });
  83         </script>
  84         <style>
  85         #testArea {
  86                 width: 200px;
  87                 height: 200px;
  88                 position: relative;
  89         }
  90         #testBox {
  91                 width: 50px;
  92                 height: 50px;
  93                 background-color: #bada55;
  94                 color: black;
  95                 border: 10px solid #fff;
  96                 margin: 10px;
  97                 padding: 10px;
  98         }
  99         label {
 100                 display: block;
 101         }
 102         #controls {
 103                 position: absolute;
 104                 z-index: 300;
 105                 left: 50%;
 106                 top: 50%;
 107                 margin-left: -200px;
 108                 width: 400px;
 109                 opacity: 0.8;
 110         }
 111         </style>
 112 </head>
 113 <body>
 114         <div id="testArea">
 115                 <div id="testBox">
 116                 </div>
 117         </div>
 118         <div id="controls">
 119                 <label for="pos">Positioning
 120                         <select id="pos" class="arg">
 121                                 <option value="absolute">absolute</option>
 122                                 <option value="relative">relative</option>
 123                                 <option value="fixed">fixed</option>
 124                         </select>
 125                 </label>
 126                 <label for="vertPos">Vertical Positioning
 127                         <select id="vertPos" class="arg">
 128                                 <option value="top">top</option>
 129                                 <option value="bottom">bottom</option>
 130                         </select>
 131                 </label>
 132                 <label for="horizPos">Horizontal Positioning
 133                         <select id="horizPos" class="arg">
 134                                 <option value="left">left</option>
 135                                 <option value="right">right</option>
 136                         </select>
 137                 </label>
 138                 <label for="vertOrigin">Vertical Origin
 139                         <select id="vertOrigin" class="arg">
 140                                 <option value="top">top</option>
 141                                 <option value="middle">middle</option>
 142                                 <option value="bottom">bottom</option>
 143                         </select>
 144                 </label>
 145                 <label for="horizOrigin">Horizontal Origin
 146                         <select id="horizOrigin" class="arg">
 147                                 <option value="left">left</option>
 148                                 <option value="center">center</option>
 149                                 <option value="right">right</option>
 150                         </select>
 151                 </label><br />
 152                 <label id="current">jQuery UI Scale Animation Test</label>
 153                 <button id="cyclePrev">Back</button>
 154                 <button id="doAnim">Run Animation</button>
 155                 <button id="cycleNext">Forward</button>
 156         </div>
 157 </body>