Dojo Examples – I

<html>
<head>
<title>Dojo Toolkit Working Examples</title>
<!– load the dojo toolkit base –>
<script type=”text/javascript” src=”dojo/dojo.js”
djConfig=”parseOnLoad:true, isDebug:true”></script>
<script type=”text/javascript”>
/* our JavaScript will go here */
dojo.require(“dijit.form.Button”);
dojo.require(“dijit.TitlePane”);
dojo.require(“dojo.NodeList-fx”);
//——Example – 1————-
dojo.addOnLoad(function(){
dojo.byId(“testHeading”).innerHTML = “We’re on our way!”
console.log(“onLoad fires after require() is done”);
dojo.query(“#testHeading”)
// add “testClass” to its class=”” attribute
.addClass(“testClass”)
// and fade it out after 500 ms
.fadeOut({ delay:2000 }).play();
dojo.query(“.para”)
.addClass(“testClass”)
.fadeOut({ delay: 1000 }).play();
var node = dojo.byId(“testHeading”);
dojo.connect(node,”onclick”,function(){
node.innerHTML = “I’ve been clicked”
});
});
// ——– Example – 2 —————————-

var disableLinks = function(){
dojo.query(“a”).connect(“onclick”,function(e){
e.preventDefault(); // stop the event
console.log(‘clicked: ‘,e.target); // the node we clicked on
});
};
dojo.addOnLoad(disableLinks);
// ———— Example – 3 ——————–
var mineObj = {
aMethod: function(){
console.log(‘running A’);
},
bMethod: function(){
console.log(‘running B’);
}
};
var otherObj = {
cMethod: function(){
console.log(‘running C’);
}
};
dojo.addOnLoad(function(){
// run bMethod() whenever aMethod() gets run
dojo.connect(mineObj,”aMethod”,mineObj,”bMethod”);
// run an entirely different object’s method via a separate connection
dojo.connect(mineObj,”bMethod”,otherObj,”cMethod”);
// start chain of events
mineObj.aMethod();
});
// ————- Example – 4 ———————-
dojo.addOnLoad(function(){
var animArgs = {
node: “testHeading”,
duration: 1000, // ms to run animation
delay: 250 // ms to stall before playing
};
dojo.fadeOut(animArgs).play();
});
// ———- Example – 5 —————————–
dojo.addOnLoad(function(){
dojo.style(“testHeading”,”opacity”,”0″); // hide it
var anim1 = dojo.fadeOut({ node: “testHeading”, duration:700 });
var anim2 = dojo.animateProperty({
node: “testHeading”, delay: 1000,
properties:{
// fade back in and make text bigger
opacity: { end: 1 }, fontSize: { end:19, unit:”pt”}
}
});
anim1.play();
anim2.play();
});
// ———- Example – 6 —————————–

dojo.require(“dojo.fx”);
dojo.addOnLoad(function(){
var anim = dojo.fadeOut({ node: “testHeading” });
var anim2 = dojo.fx.slideTo({ node: “testHeading”, top:75, left:75 });
var result = dojo.fx.combine([anim,anim2]);
result.play();
});
// ——– Example – 7 —————

dojo.addOnLoad(function(){
var anim = dojo.fadeOut({ node: “testHeading” });
dojo.connect(anim,”onEnd”,function(){
dojo.byId(“testHeading”).innerHTML = “replaced after fade!”
dojo.fadeIn({ node:”testHeading” }).play();
});
anim.play();
});
// ——– Example – 8 ——————

dojo.addOnLoad(function(){
var anim = dojo.animateProperty({
node:”testHeading”,
duration:700,
properties: {
// javascript css names are camelCase (not hyphenated)
fontSize: { start:12, end:22, unit:”pt” },
opacity: { start:1, end:0.5 },
color: { start: “#000″, end:”#FFE” }
},
delay:100 // be careful of this trailing comma, it breaks IE.
});
anim.play();
});
// ———– Example – 9 —————————-

dojo.require(“dojo.NodeList-fx”);
var fadeThemOut = function(){
dojo.query(“.fadeNode”).fadeOut().play();
}
var fadeThemIn = function(){
dojo.query(“.fadeNode”).fadeIn().play();
}
dojo.addOnLoad(function(){
dojo.connect(dojo.byId(“fadeOutTest”),”onclick”,fadeThemOut);
dojo.connect(dojo.byId(“fadeInTest”),”onclick”,fadeThemIn);
});
</script>
<style type=”text/css”>
/* our CSS can go here */
.testClass {
color:red;
}
</style>
</head>
<body>
<!– this is a Typical WebPage starting point … –>
<h1 id=”testHeading”>Dojo Skeleton Page</h1>
<a class=”link” href=”#”>First link</a>
<a class=”link” href=”#”>Second Link</a>
<p class=”para”>First paragraph</p>
<p class=”para”>Second paragraph</p>
<p class=”para”>Third paragraph</p>
<p class=”fadeNode”>FadeNode1 </p>
<p class=”fadeNode”>FadeNode2</p>
<p class=”fadeNode”>FadeNode3</p>
<div id=”fadeInTest”> Click to fadeIn</div>
<div id=”fadeOutTest”>Click to fadeOut</div>
<div id=”contentNode”>
<p>Some Content To Replace</p>
</div>
</body>
</html>

Advertisements

One Response

  1. […] Dojo Examples from Here <html> <head> <title>Dojo Toolkit Working Examples</title> <!– load […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: