Test Effects : Effect « Mochkit « JavaScript DHTML






Test Effects

 
<!--
MochiKit is dual-licensed software.  It is available under the terms of the
MIT License, or the Academic Free License version 2.1.  The full text of
each license is included below.
-->

<!-- Code revised from MochiKit demo code -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Effects</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    
h3 {
    clear: both;
}
.example {
    font-size: 1.0em;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 112px;
    height: 112px;
    border: 4px solid #669;
    background-color: #ccf;
    text-align: center;
    padding: 1em 0.2em 0.2em 0.2em;
}
.demo {
    clear: both;
}

    </style>    
    <script src="MochiKit-1.4.2/lib/MochiKit/MochiKit.js" type="text/javascript"></script>
    <script src="MochiKit-1.4.2/lib/MochiKit/Position.js" type="text/javascript"></script>
    <script src="MochiKit-1.4.2/lib/MochiKit/Visual.js" type="text/javascript"></script>
    <script type="text/javascript">
    function showEffect() {
      f = document.forms[0];
      v = f['effect'].value;
      if (v.substring(0, 1) == '+') {
        v = "MochiKit.Visual.toggle('demo-all','" + v.substring(1) + "'";
      } else {
        v = "MochiKit.Visual." + v + "('demo-all'";
      }
      if (f['slow'].checked) {
        v += ',{duration:4}';
      }
      v += ')';
      var v = eval(v);
    }
    function resetBox() {
      e = MochiKit.DOM.getElement('demo-all');
      MochiKit.Visual.appear(e);
      MochiKit.Style.setStyle(e, {});
    }
    </script>

</head>

<body>
  <h3>Here are demos of all combination effects:</h3>
<div class="demo">
      <div class="example" id="demo-effect-appear" onclick="MochiKit.Visual.appear('demo-effect-fade')">
        <span>Click for Visual.appear demo</span>
      </div>
      <div class="example" id="demo-effect-fade" onclick="MochiKit.Visual.fade(this)">
        <span>Click for Visual.fade demo</span>
      </div>
      <div class="example" id="demo-effect-puff" onclick="MochiKit.Visual.puff(this)">
        <span>Click for Visual.puff demo</span>
      </div>
      <div class="example" id="demo-effect-blinddown" onclick="MochiKit.Visual.blindDown(this)">
        <span>Click for Visual.blindDown demo</span>
      </div>
      <div class="example" id="demo-effect-blindup" onclick="MochiKit.Visual.blindUp(this)">
        <span>Click for Visual.blindUp demo</span>
      </div>
      <div class="example" id="demo-effect-switchoff" onclick="MochiKit.Visual.switchOff(this)">
        <span>Click for Visual.switchOff demo</span>
      </div>
      <div class="example" id="demo-effect-slidedown" onclick="MochiKit.Visual.slideDown(this)">
        <span>Click for Visual.slideDown demo</span>
      </div>
      <div class="example" id="demo-effect-slideup" onclick="MochiKit.Visual.slideUp(this)">
        <span>Click for Visual.slideUp demo</span>
      </div>
      <div class="example" id="demo-effect-dropout" onclick="MochiKit.Visual.dropOut(this)">
        <span>Click for Visual.dropOut demo</span>
      </div>
      <div class="example" id="demo-effect-shake" onclick="MochiKit.Visual.shake(this)">
        <span>Click for Visual.shake demo</span>
      </div>
      <div class="example" id="demo-effect-pulsate" onclick="MochiKit.Visual.pulsate(this)">
        <span>Click for Visual.pulsate demo</span>
      </div>
      <div class="example" id="demo-effect-squish" onclick="MochiKit.Visual.squish(this)">
        <span>Click for Visual.squish demo</span>
      </div>
      <div class="example" id="demo-effect-fold" onclick="MochiKit.Visual.fold(this)">
        <span>Click for Visual.fold demo</span>
      </div>
       <div class="example" id="demo-effect-grow" onclick="MochiKit.Visual.grow(this)">
        <span>Click for Visual.grow demo</span>
      </div>
      <div class="example" id="demo-effect-shrink" onclick="MochiKit.Visual.shrink(this)">
        <span>Click for Visual.shrink demo</span>
      </div>
      <div class="example" id="demo-effect-highlight" onclick="new MochiKit.Visual.Highlight(this)">
        <span>Click for Visual.Highlight demo</span>
      </div>
</div>

  <h3>Here are all demos on one single element:</h3>
  <div id="demo-all" class="example" onclick="showEffect()">
    <span>Click to see the selected effect</span>
  </div>
<form action="" style="margin-left:140px;height:150px;">
  <fieldset style="border:none;">
  <select name="effect" size="1">
    <optgroup label="Single effects">
      <option value="appear">appear</option>
      <option value="fade">fade</option>
      <option value="puff">puff</option>
      <option value="blindDown">blindDown</option>
      <option value="blindUp">blindUp</option>
      <option value="slideDown">slideDown</option>
      <option value="slideUp">slideUp</option>
      <option value="switchOff">switchOff</option>
      <option value="dropOut">dropOut</option>
      <option value="shake">shake</option>
      <option value="pulsate">pulsate</option>
      <option value="squish">squish</option>
      <option value="fold">fold</option>
      <option value="grow">grow</option>
      <option value="shrink">shrink</option>
      <option value="Highlight">Highlight</option>
    </optgroup>
    <optgroup label="Toggle effects">
      <option value="+appear">appear</option>
      <option value="+blind">blind</option>
      <option value="+slide">slide</option>
      <option value="+size">size</option>
    </optgroup>
  </select>
  &nbsp;
  <input type="checkbox" name="slow"/> in slow-motion
  </fieldset>
  <fieldset style="border:none;">
  <input type="button" name="show" value="Click to show effect" onclick="showEffect()"/>
  <input type="button" name="show" value="Click to reset box" onclick="resetBox()"/>
  </fieldset>
</form>

<div class="demo">
  <h3>Links to other samples:</h3>
  <ul style="float:left;margin-top:0;">
    <li><a href="effects_bigslide.html">Big slide effects</a></li>
    <li><a href="effects_slide.html">Slide effects</a></li>
    <li><a href="effects_blind.html">Blind effects</a></li>
    <li><a href="effects_blindslide.html">Blind/Slide effects</a></li>
    <li><a href="effects_fadeappear.html">Fade/Appear effects</a></li>
  </ul>
  <ul style="float:left;margin-top:0">
    <li><a href="effects_onload.html">Onload effects</a></li>
    <li><a href="effects_scroll.html">Scroll effects</a></li>
    <li><a href="effects_grow_shrink.html">Grow/Shrink effects</a></li>
    <li><a href="effects_queue.html">Queue effects</a></li>
    <li><a href="effects_queue_limit.html">Queue limit effects</a></li>
  </ul>
</div>

<div class="demo"/>

</body>
</html>

   
  








Related examples in the same category

1.Full Effects Test Suite
2.Demo of MochiKit Visual Elements