[Summary view] [Print] [Text view]

   1  <script type="text/javascript">
   2  
   3      var model = {
   4  
   5          renderAt: '#containerDemo',
   6  
   7          title: 'Show/Hide Effects',
   8  
   9          demos: [
  10  
  11              {
  12                  title: 'Blind',
  13                  desc: 'Gradually show or hide an element.',
  14                  html: '<button id="doBlind" type="button">Toggle</button><br/><br/>\n' +
  15                      '<ul><li style="float: left; width: 144px; height: 108px;"><img class="blindfx" style="width: 144px; height: 108px;" src="templates/images/P1010020.JPG"/></li>\n' +
  16                      '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="blindfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
  17                      '<div style="clear: both;"></div>',
  18                  destroy: '$("#doBlind").unbind();',
  19  
  20                  options: [
  21                      {    desc: 'Vertical blind',    source: '$("#doBlind").click(function() { $(".blindfx").toggle("blind", {direction: "vertical"}, 800); });' },
  22                      {    desc: 'Horizontal blind',    source: '$("#doBlind").click(function() { $(".blindfx").toggle("blind", {direction: "horizontal"}, 800); });' }
  23                  ]
  24              },
  25  
  26              {
  27                  title: 'Clip',
  28                  desc: 'Gradually show or hide an element by expanding from or to the center.',
  29                  html: '<button id="doClip" type="button">Toggle</button><br/><br/>\n' +
  30                      '<ul><li style="float: left; width: 144px; height: 108px;"><img class="clipfx" style="width: 144px; height: 108px;" src="templates/images/P1010039.JPG"/></li>\n' +
  31                      '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="clipfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
  32                      '<div style="clear: both;"></div>',
  33                  destroy: '$("#doClip").unbind();',
  34  
  35                  options: [
  36                      {    desc: 'Vertical clip',    source: '$("#doClip").click(function() { $(".clipfx").toggle("clip", {direction: "vertical"}, 800); });' },
  37                      {    desc: 'Horizontal clip',    source: '$("#doClip").click(function() { $(".clipfx").toggle("clip", {direction: "horizontal"}, 800); });' }
  38                  ]
  39              },
  40  
  41              {
  42                  title: 'Drop',
  43                  desc: 'Gradually show or hide an element by dropping it to one side and fading it.',
  44                  html: '<button id="doDrop" type="button">Toggle</button><br/><br/>\n' +
  45                      '<ul><li style="float: left; width: 144px; height: 108px;"><img class="dropfx" style="width: 144px; height: 108px;" src="templates/images/P1010044.JPG"/></li>\n' +
  46                      '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="dropfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
  47                      '<div style="clear: both;"></div>',
  48                  destroy: '$("#doDrop").unbind();',
  49  
  50                  options: [
  51                      {    desc: 'Drop left',    source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "left"}, 800); });' },
  52                      {    desc: 'Drop right',    source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "right"}, 800); });' },
  53                      {    desc: 'Drop up',    source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "up"}, 800); });' },
  54                      {    desc: 'Drop down',    source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "down"}, 800); });' }
  55                  ]
  56              },
  57  
  58              {
  59                  title: 'Explode',
  60                  desc: 'Break an element into pieces and explode them away, or reassemble an element from pieces.',
  61                  html: '<button id="doExplode" type="button">Toggle</button><br/><br/>\n' +
  62                      '<ul><li style="float: left; width: 144px; height: 108px;"><img class="explodefx" style="width: 144px; height: 108px;" src="templates/images/P1010050.JPG"/></li>\n' +
  63                      '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="explodefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
  64                      '<div style="clear: both;"></div>',
  65                  destroy: '$("#doExplode").unbind();',
  66  
  67                  options: [
  68                      {    desc: 'Explode defaults (9 pieces)',    source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {}, 800); });' },
  69                      {    desc: 'Explode into 4 pieces',    source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {pieces: 4}, 800); });' },
  70                      {    desc: 'Explode into 25 pieces',    source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {pieces: 25}, 800); });' }
  71                  ]
  72              },
  73  
  74              {
  75                  title: 'Fold',
  76                  desc: 'Reduce or enlarge an element partially in one direction and then fully in the other direction.',
  77                  html: '<button id="doFold" type="button">Toggle</button><br/><br/>\n' +
  78                      '<ul><li style="float: left; width: 144px; height: 108px;"><img class="foldfx" style="width: 144px; height: 108px;" src="templates/images/P1010055.JPG"/></li>\n' +
  79                      '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="foldfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
  80                      '<div style="clear: both;"></div>',
  81                  destroy: '$("#doFold").unbind();',
  82  
  83                  options: [
  84                      {    desc: 'Fold defaults (to size 15)',    source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {}, 800); });' },
  85                      {    desc: 'Fold to 30',    source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: 30}, 800); });' },
  86                      {    desc: 'Fold in half (50%)',    source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: "50%"}, 800); });' },
  87                      {    desc: 'Fold horizontally first',    source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: 30, horizFirst: true}, 800); });' },
  88                      {    desc: 'Fold in half horizontally first',    source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: "50%", horizFirst: true}, 800); });' }
  89                  ]
  90              },
  91  
  92              {
  93                  title: 'Puff',
  94                  desc: 'Scale an element up and fade out, or scale it down and fade in.',
  95                  html: '<button id="doPuff" type="button">Toggle</button><br/><br/>\n' +
  96                      '<ul><li style="float: left; width: 144px; height: 108px;"><img class="pufffx" style="width: 144px; height: 108px;" src="templates/images/P1010058.JPG"/></li>\n' +
  97                      '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="pufffx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
  98                      '<div style="clear: both;"></div>',
  99                  destroy: '$("#doPuff").unbind();',
 100  
 101                  options: [
 102                      {    desc: 'Puff defaults (scale to 150%)',    source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {}, 800); });' },
 103                      {    desc: 'Puff to 200%',    source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {percent: 200}, 800); });' }
 104                  ]
 105              },
 106  
 107              {
 108                  title: 'Scale',
 109                  desc: 'Grow/Shrink an element.',
 110                  html: '<button id="doScale" type="button">Toggle</button><br/><br/>\n' +
 111                      '<ul><li style="float: left; width: 144px; height: 108px;"><img class="scalefx" style="width: 144px; height: 108px;" src="templates/images/P1010058.JPG"/></li>\n' +
 112                      '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="scalefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
 113                      '<div style="clear: both;"></div>',
 114                  destroy: '$("#doScale").unbind();',
 115  
 116                  options: [
 117                      {    desc: 'Scale defaults',    source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {}, 800); });' },
 118                      {    desc: 'Scale from/to top-left',    source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {origin:["top","left"]}, 800); });' },
 119                      {    desc: 'Scale from/to bottom-right',    source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {origin:["bottom","right"]}, 800); });' },
 120                  ]
 121              },
 122  
 123  
 124              {
 125                  title: 'Slide',
 126                  desc: 'Slide an element out of or into the viewport.',
 127                  html: '<button id="doSlide" type="button">Toggle</button><br/><br/>\n' +
 128                      '<ul><li style="float: left; width: 144px; height: 108px;"><img class="slidefx" style="width: 144px; height: 108px;" src="templates/images/P1010059.JPG"/></li>\n' +
 129                      '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="slidefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
 130                      '<div style="clear: both;"></div>',
 131                  destroy: '$("#doSlide").unbind();',
 132  
 133                  options: [
 134                      {    desc: 'Slide left',    source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "left"}, 800); });' },
 135                      {    desc: 'Slide right',    source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "right"}, 800); });' },
 136                      {    desc: 'Slide up',    source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "up"}, 800); });' },
 137                      {    desc: 'Slide down',    source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "down"}, 800); });' }
 138                  ]
 139              }
 140  
 141          ]
 142  
 143      };
 144  
 145      $(function(){
 146  
 147          uiRenderDemo(model);
 148  
 149      });
 150  
 151  </script>