+++ /dev/null
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-<head>
- <title>dojox.fx.sizeTo | experimental fx add-ons for the Dojo Toolkit</title>
-
- <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
- <script type="text/javascript" src="../_base.js"></script>
- <style type="text/css">
- @import "../../../dojo/resources/dojo.css";
- @import "../../../dijit/themes/dijit.css";
- @import "../../../dijit/themes/tundra/tundra.css";
- @import "../../../dijit/tests/css/dijitTests.css";
- .testBox {
- position:absolute;
- top:0; left:0;
- width:50px;
- height:50px;
- background:#ededed;
- border:1px solid #b7b7b7;
- -moz-border-radius:6pt;
- -webkit-border-radius:5pt;
- overflow:hidden;
- }
- </style>
- <script type="text/javascript">
-
- dojo.require("dojox.fx.ext-dojo.NodeList");
-
- var test1 = function(e){
- // this is our click test,
- dojox.fx.sizeTo({
- node: e.target,
- width: 120,
- height:120,
- duration:250
- }).play(5);
- };
-
- var testundo = function(e){
- dojox.fx.sizeTo({
- node: e.target,
- width:50,
- height:50,
- duration:320
- }).play(5);
-
-
- };
-
- var test2 = function(e){
- dojox.fx.sizeTo({
- node: e.target,
- width: 120,
- height:120,
- duration:120,
- method:"combine"
- }).play(5);
- };
-
- var noIdTest = function(){
- var myNode = dojo.query(".noIdHere")[0]; // first one wins
- if(myNode){
- // mmm, fake events (all we're using is the target anyway ... )
- (!dojo.hasClass(myNode,"testRun") ? test2 : testundo)({ target: myNode });
- dojo.toggleClass(myNode,"testRun");
- }
- };
-
- var init = function(){
-
- // lets setup out connections, etc ...
- dojo.connect(dojo.byId("sizer1"),"onmousedown","test1");
- dojo.connect(dojo.byId("sizer1"),"onmouseup","testundo"); // generic resest
-
- // did you know dojo normalizes onmouseenter onmouseleave!?!? neat. ie got _one_ thing right.
- dojo.connect(dojo.byId("sizer2"),"onmouseenter","test2");
- dojo.connect(dojo.byId("sizer2"),"onmouseout","testundo");
-
- // example using dojo.query to get a couple of nodes and roll into one anim
- var hasRun = false;
- dojo.connect(dojo.byId("sizer3"),"onclick",function(e){
- var _anims = [];
- dojo.query(".testBox").forEach(function(n){
- _anims.push(
- dojox.fx.sizeTo({ node: n,
- width: ( hasRun ? "50" : "150"),
- height: ( hasRun ? "50" : "150"),
- method:"chain",
- duration:720
- })
- );
- });
- hasRun=!hasRun;
- var anim = dojo.fx.combine(_anims);
- anim.play();
- });
- };
- dojo.addOnLoad(init);
- </script>
-</head>
-<body class="tundra">
- <h1 class="testTitle">dojox.fx.sizeTo test</h1>
-
- <p>quick sizeTo API overview:</p>
-
- <pre>
- dojox.fx.sizeTo({
- // basic requirements:
- node: "aDomNodeId", // or a domNode reference
- width: 200, // measured in px
- height: 200, // measured in px
- method: "chain" // is default, or "combine"
- });
- </pre>
- <p>
- little test blocks (works in FF/win/mac + ie6) <a href="javascript:void(0)" onClick="dojo.query('.testBox').sizeTo({ width: 200, height: 200, duration:400 }).play()">dojo.query() test</a>
- </p>
-
- <div style="position:relative; height:60px; width:600px; margin:0 auto;">
- <div id="sizer1" class="testBox">
- mouse down / mouse up
- </div>
- <div id="sizer2" class="testBox" style="left:60px;" >
- hover / exit
- </div>
- <div class="testBox noIdHere" style="left:120px; ">
- <a href="javascript:noIdTest()">noIdTest()</a>
- </div>
- <div class="testBox" id="sizer3" style="left:180px;">
- all of em'
- </div>
- </div>
- <br style="clear:both;">
-
- (click the box labeled "all of em'" again to reset all nodes)
-
- HTML AFTER
- <br>
-
-</body>
-</html>
projects / eow / blobdiff