原文地址:http://dojotoolkit.org/reference-guide/1.7/quickstart/gettingstarted.html#id1
要使用dojo非常简单,只要在页面里引入以下的js就可以使用dojo了
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js"></script>
就这么一句,没有安装文件,没有复杂的内容就能使用了,这个你不会认为很难吧?
通过下面的例子就展现了动画、事件等丰富的功能。
在页面里再加入下面的代码你就可以马上就实现这些效果。
dojo.ready(function(){
dojo.query("#showMe").onclick(function(e){
var node = e.target;
var a = dojo.anim(node, {
backgroundColor: "#363636",
color: "#f7f7f7"
}, 1000);
dojo.connect(a, "onEnd", function(){
dojo.anim(node, { color: "#363636" }, null, null, function(){
node.innerHTML = "wow, that was easy!";
dojo.anim(node, { color: "white" });
});
});
});
});
<div id="showMe" style="padding: 10px;">
click here to see how it works
</div>
整个页面代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js"></script>
</head>
<body>
<h1 id="greeting">Hello</h1>
<script>
dojo.ready(function(){
dojo.query("#showMe").onclick(function(e){
var node = e.target;
var a = dojo.anim(node, {
backgroundColor: "#363636",
color: "#f7f7f7"
}, 1000);
dojo.connect(a, "onEnd", function(){
dojo.anim(node, { color: "#363636" }, null, null, function(){
node.innerHTML = "wow, that was easy!";
dojo.anim(node, { color: "white" });
});
});
});
});
</script>
<div id="showMe" style="padding: 10px;">
click here to see how it works
</div>
</body>
</html>
241

被折叠的 条评论
为什么被折叠?



