git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/fx/tests/example_dojoAnimations.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
   6         <title>skeleton page | The Dojo Toolkit</title>
   7
   8         <style type="text/css">
   9                 @import "../../../dijit/themes/tundra/tundra.css";
  10                 body, html {
  11                         width:100%;
  12                         margin:0;
  13                         padding:0;
  14                         font:11pt Arial,sans-serif;
  15                         color:#666;
  16                 }
  17
  18                 #container {
  19                         width:760px;
  20                         margin:0 auto;
  21                 }
  22
  23                 div.testBox {
  24                         border:2px solid #ededed;
  25                         background:#fefefe;
  26                         height:200px;
  27                         margin:0 auto;
  28                         position:relative;
  29                 }
  30
  31                 div.testItem {
  32                         position:absolute;
  33                         background:#fff url('images/averycutedog.jpg') no-repeat center center;
  34                         border:2px solid #f0f0f0;
  35                         margin:0;
  36                         padding:0;
  37                         height:175px;
  38                         width:175px;
  39                         top:10px;
  40                         left:10px;
  41                 }
  42
  43                 .altItem {
  44                         position:absolute;
  45                         top:10px;
  46                         left:295px;
  47                 }
  48
  49                 .pad {
  50                         padding:4px;
  51                 }
  52
  53                 .trick {
  54                         height:175px;
  55                         width:175px;
  56                         visibility:hidden;
  57                 }
  58                 .odd,
  59                 .even { margin-left:1px; }
  60
  61                 #lorem {
  62                         position:absolute;
  63                         top:10px;
  64                         left:15px;
  65                         font:8pt Arial,sans-serif;
  66                         width:175px;
  67                         padding:4px;
  68                         background:#ededed;
  69                 }
  70
  71                 #fisheyeList {
  72                         width:95px;
  73                         background:#666;
  74                         padding:7px;
  75                 }
  76                 #fisheyeList li {
  77                         color:#fff;
  78                 }
  79         </style>
  80
  81         <script type="text/javascript" src="../../../dojo/dojo.js"
  82                 djConfig="parseOnLoad:true, isDebug:true"></script>
  83
  84         <script type="text/javascript">
  85                 dojo.require("dijit.form.Button"); // for the tests
  86
  87                 // core animations:
  88                 dojo.require("dojo.fx");
  89
  90                 // provides dojo.query() animations:
  91                 dojo.require("dojo.NodeList-fx");
  92                 dojo.require("dojox.fx.ext-dojo.NodeList");
  93
  94                 // core dojox package:
  95                 dojo.require("dojox.fx");
  96                 dojo.require("dojox.fx._core"); // _Line
  97
  98                 // addons:
  99                 dojo.require("dojox.fx.style");
 100                 dojo.require("dojox.fx.easing");
 101
 102                 // examples inline:
 103                 dojo.require("dojox.widget.FisheyeLite");
 104         </script>
 105
 106 </head>
 107 <body class="tundra">
 108         <div id="container">
 109
 110         <h2>Dojo FX: base animations</h2>
 111
 112         <button dojoType="dijit.form.Button">
 113                 Fade In/Out
 114                 <script type="dojo/method" event="onClick">
 115                         dojo.fadeOut({ node:"testSlide",
 116                                 onEnd:function(){
 117                                         dojo.fadeIn({ node:"testSlide", delay:300 }).play();
 118                                 }
 119                         }).play();
 120                 </script>
 121         </button>
 122
 123         <button dojoType="dijit.form.Button">
 124                 animateProperty: height
 125                 <script type="dojo/method" event="onClick">
 126                         dojo.animateProperty({
 127                                 node:"testSlide",
 128                                 properties:{ height:{ end:1, unit:"px" } },
 129                                 onEnd:function(){
 130                                         dojo.animateProperty({
 131                                                 node:"testSlide",
 132                                                 delay:300,
 133                                                 properties:{ height:{ end:175, unit:"px" } }
 134                                         }).play();
 135                                 }
 136                         }).play();
 137                 </script>
 138         </button>
 139
 140         <button dojoType="dijit.form.Button">
 141                 animateProperty: width
 142                 <script type="dojo/method" event="onClick">
 143                         dojo.animateProperty({
 144                                 node:"testSlide",
 145                                 properties:{ width:{ end:1, unit:"px" } },
 146                                 onEnd:function(){
 147                                         dojo.animateProperty({
 148                                                 node:"testSlide",
 149                                                 delay:300,
 150                                                 properties:{ width:{ end:175, unit:"px" } }
 151                                         }).play();
 152                                 }
 153                         }).play();
 154                 </script>
 155         </button>
 156
 157         <div class="testBox" id="testSlideWrapper">
 158                 <div class="testItem" id="testSlide">
 159                         <div class="trick">&nbsp;</div>
 160                 </div>
 161         </div>
 162
 163
 164         <h2>Animate CSS Properties:</h2>
 165
 166         <button dojoType="dijit.form.Button">
 167                 marginLeft
 168                 <script type="dojo/method" event="onClick">
 169                         dojo.animateProperty({
 170                                 node:"lorem",
 171                                 properties:{
 172                                         marginLeft:{ end:322, unit:"px", start:1 }
 173                                 },
 174                                 onEnd: function(){
 175                                         dojo.animateProperty({
 176                                                 node:"lorem",
 177                                                 properties:{
 178                                                         marginLeft:{ end:1, start:322, unit:"px" }
 179                                                 },
 180                                                 delay:300
 181                                         }).play();
 182                                 }
 183                         }).play();
 184                 </script>
 185         </button>
 186
 187         <button dojoType="dijit.form.Button">
 188                 left / paddingTop
 189                 <script type="dojo/method" event="onClick">
 190                         dojo.animateProperty({
 191                                 node:"lorem",
 192                                 properties:{
 193                                         left: {
 194                                                 end: dojo.marginBox("cssNodeWrap").w - 195,
 195                                                 unit:"px"
 196                                         },
 197                                         paddingTop:{ end:17, unit:"px", start:4 }
 198                                 },
 199                                 onEnd: function(){
 200                                         dojo.animateProperty({
 201                                                 node:"lorem",
 202                                                 properties:{
 203                                                         paddingTop:{ end:4, start:17, unit:"px" },
 204                                                         left: { end: 10, unit:"px" }
 205                                                 },
 206                                                 delay:300
 207                                         }).play();
 208                                 }
 209                         }).play();
 210                 </script>
 211         </button>
 212
 213         <button dojoType="dijit.form.Button">
 214                 fontSize / width
 215                 <script type="dojo/method" event="onClick">
 216                         dojo.animateProperty({
 217                                 node:"lorem",
 218                                 properties:{
 219                                         width: { end:700, unit:"px", start:175 },
 220                                         fontSize:{ end:21, unit:"pt", start:11 }
 221                                 },
 222                                 onEnd: function(){
 223                                         dojo.animateProperty({
 224                                                 node:"lorem",
 225                                                 properties:{
 226                                                         width: { end:175, unit:"px" },
 227                                                         fontSize:{ end:11, start:21, unit:"pt" }
 228                                                 },
 229                                                 delay:700
 230                                         }).play();
 231                                 }
 232                         }).play();
 233                 </script>
 234         </button>
 235
 236         <div class="testBox" id="cssNodeWrap">
 237                 <div id="cssNode">
 238                         <p id="lorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 239                         Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim.
 240                         Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna.
 241                         Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti
 242                         sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
 243                         In erat.
 244                         </p>
 245                 </div>
 246         </div>
 247
 248         <h2>dojo.fx - Core animations</h2>
 249
 250         <button dojoType="dijit.form.Button">
 251                 Slide
 252                 <script type="dojo/method" event="onClick">
 253                         // we're 175px, slide to containerWidth - 195
 254                         var left = dojo.marginBox("testSlideWrapper").w - 195;
 255                         // make and play the animation
 256                         dojo.fx.slideTo({
 257                                 top:10,
 258                                 left:left,
 259                                 node:"testSlideToo",
 260                                 onEnd: function(){
 261                                         // slide'er back:
 262                                         dojo.fx.slideTo({ top:10, left:10, node:"testSlideToo" }).play();
 263                                 }
 264                         }).play()
 265                 </script>
 266         </button>
 267
 268         <button dojoType="dijit.form.Button">
 269                 Combine Slide / Fade
 270                 <script type="dojo/method" event="onClick">
 271                         var anim1 = dojo.fx.slideTo({
 272                                 top: 10,
 273                                 left: dojo.marginBox("testSlideWrapper").w - 195,
 274                                 node: "testSlideToo",
 275                                 onEnd: function(){
 276                                         // slide'er back:
 277                                         dojo.fx.slideTo({ top:10, left:10, node:"testSlideToo" }).play();
 278                                 }
 279                         });
 280                         var anim2 = dojo.fadeOut({
 281                                 node: "testSlideToo",
 282                                 onEnd: function(){
 283                                         // we could switch out the backgroundImage property here.
 284                                         dojo.fadeIn({ node:"testSlideToo" }).play();
 285                                 }
 286                         });
 287                         var combined = dojo.fx.combine([anim1,anim2]);
 288                         combined.play();
 289                 </script>
 290         </button>
 291
 292         <button dojoType="dijit.form.Button">
 293                 Chain (4)
 294                 <script type="dojo/method" event="onClick">
 295                         var anim1 = dojo.fadeOut({ node:"testSlideToo",
 296                                 // so anim1 is over, making this onEnd and anim2 basically
 297                                 // a combine() (depending on the duration: )
 298                                 onEnd:function(){
 299                                         var delay = 125;
 300                                         dojo.fadeIn({ node:'testSlideToo' }).play(delay);
 301                                 }
 302                         });
 303
 304                         var anim2 = dojo.animateProperty({
 305                                 node:"testSlideToo",
 306                                 properties:{
 307                                         left:{
 308                                                 end: dojo.marginBox("testSlideTooWrap").w - 195,
 309                                                 unit: "px"
 310                                         }
 311                                 },
 312                                 onEnd: function(){
 313                                         dojo.fx.slideTo({ node:"testSlideToo", top:10, left:10 }).play(123);
 314                                 }
 315                         });
 316                         dojo.fx.chain([anim1,anim2]).play();
 317                 </script>
 318         </button>
 319
 320         <div class="testBox" id="testSlideTooWrap">
 321                 <div class="testItem" id="testSlideToo">
 322                         <div class="trick"></div>
 323                 </div>
 324         </div>
 325
 326         <h2>dojo.query FX</h2>
 327
 328         <button dojoType="dijit.form.Button">
 329                 fade .even
 330                 <script type="dojo/method" event="onClick">
 331                         dojo.query(".even","queryUl").fadeOut({
 332                                 onEnd:function(){
 333                                         dojo.query(".even","queryUl").fadeIn({ delay: 300 }).play();
 334                                 }
 335                         }).play();
 336                 </script>
 337         </button>
 338
 339         <button dojoType="dijit.form.Button">
 340                 fade .odd
 341                 <script type="dojo/method" event="onClick">
 342                         dojo.query(".odd","queryUl").fadeOut({
 343                                 onEnd:function(){
 344                                         dojo.query(".odd","queryUl").fadeIn({ delay: 300 }).play();
 345                                 }
 346                         }).play();
 347                 </script>
 348         </button>
 349
 350         <button dojoType="dijit.form.Button">
 351                 shift .odd
 352                 <script type="dojo/method" event="onClick">
 353                         dojo.query(".odd","queryUl").animateProperty({
 354                                 properties:{
 355                                         marginLeft:{ end:34, unit:"px" }
 356                                 },
 357                                 duration:300,
 358                                 onEnd:function(){
 359                                         dojo.query(".odd","queryUl").animateProperty({
 360                                                 delay: 300,
 361                                                 properties:{
 362                                                         marginLeft:{ end:1, unit:"px" }
 363                                                 }
 364                                         }).play();
 365                                 }
 366                         }).play();
 367                 </script>
 368         </button>
 369
 370         <button dojoType="dijit.form.Button">
 371                 mmm, easing
 372                 <script type="dojo/method" event="onClick">
 373                         dojo.query(".odd","queryUl").animateProperty({
 374                                 easing:dojox.fx.easing.backOut,
 375                                 properties:{
 376                                         marginLeft:{ end:34, unit:"px" }
 377                                 },
 378                                 duration:600,
 379                                 onEnd:function(){
 380                                         dojo.query(".odd","queryUl").animateProperty({
 381                                                 delay: 300,
 382                                                 duration:1300,
 383                                                 easing:dojox.fx.easing.bounceOut,
 384                                                 properties:{
 385                                                         marginLeft:{ end:1, unit:"px" }
 386                                                 }
 387                                         }).play();
 388                                 }
 389                         }).play();
 390                 </script>
 391         </button>
 392
 393         <button dojoType="dijit.form.Button">
 394                 Setup FisheyeList
 395                 <script type="dojo/method" event="onClick">
 396                         this.setAttribute("disabled",true);
 397                         dojo.query("li","fisheyeList").forEach(function(n){
 398                                 new dojox.widget.FisheyeLite({
 399                                         properties:{
 400                                                 marginLeft:17,
 401                                                 width:1.175
 402                                         },
 403                                         onClick:function(){
 404                                                 dojo.byId("clickAlert").innerHTML = "clicked: " + this.id;
 405                                         },
 406                                         easeIn:dojox.fx.easing.elasticOut,
 407                                         durationIn:1700
 408                                 },n).startup();
 409                         }).style("cursor","pointer");
 410                 </script>
 411         </button>
 412
 413         <div class="testBox" id="queryParent">
 414                 <ul id="queryUl">
 415                         <li class="odd">odd row</li>
 416                         <li class="even">even row</li>
 417                         <li class="odd">odd row</li>
 418                         <li class="even">even row</li>
 419                         <li class="odd">odd row</li>
 420                         <li class="even">even row</li>
 421                         <li class="odd">odd row</li>
 422                         <li class="even">even row</li>
 423                         <li class="odd">odd row</li>
 424                 </ul>
 425                 <div class="altItem">
 426                         <p>(FisheyeLite makes this easy. be creative:)</p>
 427                         <ul id="fisheyeList">
 428                                 <li class="odd">odd row</li>
 429                                 <li class="even">even row</li>
 430                                 <li class="odd">odd row</li>
 431                                 <li class="even">even row</li>
 432                                 <li class="odd">odd row</li>
 433                                 <li class="even" id="testIdFish">with id</li>
 434                                 <li class="odd">odd row</li>
 435                         </ul>
 436                         <p id="clickAlert"></p>
 437                 </div>
 438         </div>
 439
 440         </div>
 441 </body>
 442 </html>