[Summary view] [Print] [Text view]

   1  <script type="text/javascript">
   2  
   3      var model = {
   4  
   5          renderAt: '#containerDemo',
   6  
   7          title: 'General Effects',
   8  
   9          demos: [
  10  
  11              {
  12                  title: 'Bounce',
  13                  desc: 'Bounce an element from its original location. The default settings are {times: 5, direction: "up", distance: 20}.',
  14                  html: '<button id="doBounce" type="button">Bounce</button><br/><br/>\n' +
  15                      '<div style="height: 108px;"><img id="bounce" src="templates/images/P1010036.JPG"/></div>',
  16                  destroy: '$("#doBounce").unbind();',
  17  
  18                  options: [
  19                      {    desc: 'Bounce defaults',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {}, 500); });' },
  20                      {    desc: 'Bounce three times',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {times: 3}, 500); });' },
  21                      {    desc: 'Bounce once',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {times: 1}, 500); });' },
  22                      {    desc: 'Bounce down',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "down"}); });' },
  23                      {    desc: 'Bounce left',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "left"}); });' },
  24                      {    desc: 'Bounce right',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "right"}); });' },
  25                      {    desc: 'Bounce to height 50',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {distance: 50}); });' },
  26                      {    desc: 'Bounce and show/hide',    source: '$("#doBounce").click(function() { $("#bounce").toggle("bounce", {times: 3}, 500); });' }
  27                  ]
  28              },
  29  
  30              {
  31                  title: 'Highlight',
  32                  desc: 'Highlight an element by fading its background color from another color back to its original.',
  33                  html: '<button id="doHighlight" type="button">Highlight</button><br/><br/>\n' +
  34                      '<div id="highlight" style="width: 144px; height: 108px; background-color: #ccffff; text-align: center;"><br/><br/>\n' +
  35                      'This is an important announcement!</div>',
  36                  destroy: '$("#doHighlight").unbind();',
  37  
  38                  options: [
  39                      {    desc: 'Highlight defaults (yellow)',    source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {}, 800); });' },
  40                      {    desc: 'Highlight to red',    source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {color: "red"}, 800); });' },
  41                      {    desc: 'Highlight to black',    source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {color: "#000000"}, 800); });' }
  42                  ]
  43              },
  44  
  45              {
  46                  title: 'Pulsate',
  47                  desc: 'Pulsate an element by changing its opacity.',
  48                  html: '<button id="doPulsate" type="button">Pulsate</button><br/><br/>\n' +
  49                      '<div style="height: 108px;"><img id="pulsate" src="templates/images/P1010061.JPG"/></div>',
  50                  destroy: '$("#doPulsate").unbind();',
  51  
  52                  options: [
  53                      {    desc: 'Pulsate defaults (5 times)',    source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {}, 500); });' },
  54                      {    desc: 'Pulsate 3 times',    source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {times: 3}, 500); });' },
  55                      {    desc: 'Pulsate once',    source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {times: 1}, 1000); });' },
  56                      {    desc: 'Pulsate 3 times and show/hide',    source: '$("#doPulsate").click(function() { $("#pulsate").toggle("pulsate", {times: 3}, 500); });' }
  57                  ]
  58              },
  59  
  60              {
  61                  title: 'Scale',
  62                  desc: 'Scales an element up or down by a percentage factor.',
  63                  html: '<button id="doScale" type="button">Scale</button> \n' +
  64                      '<button onclick="$(\'#scale\').css({width: 144, height: 108});" type="button">Reset</button><br/><br/>\n' +
  65                      '<div style="height: 108px;" type="button"><img id="scale" src="templates/images/P1010063.JPG"/></div>',
  66                  destroy: '$("#doScale").unbind();',
  67  
  68                  options: [
  69                      {    desc: 'Scale to 0%',    source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 0}, 800); });' },
  70                      {    desc: 'Scale to 50%',    source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 50}, 800); });' },
  71                      {    desc: 'Scale to 200%',    source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 200}, 800); });' },
  72                      {    desc: 'Scale vertically only',    source: '$("#doScale").click(function() { $("#scale").effect("scale", {direction: "vertical", percent: 150}, 800); });' },
  73                      {    desc: 'Scale horizontally only',    source: '$("#doScale").click(function() { $("#scale").effect("scale", {direction: "horizontal", percent: 150}, 800); });' },
  74                      {    desc: 'Scale from middle-center',    source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["middle", "center"], percent: 150}, 800); });' },
  75                      {    desc: 'Scale from bottom-right',    source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["bottom", "right"], percent: 50}, 800); });' }
  76                  ]
  77              },
  78  
  79              {
  80                  title: 'Size',
  81                  desc: 'Changes the size of an element by specifying a width and height.',
  82                  html: '<button id="doSize" type="button">Size</button> \n' +
  83                      '<button onclick="$(\'#size\').css({width: 144, height: 108});" type="button">Reset</button><br/><br/>\n' +
  84                      '<div style="height: 108px;" type="button"><img id="size" src="templates/images/P1010063.JPG"/></div>',
  85                  destroy: '$("#doSize").unbind();',
  86  
  87                  options: [
  88                      {    desc: 'Size to 75x200',    source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:75, height:200}}, 800); });' },
  89                      {    desc: 'Size to 200x75',    source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:200, height:75}}, 800); });' },
  90                      {    desc: 'Size (125x210) from middle-center',    source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:125, height:210}, origin: ["middle", "center"]}, 800); });' },
  91                      {    desc: 'Size (210x125) from bottom-right',    source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:210, height:125}, origin: ["bottom", "right"]}, 800); });' }
  92                  ]
  93              },
  94  
  95              {
  96                  title: 'Shake',
  97                  desc: 'Shake an element around.',
  98                  html: '<button id="doShake" type="button">Shake</button><br/><br/>\n' +
  99                      '<div style="height: 108px;"><img id="shake" src="templates/images/P1010039.JPG"/></div>',
 100                  destroy: '$("#doShake").unbind();',
 101  
 102                  options: [
 103                      {    desc: 'Shake defaults',    source: '$("#doShake").click(function() { $("#shake").effect("shake", {}, 300); });' },
 104                      {    desc: 'Shake 5 times',    source: '$("#doShake").click(function() { $("#shake").effect("shake", {times: 5}, 250); });' },
 105                      {    desc: 'Shake right',    source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "right"}, 250); });' },
 106                      {    desc: 'Shake up',    source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "up"}, 250); });' },
 107                      {    desc: 'Shake down',    source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "down"}, 250); });' },
 108                      {    desc: 'Shake by 50px',    source: '$("#doShake").click(function() { $("#shake").effect("shake", {distance: 50}, 250); });' }
 109                  ]
 110              },
 111  
 112              {
 113                  title: 'Transfer',
 114                  desc: 'Transfer the outline of one element to another.',
 115                  html: '<button id="doTransfer" type="button">Transfer</button><br/><br/>\n' +
 116                      '<div style="height: 108px;"><img id="transfer" src="templates/images/P1010044.JPG"/></div>\n' +
 117                      '<div id="target" style="margin: 20px 0px 0px 36px; width: 72px; height: 54px; border: 1px solid black;"></div>\n' +
 118                      '<style type="text/css">\n' +
 119                      '.ui-effects-transfer { border: 1px solid maroon; }\n' +
 120                      '.transferring { background-color: red; opacity: 0.5; }\n' +
 121                      '</style>',
 122                  destroy: '$("#doTransfer").unbind(); $("#target").removeClass("transferred");',
 123  
 124                  options: [
 125                      {    desc: 'Transfer default',    source: '$("#doTransfer").click(function() { $("#transfer").effect("transfer", {to: "#target"}, 800); });' },
 126                      {    desc: 'Transfer with extra class',    source: '$("#doTransfer").click(function() { $("#transfer").effect("transfer", {to: "#target", className: "transferring"}, 800); });' }
 127                  ]
 128              }
 129  
 130          ]
 131  
 132      };
 133  
 134      $(function(){
 135  
 136          uiRenderDemo(model);
 137  
 138      });
 139  
 140  </script>