443 lines
9.9 KiB
HTML
443 lines
9.9 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<title>skeleton page | The Dojo Toolkit</title>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
@import "../../../dijit/themes/tundra/tundra.css";
|
||
|
|
body, html {
|
||
|
|
width:100%;
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
font:11pt Arial,sans-serif;
|
||
|
|
color:#666;
|
||
|
|
}
|
||
|
|
|
||
|
|
#container {
|
||
|
|
width:760px;
|
||
|
|
margin:0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.testBox {
|
||
|
|
border:2px solid #ededed;
|
||
|
|
background:#fefefe;
|
||
|
|
height:200px;
|
||
|
|
margin:0 auto;
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.testItem {
|
||
|
|
position:absolute;
|
||
|
|
background:#fff url('images/averycutedog.jpg') no-repeat center center;
|
||
|
|
border:2px solid #f0f0f0;
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
height:175px;
|
||
|
|
width:175px;
|
||
|
|
top:10px;
|
||
|
|
left:10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.altItem {
|
||
|
|
position:absolute;
|
||
|
|
top:10px;
|
||
|
|
left:295px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pad {
|
||
|
|
padding:4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.trick {
|
||
|
|
height:175px;
|
||
|
|
width:175px;
|
||
|
|
visibility:hidden;
|
||
|
|
}
|
||
|
|
.odd,
|
||
|
|
.even { margin-left:1px; }
|
||
|
|
|
||
|
|
#lorem {
|
||
|
|
position:absolute;
|
||
|
|
top:10px;
|
||
|
|
left:15px;
|
||
|
|
font:8pt Arial,sans-serif;
|
||
|
|
width:175px;
|
||
|
|
padding:4px;
|
||
|
|
background:#ededed;
|
||
|
|
}
|
||
|
|
|
||
|
|
#fisheyeList {
|
||
|
|
width:95px;
|
||
|
|
background:#666;
|
||
|
|
padding:7px;
|
||
|
|
}
|
||
|
|
#fisheyeList li {
|
||
|
|
color:#fff;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"
|
||
|
|
djConfig="parseOnLoad:true, isDebug:true"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
dojo.require("dijit.form.Button"); // for the tests
|
||
|
|
|
||
|
|
// core animations:
|
||
|
|
dojo.require("dojo.fx");
|
||
|
|
|
||
|
|
// provides dojo.query() animations:
|
||
|
|
dojo.require("dojo.NodeList-fx");
|
||
|
|
dojo.require("dojox.fx.ext-dojo.NodeList");
|
||
|
|
|
||
|
|
// core dojox package:
|
||
|
|
dojo.require("dojox.fx");
|
||
|
|
dojo.require("dojox.fx._core"); // _Line
|
||
|
|
|
||
|
|
// addons:
|
||
|
|
dojo.require("dojox.fx.style");
|
||
|
|
dojo.require("dojox.fx.easing");
|
||
|
|
|
||
|
|
// examples inline:
|
||
|
|
dojo.require("dojox.widget.FisheyeLite");
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body class="tundra">
|
||
|
|
<div id="container">
|
||
|
|
|
||
|
|
<h2>Dojo FX: base animations</h2>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
Fade In/Out
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
dojo.fadeOut({ node:"testSlide",
|
||
|
|
onEnd:function(){
|
||
|
|
dojo.fadeIn({ node:"testSlide", delay:300 }).play();
|
||
|
|
}
|
||
|
|
}).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
animateProperty: height
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
dojo.animateProperty({
|
||
|
|
node:"testSlide",
|
||
|
|
properties:{ height:{ end:1, unit:"px" } },
|
||
|
|
onEnd:function(){
|
||
|
|
dojo.animateProperty({
|
||
|
|
node:"testSlide",
|
||
|
|
delay:300,
|
||
|
|
properties:{ height:{ end:175, unit:"px" } }
|
||
|
|
}).play();
|
||
|
|
}
|
||
|
|
}).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
animateProperty: width
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
dojo.animateProperty({
|
||
|
|
node:"testSlide",
|
||
|
|
properties:{ width:{ end:1, unit:"px" } },
|
||
|
|
onEnd:function(){
|
||
|
|
dojo.animateProperty({
|
||
|
|
node:"testSlide",
|
||
|
|
delay:300,
|
||
|
|
properties:{ width:{ end:175, unit:"px" } }
|
||
|
|
}).play();
|
||
|
|
}
|
||
|
|
}).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div class="testBox" id="testSlideWrapper">
|
||
|
|
<div class="testItem" id="testSlide">
|
||
|
|
<div class="trick"> </div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Animate CSS Properties:</h2>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
marginLeft
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
dojo.animateProperty({
|
||
|
|
node:"lorem",
|
||
|
|
properties:{
|
||
|
|
marginLeft:{ end:322, unit:"px", start:1 }
|
||
|
|
},
|
||
|
|
onEnd: function(){
|
||
|
|
dojo.animateProperty({
|
||
|
|
node:"lorem",
|
||
|
|
properties:{
|
||
|
|
marginLeft:{ end:1, start:322, unit:"px" }
|
||
|
|
},
|
||
|
|
delay:300
|
||
|
|
}).play();
|
||
|
|
}
|
||
|
|
}).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
left / paddingTop
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
dojo.animateProperty({
|
||
|
|
node:"lorem",
|
||
|
|
properties:{
|
||
|
|
left: {
|
||
|
|
end: dojo.marginBox("cssNodeWrap").w - 195,
|
||
|
|
unit:"px"
|
||
|
|
},
|
||
|
|
paddingTop:{ end:17, unit:"px", start:4 }
|
||
|
|
},
|
||
|
|
onEnd: function(){
|
||
|
|
dojo.animateProperty({
|
||
|
|
node:"lorem",
|
||
|
|
properties:{
|
||
|
|
paddingTop:{ end:4, start:17, unit:"px" },
|
||
|
|
left: { end: 10, unit:"px" }
|
||
|
|
},
|
||
|
|
delay:300
|
||
|
|
}).play();
|
||
|
|
}
|
||
|
|
}).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
fontSize / width
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
dojo.animateProperty({
|
||
|
|
node:"lorem",
|
||
|
|
properties:{
|
||
|
|
width: { end:700, unit:"px", start:175 },
|
||
|
|
fontSize:{ end:21, unit:"pt", start:11 }
|
||
|
|
},
|
||
|
|
onEnd: function(){
|
||
|
|
dojo.animateProperty({
|
||
|
|
node:"lorem",
|
||
|
|
properties:{
|
||
|
|
width: { end:175, unit:"px" },
|
||
|
|
fontSize:{ end:11, start:21, unit:"pt" }
|
||
|
|
},
|
||
|
|
delay:700
|
||
|
|
}).play();
|
||
|
|
}
|
||
|
|
}).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div class="testBox" id="cssNodeWrap">
|
||
|
|
<div id="cssNode">
|
||
|
|
<p id="lorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||
|
|
Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim.
|
||
|
|
Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna.
|
||
|
|
Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti
|
||
|
|
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
|
||
|
|
In erat.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>dojo.fx - Core animations</h2>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
Slide
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
// we're 175px, slide to containerWidth - 195
|
||
|
|
var left = dojo.marginBox("testSlideWrapper").w - 195;
|
||
|
|
// make and play the animation
|
||
|
|
dojo.fx.slideTo({
|
||
|
|
top:10,
|
||
|
|
left:left,
|
||
|
|
node:"testSlideToo",
|
||
|
|
onEnd: function(){
|
||
|
|
// slide'er back:
|
||
|
|
dojo.fx.slideTo({ top:10, left:10, node:"testSlideToo" }).play();
|
||
|
|
}
|
||
|
|
}).play()
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
Combine Slide / Fade
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
var anim1 = dojo.fx.slideTo({
|
||
|
|
top: 10,
|
||
|
|
left: dojo.marginBox("testSlideWrapper").w - 195,
|
||
|
|
node: "testSlideToo",
|
||
|
|
onEnd: function(){
|
||
|
|
// slide'er back:
|
||
|
|
dojo.fx.slideTo({ top:10, left:10, node:"testSlideToo" }).play();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
var anim2 = dojo.fadeOut({
|
||
|
|
node: "testSlideToo",
|
||
|
|
onEnd: function(){
|
||
|
|
// we could switch out the backgroundImage property here.
|
||
|
|
dojo.fadeIn({ node:"testSlideToo" }).play();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
var combined = dojo.fx.combine([anim1,anim2]);
|
||
|
|
combined.play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
Chain (4)
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
var anim1 = dojo.fadeOut({ node:"testSlideToo",
|
||
|
|
// so anim1 is over, making this onEnd and anim2 basically
|
||
|
|
// a combine() (depending on the duration: )
|
||
|
|
onEnd:function(){
|
||
|
|
var delay = 125;
|
||
|
|
dojo.fadeIn({ node:'testSlideToo' }).play(delay);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var anim2 = dojo.animateProperty({
|
||
|
|
node:"testSlideToo",
|
||
|
|
properties:{
|
||
|
|
left:{
|
||
|
|
end: dojo.marginBox("testSlideTooWrap").w - 195,
|
||
|
|
unit: "px"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onEnd: function(){
|
||
|
|
dojo.fx.slideTo({ node:"testSlideToo", top:10, left:10 }).play(123);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
dojo.fx.chain([anim1,anim2]).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div class="testBox" id="testSlideTooWrap">
|
||
|
|
<div class="testItem" id="testSlideToo">
|
||
|
|
<div class="trick"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>dojo.query FX</h2>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
fade .even
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
dojo.query(".even","queryUl").fadeOut({
|
||
|
|
onEnd:function(){
|
||
|
|
dojo.query(".even","queryUl").fadeIn({ delay: 300 }).play();
|
||
|
|
}
|
||
|
|
}).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
fade .odd
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
dojo.query(".odd","queryUl").fadeOut({
|
||
|
|
onEnd:function(){
|
||
|
|
dojo.query(".odd","queryUl").fadeIn({ delay: 300 }).play();
|
||
|
|
}
|
||
|
|
}).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
shift .odd
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
dojo.query(".odd","queryUl").animateProperty({
|
||
|
|
properties:{
|
||
|
|
marginLeft:{ end:34, unit:"px" }
|
||
|
|
},
|
||
|
|
duration:300,
|
||
|
|
onEnd:function(){
|
||
|
|
dojo.query(".odd","queryUl").animateProperty({
|
||
|
|
delay: 300,
|
||
|
|
properties:{
|
||
|
|
marginLeft:{ end:1, unit:"px" }
|
||
|
|
}
|
||
|
|
}).play();
|
||
|
|
}
|
||
|
|
}).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
mmm, easing
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
dojo.query(".odd","queryUl").animateProperty({
|
||
|
|
easing:dojox.fx.easing.backOut,
|
||
|
|
properties:{
|
||
|
|
marginLeft:{ end:34, unit:"px" }
|
||
|
|
},
|
||
|
|
duration:600,
|
||
|
|
onEnd:function(){
|
||
|
|
dojo.query(".odd","queryUl").animateProperty({
|
||
|
|
delay: 300,
|
||
|
|
duration:1300,
|
||
|
|
easing:dojox.fx.easing.bounceOut,
|
||
|
|
properties:{
|
||
|
|
marginLeft:{ end:1, unit:"px" }
|
||
|
|
}
|
||
|
|
}).play();
|
||
|
|
}
|
||
|
|
}).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
Setup FisheyeList
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
this.setAttribute("disabled",true);
|
||
|
|
dojo.query("li","fisheyeList").forEach(function(n){
|
||
|
|
new dojox.widget.FisheyeLite({
|
||
|
|
properties:{
|
||
|
|
marginLeft:17,
|
||
|
|
width:1.175
|
||
|
|
},
|
||
|
|
onClick:function(){
|
||
|
|
dojo.byId("clickAlert").innerHTML = "clicked: " + this.id;
|
||
|
|
},
|
||
|
|
easeIn:dojox.fx.easing.elasticOut,
|
||
|
|
durationIn:1700
|
||
|
|
},n).startup();
|
||
|
|
}).style("cursor","pointer");
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div class="testBox" id="queryParent">
|
||
|
|
<ul id="queryUl">
|
||
|
|
<li class="odd">odd row</li>
|
||
|
|
<li class="even">even row</li>
|
||
|
|
<li class="odd">odd row</li>
|
||
|
|
<li class="even">even row</li>
|
||
|
|
<li class="odd">odd row</li>
|
||
|
|
<li class="even">even row</li>
|
||
|
|
<li class="odd">odd row</li>
|
||
|
|
<li class="even">even row</li>
|
||
|
|
<li class="odd">odd row</li>
|
||
|
|
</ul>
|
||
|
|
<div class="altItem">
|
||
|
|
<p>(FisheyeLite makes this easy. be creative:)</p>
|
||
|
|
<ul id="fisheyeList">
|
||
|
|
<li class="odd">odd row</li>
|
||
|
|
<li class="even">even row</li>
|
||
|
|
<li class="odd">odd row</li>
|
||
|
|
<li class="even">even row</li>
|
||
|
|
<li class="odd">odd row</li>
|
||
|
|
<li class="even" id="testIdFish">with id</li>
|
||
|
|
<li class="odd">odd row</li>
|
||
|
|
</ul>
|
||
|
|
<p id="clickAlert"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|