mochikit_v14/examples/effects/effects_onload.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   4 <head>
   5   <title>script.aculo.us Effects functional test file</title>
   6   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   7     <script src="../../MochiKit/MochiKit.js" type="text/javascript"></script>
   8     <script src="../../MochiKit/Position.js" type="text/javascript"></script>
   9     <script src="../../MochiKit/Visual.js" type="text/javascript"></script>
  10 <body>
  11 <h1>script.aculo.us Effects functional test file</h1>
  12
  13 <h2>Effect.Highlight</h2>
  14
  15 <div id="debug"> </div>
  16
  17 <a href="#" onclick="MochiKit.Visual.slideDown('d1'); return false;">asdasd</a>
  18
  19 <div id="d1" onclick="MochiKit.Visual.slideUp('d1');" style="overflow:hidden;"><div  style="background-color:#ff8080;">
  20
  21   (highlight to red)
  22
  23 </div></div>
  24
  25 <div id="d2" style="width:100px;height:100px;background-color:#80ff80;">
  26   (highlight to greenish)
  27 </div>
  28
  29 <div id="d3" style="width:100px;height:100px;background-color:#dde;">
  30   (bottom-right-grow)
  31 </div>
  32
  33 <div id="d4" style="width:100px;height:100px;background-color:#dde;" onclick="MochiKit.Visual.shake(this)">
  34   click to test shake
  35 </div>
  36
  37 <div id="d5" style="width:100px;height:100px;background-color:#dde;" onclick="MochiKit.Visual.puff(this)">
  38   click to test puff
  39 </div>
  40 <a href="#" onclick="MochiKit.DOM.showElement('d5'); return false;">show puff div again</a>
  41
  42 <a href="#" onclick="MochiKit.Visual.appear('d6')">test appear</a>
  43 <div id="d6" style="width:100px;height:100px;background-color:#dde;display:none">
  44   appear
  45 </div>
  46
  47 <a href="#" onclick="MochiKit.Visual.grow('d7')">test grow</a>
  48 <div id="d7" style="width:100px;height:100px;background-color:#dde;display:none">
  49   grow
  50 </div>
  51
  52 <a href="#" onclick="MochiKit.Visual.pulsate('d8')">test pulsate</a>
  53 <div id="d8" style="width:100px;height:100px;background-color:#dde;">
  54   pulsate
  55 </div>
  56
  57 <script type="text/javascript" language="javascript" charset="utf-8">
  58 // <![CDATA[
  59   new MochiKit.Visual.Highlight("d2",{startcolor:"#000000"});
  60   MochiKit.Visual.grow("d3",{duration:5.0,direction: 'bottom-right',opacityTransition:MochiKit.Visual.Transitions.linear});
  61   MochiKit.Visual.blindDown("d1");
  62 // ]]>
  63 </script>
  64
  65 </body>
  66 </html>