原文地址: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>