1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
<!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>
|
