git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/fx/tests/test_Shadow.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>dojox.fx.Shadow - Drop Shadows for DomNodes | The Dojo Toolkit</title>
   6
   7         <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
   8         <script type="text/javascript" src="../Shadow.js"></script>
   9         <style type="text/css">
  10                 @import "../../../dojo/resources/dojo.css";
  11                 @import "../../../dijit/themes/dijit.css";
  12                 @import "../../../dijit/themes/tundra/tundra.css";
  13                 @import "../../../dijit/tests/css/dijitTests.css";
  14         </style>
  15         <script type="text/javascript">
  16                 dojo.require("dojo.dnd.Moveable");
  17                 dojo.require("dojox.layout.FloatingPane");
  18                 dojo.require("dijit._Calendar");
  19                 var enabled = true, randInt=0;
  20                 dojo.addOnLoad(function(){
  21
  22                         dojo.query(".hasShadow").forEach(function(n){
  23                                 var foo = new dojox.fx.Shadow({ node:n });
  24                                 foo.startup();
  25
  26                                 if(++randInt%2===0){
  27                                         var tmp = new dojo.dnd.Moveable(n);
  28                                 }
  29
  30                                 setTimeout(dojo.hitch(foo,"resize"),4000);
  31                                 //setTimeout(dojo.hitch(foo,"setOpacity","0.6",{ duration: 500 }),2000);
  32                                 dojo.connect(n,"onmouseover",dojo.hitch(foo,function(){
  33                                         this.setOpacity(1);
  34                                 }));
  35                                 dojo.connect(n,"onmouseout",dojo.hitch(foo,function(){
  36                                         if(!dojo.isIE){
  37                                                 this.setOpacity(0.5);
  38                                         }
  39                                 }));
  40                                 dojo.connect(n,"onclick",dojo.hitch(foo,function(){
  41                                         this.setDisabled(!this.disabled);
  42                                 }));
  43
  44                         });
  45
  46                         /*
  47                         var div = document.createElement('div');
  48                         var testNode = document.createElement('div');
  49
  50                         testNode.appendChild(div);
  51                         div.innerHTML = "Lorem Ipsum";
  52                         dojo.body().appendChild(testNode);
  53
  54                         //dojo.addClass(testNode,"dijitInline");
  55
  56                         var aDijit = new dijit._Calendar({},div);
  57                         aDijit.startup();
  58
  59                         var testShadow = new dojox.fx.Shadow({ node: aDijit.domNode });
  60                         testShadow.startup();
  61                         testShadow.resize();
  62                                 */
  63                 });
  64
  65
  66         </script>
  67 </head>
  68 <body class="tundra">
  69
  70         <h1 class="testTitle">dojox.fx.Shadow tests</h1>
  71
  72         <div>
  73                 <h2>with margin:</h2>
  74                 <div class="hasShadow" style="background:#fff; border:1px solid #a0a0a0; width:100px; height:100px; margin:20px;"> <p>Lorem</p> </div>
  75
  76                 <h2>with padding:</h2>
  77                 <div class="hasShadow" style="background:#fff; border:1px solid #a0a0a0; width:100px; height:100px; padding:10px; "> <p>Lorem</p> </div>
  78
  79                 <h2>no padding:</h2>
  80                 <div class="hasShadow" style="background:#fff; border:1px solid #a0a0a0; width:100px; height:100px;"> <p>Lorem</p> </div>
  81
  82                 <h2>position:absolute</h2>
  83                 <div class="hasShadow" style="background:#fff; border:1px solid #a0a0a0; width:100px; height:100px; position:absolute; top:0px; left:200px; "> <p>Lorem</p> </div>
  84
  85                 <br style="clear:both;">
  86         </div>
  87
  88
  89         <br><br>
  90
  91
  92 </body>
  93 </html>